diff --git a/.npmignore b/.npmignore index ad0aab4..715b2dc 100644 --- a/.npmignore +++ b/.npmignore @@ -2,3 +2,5 @@ docs/v1 docs/v2 docs/page_thumb.png prepros-6\.config +docs/browser-logos +docs/mini-logo.svg diff --git a/docs/browser-logos/android_128x128.png b/docs/browser-logos/android_128x128.png new file mode 100644 index 0000000..11d789d Binary files /dev/null and b/docs/browser-logos/android_128x128.png differ diff --git a/docs/browser-logos/chrome_128x128.png b/docs/browser-logos/chrome_128x128.png new file mode 100644 index 0000000..3024356 Binary files /dev/null and b/docs/browser-logos/chrome_128x128.png differ diff --git a/docs/browser-logos/edge_128x128.png b/docs/browser-logos/edge_128x128.png new file mode 100644 index 0000000..42a2857 Binary files /dev/null and b/docs/browser-logos/edge_128x128.png differ diff --git a/docs/browser-logos/firefox_128x128.png b/docs/browser-logos/firefox_128x128.png new file mode 100644 index 0000000..e7c0945 Binary files /dev/null and b/docs/browser-logos/firefox_128x128.png differ diff --git a/docs/browser-logos/opera_128x128.png b/docs/browser-logos/opera_128x128.png new file mode 100644 index 0000000..1cf4e0d Binary files /dev/null and b/docs/browser-logos/opera_128x128.png differ diff --git a/docs/browser-logos/safari_128x128.png b/docs/browser-logos/safari_128x128.png new file mode 100644 index 0000000..58f91b6 Binary files /dev/null and b/docs/browser-logos/safari_128x128.png differ diff --git a/docs/index.html b/docs/index.html index 904fa09..651a262 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,7 +49,7 @@ .box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;} - .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} + .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;} @@ -68,10 +68,10 @@  Github -
+
-
+

MinimalSize matters!




@@ -79,7 +79,7 @@
-
+

ResponsiveThink mobile!




@@ -87,7 +87,7 @@
-
+

Style-agnosticInfinitely customizable!




@@ -109,105 +109,50 @@

After downloading mini.css, pick a Flavor and use it for your project.


Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page's <head> tag:

- 
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
- 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.2/dist/mini-default.min.css">

+ 
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.3/dist/mini-default.min.css">

Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.


+
+
+
+

Browser support

+
+

 Edge12

+

 Firefox28

+

 Chrome26

+

 Safari7.1

+

 Opera17

+

 Android4.4

+
+

 Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.

+

Quick overview

-

Take a couple of minutes to learn how mini.css differs from all those other UI frameworks (Bootstrap, Semantic UI etc):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Framework file size comparison
NameVersionSize (uncompressed)Size (minified)Size (gzipped)
Bootstrapv3.3.7143 KB117 KB20 KB
Material Frameworkv3.0114 KB90 KB18 KB
mini.cssv2.1.250 KB40 KB7 KB
Semantic UIv2.2.10752 KB553 KB95 KB
Zurb Foundationv6.3.1103 KB73 KB13 KB

-

 The above comparison takes into account only the CSS files of each framework. mini.css's size is an approximation due to the nature of its flavor system. The calculated results were produced using Refresh-SF.


-
-
-

Module list

-
    -
  • Core - Resets, typography rules and fixes
    • -
  • Grid - Powerful, responsive flexbox-based grid
    • -
  • Navigation - Common elements for navigation
    • -
  • Input Control - Forms, buttons and inputs
    • -
  • Table - Modern, responsive tables
    • -
  • Card - Sleek, modern content containers
    • -
  • Tab - Responsive tabs and accordions
    • -
  • Contextual - Contextual highlights and alerts
    • -
  • Progress - Modern progress bars and loaders
    • -
  • Utility - Utility and helper classes
    • -
-
-
-

Why does mini.css have so few modules?

-

Modules are what make frameworks so powerful, by giving developers the essential components they need to structure and style their websites. mini.css simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to behave exactly as the developer needs them to. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Browser support
BrowserNot supportedPartially supportedFully supported
 Internet Explorer8-9-1011+
 Edgen/an/a12+
 Firefox21-22-2728+
 Chrome20-n/a21+
 Safari6-n/a6.1+
 Opera11.5-12.1-1617+
 Android Browser4.3-n/a4.4+

-

 Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.


-
+

Take a couple of minutes to explore what makes mini.css different from all those other CSS frameworks and UI toolkits.


+

Why should I use mini.css?

+

mini.css is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, mini.css blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in mini.css.

+
+

What exactly does mini.css provide?

+

Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. mini.css provides a handful of very powerful modules that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:

+
    +
  • Core - Basic reset and fix rules, based on Normalize.css v5.0.0, typography and common textual element styling
    • +
  • Grid - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as flexbox)
    • +
  • Navigation - Common navigational elements such as headers, footers and navigation bars
    • +
  • Input Control - Form, input element, checkbox, radio button and button styling
    • +
  • Table - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices
    • +
  • Card - Sleek, modern general-purpose content containers, media embedding
    • +
  • Tab - Modern, responsive tabs, accordions and collapses
    • +
  • Contextual - Content highlight element styling, elegant alerts and accessible tooltips
    • +
  • Progress - Modern progress bar styling and spinning progress indicators
    • +
  • Utility - Utilities, visibility helper classes, responsive sizing and breadcrumbs
    • +

+

How do I customize mini.css?

+

mini.css allows you to easily customize your designs, using Flavors, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the customization section.


+
@@ -219,6 +164,7 @@
  • If you are familiar with mini.css and want a cheat sheet or quick reference guide, check the quick reference page!
  • mini.css comes with a few nice pre-built customizable flavors. See which one of them better suits your needs!
  • If you are more experienced or demanding, you can always take a look at the customization section to cook up a flavor of your own custom-tailored to your needs!
    • +
  • Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the Github repository to find out more.
    • diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index d3d8a28..76b5b40 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -1056,3 +1056,4 @@ - Updated `mini-lite` to use the latest ruleset and colors from `mini-default`. - Added sidebar navigation for `\customization` pages, updated them all. - Added template for login forms. +- Updated front-page a little bit, adding logos and changing the content around a little bit.