From b770e6a36c615459d71f15c342a60c6a51586bb6 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 14 Sep 2016 15:25:08 +0300 Subject: [PATCH] Updated demo pages --- docs/index.html | 169 ++++++++++++++++------------------------------ docs/modules.html | 57 ++++++++++++++++ 2 files changed, 116 insertions(+), 110 deletions(-) create mode 100644 docs/modules.html diff --git a/docs/index.html b/docs/index.html index 06d5369..1ed27eb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,19 +9,39 @@ - - + +
+
+ +

@@ -31,129 +51,58 @@

mini.css a minimal Sass-y responsive mobile-first style-agnostic CSS framework

If you want to create your own flavor, get involved or report an issue, head over to mini.css's Github page. If you want to give mini.css a try using the default flavor, paste the following code inside your HTML page's <head> tag:

- 
<link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css">

Why mini.css?

-

mini.css is a very light framework without any Javascript or excessive styling, that allows you to quickly build your own styles exactly the way you want them. Also, it works great on mobile devices. So, the three main reasons to give it a try are

-

mini.css is tiny

-

mini.css is really small, just below 3KB gzipped, making it ideal if you want to build a page that load really fast. Comparing this to Twitter Bootstrap, one of the most popular frameworks out there which is about 100KB gzipped, you can probably see why you might want to try out mini.css.

- -

mini.css is mobile-friendly

-

Mobile devices are becoming more and more important when designing for web and mini.css knows that. In fact, it is built with mobile devices as a priority, not an afterthought. What this means is that your websites will work well on mobile devices without a lot of tweaking.* If you are not convinced, open this page in your phone.

(*): We do not want to claim that any website will ever instantly work 100% the way you want on mobile, but mini.css eliminates a lot of the tedious work of making your websites mobile-friendly, so you can focus on the interesting parts that actually need your attention. - -

mini.css is style-agnostic

-

mini.css does not force you to use some default colors that make all websites look similar. In fact it does not force you to use any styling that is preset by the author of the framework. It comes in flavors. That's right, everything is customizable to the point that you can make it look entirely different from almost any other website built with mini.css. How? Well, using the very powerful features that Sass (SCSS) provides and by having a well-documented Wiki to help you customize it as much as you like.

-
-

Core modules

-

Frameworks are all about modules. Some are important, others not so much. This is why mini.css allows you to pick which modules you want in your custom flavor. We have already separated them into core modules and extras, so that you can easily choose what you like. What we think is vital to the core experience:

- -

Base

-

By using a modified version of normalize.css combined with a long list of variables, a customized base is created that makes your pages work well in all browsers and devices. The base is usually about 1.2KB* making it so tiny you'll hardly even notice it in page loading. Also, the framework's base contains your customized typography rules and colors.

+

What does it contain?

+

mini.css is split up into modules, each with a specific focus or set of components. These modules are categorized under core modules and extra modules. We suggest that you use most of the core modules in your projects, as most projects can make good use of them. As for the extra modules, we suggest you carefully pick the ones you need for your project. Below is a quick overview of all the modules:

-

Responsive grid

-

mini.css comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.*

+
diff --git a/docs/modules.html b/docs/modules.html new file mode 100644 index 0000000..70ea7e5 --- /dev/null +++ b/docs/modules.html @@ -0,0 +1,57 @@ + + + + mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework + + + + + + + + + + + + +
+ + +
+ +
+
+ +
+
+
+
+
+ +

Coming soon!

+ +
+
+
+ + \ No newline at end of file