Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then mini.css is the right tool for you! Its tiny size (under 10KB gzipped), along with its responsive grid and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), mini.css packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.
+
+
+
+
+
+
Tailored to Your Needs
+
Creating a CSS framework that caters to everyone's needs is no easy task, but mini.css manages to rise to the occasion by providing extensive and coherent documentation in combination with templates, examples and semantic HTML5 markup. Modern UX patterns and accessibility guidelines are well-documented and can be used out of the box, using one of the unique flavors that the framework provides. If you still want more, you can create your own custom flavor or tweak an existing one just by opening its CSS file and changing a few custom properties. It's that simple!
+
+
+
+
+
Get started now!
+
Head over to the documentation to learn how to get started using mini.css, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!
@@ -106,3 +172,13 @@ function buildLink(fragment){
function stripData(fragment){
return `{id: "${fragment.id}", keys: [${fragment.keywords.map(k=>`"${k}"`)}] }`;
}
+
+fs.writeFile(docOutputPath,
+ `${documentStart}${appShellStart}
+ ${appSidebarStart}${documentationLinks}${appSidebarEnd}
+ ${mainStart}${documentationFragments}${mainEnd}
+ ${appShellEnd}
+ ${documentationSearch}
+ ${documentEnd}`,
+ function(err) { if(err) return console.log(err); console.log("Documentation file generated!"); }
+);
diff --git a/docs/doc-fragments/cardSections.js b/docs/doc-fragments/cardSections.js
index aa27e37..97943bb 100644
--- a/docs/doc-fragments/cardSections.js
+++ b/docs/doc-fragments/cardSections.js
@@ -14,7 +14,7 @@ module.exports = {
`While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.`,
`Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.`,
`Media sections have a default height of 200px.`,
- `Due to the media sections using object-fit, you might want to use a polyfill for better browser support (recommended: image polyfill, video polyfill).`,
+ `Due to the media sections using Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
+ description: `
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.
`,
example: `
This is a paragraph with some sample text. Did you know that the latest version of mini.css is codenamed Gluon? Well, now you do!
Remember that mini.css is totally free, no fine print involved!
The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:
+ description: `
The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:
The container (.container) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout.
Inside the container, you can add one or more rows (.row), which will in turn house the columns.
Columns (col-*-*) are placed inside rows and they can be customized to display differently on different screen sizes, make use of fluid layouts, use offsets or change ordering.
`,
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index a0a9532..1f8f8dd 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -181,3 +181,10 @@
- Documented `header`, `footer` and `nav`.
- Documented `drawer`.
- Implemented search functionality, using `fuse`. It all works pretty well.
+- Added `index.html` generation code in the build file, this will allow me to not load a script for the versioning.
+- Polished menus with icons, updated menus.
+- Updated splash page with all the necessary thing and buttons.
+- Optimized all images to make the pages lighter.
+- Updated links to open in new tabs when they are external.
+- Generated new favicons.
+- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.
diff --git a/docs/v3/browser-logos/android_128x128.png b/docs/v3/browser-logos/android_128x128.png
index 11d789d..84a9901 100644
Binary files a/docs/v3/browser-logos/android_128x128.png and b/docs/v3/browser-logos/android_128x128.png differ
diff --git a/docs/v3/browser-logos/chrome_128x128.png b/docs/v3/browser-logos/chrome_128x128.png
index 3024356..f930b41 100644
Binary files a/docs/v3/browser-logos/chrome_128x128.png and b/docs/v3/browser-logos/chrome_128x128.png differ
diff --git a/docs/v3/browser-logos/edge_128x128.png b/docs/v3/browser-logos/edge_128x128.png
index 42a2857..d2b6f04 100644
Binary files a/docs/v3/browser-logos/edge_128x128.png and b/docs/v3/browser-logos/edge_128x128.png differ
diff --git a/docs/v3/browser-logos/firefox_128x128.png b/docs/v3/browser-logos/firefox_128x128.png
index e7c0945..a069a04 100644
Binary files a/docs/v3/browser-logos/firefox_128x128.png and b/docs/v3/browser-logos/firefox_128x128.png differ
diff --git a/docs/v3/browser-logos/opera_128x128.png b/docs/v3/browser-logos/opera_128x128.png
index 1cf4e0d..973478a 100644
Binary files a/docs/v3/browser-logos/opera_128x128.png and b/docs/v3/browser-logos/opera_128x128.png differ
diff --git a/docs/v3/browser-logos/safari_128x128.png b/docs/v3/browser-logos/safari_128x128.png
index 58f91b6..fa7f507 100644
Binary files a/docs/v3/browser-logos/safari_128x128.png and b/docs/v3/browser-logos/safari_128x128.png differ
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index fbcd8bf..d8fc0a4 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -1,12 +1,10 @@
-
-
-mini.css - Minimal, responsive, style-agnostic CSS framework
+mini.css - Docs
-
+
@@ -14,15 +12,15 @@
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
+
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.
Example
This is a paragraph with some sample text. Did you know that the latest version of mini.css is codenamed Gluon? Well, now you do!
Remember that mini.css is totally free, no fine print involved!
Sample code
<p>This is a paragraph. with some <strong>bold text</strong> and some <em>italics text</em>.</p>
@@ -142,7 +140,7 @@
Customization
Text color can be changed globally by changing the value of the --fore-color variable. This will affect the text color of <code> and <pre> elements and background color of <kbd> elements.
Background color can be changed globally by changing the value of the --back-color variable. This will affect the background color of <blockquote> elements and text color of <kbd>.
You can change the background color of <code> and <pre> elements by changing the value of the --secondary-back-color variable.
You can change the text color of <blockquote> elements by changing the value of the --secondary-fore-color variable.
You can change the border color of <pre> and <blockquote> elements by changing the value of the --secondary-border-color variable.
You can change the border color of the left border of <pre> elements by changing the value of the --pre-color variable.
You can change the border color of the left border of <blockquote> elements by changing the value of the --blockquote-color variable.
Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.
Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
Grid system
-
The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:
+
The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:
The container (.container) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout.
Inside the container, you can add one or more rows (.row), which will in turn house the columns.
Columns (col-*-*) are placed inside rows and they can be customized to display differently on different screen sizes, make use of fluid layouts, use offsets or change ordering.
@@ -377,7 +375,7 @@
<divclass="section"></div><p>This should have been a section!</p></div>
Don't: Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.
-
Notes
While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.
Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.
+ 
+