Ready to roll out -alpha.1
This commit is contained in:
Angelos Chalaris
parent
1ade307862
commit
92969f8847
3 changed files with 48 additions and 27 deletions
|
|
@ -29,7 +29,16 @@ module.exports = {
|
|||
`You can combine the navigation bar element with the drawer menu for better results.`,
|
||||
`Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.`
|
||||
],
|
||||
customization: [],
|
||||
customization: [
|
||||
`Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of the toggle button and items inside the drawer container.`,
|
||||
`Background color for the drawer container can be changed by changing the value of the <code>--drawer-back-color</code> variable.`,
|
||||
`Border color for the drawer container can be changed by changing the value of the <code>--drawer-border-color</code> variable.`,
|
||||
`Text color for the drawer close button can be changed by changing the values of the <code>--drawer-close-color</code>.`,
|
||||
`Background color for the drawer close button when focused or hovered over can be changed by changing the values of the <code>--drawer-hover-back-color</code>.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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 <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : `Persistent drawer`,
|
||||
|
|
|
|||
|
|
@ -177,8 +177,13 @@
|
|||
- Documented `card` and `card section` to complete the `layout` module's docs.
|
||||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
|
||||
## 20171118
|
||||
- Documented `button` elements and input grouping.
|
||||
- Documented `header`, `footer` and `nav`.
|
||||
|
||||
## 20171119
|
||||
|
||||
- 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.
|
||||
|
|
@ -188,3 +193,10 @@
|
|||
- 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.
|
||||
|
||||
## 20171120
|
||||
|
||||
- Updated `.drawer` documentation to include customization.
|
||||
- Recompiled default flavor just in case.
|
||||
- Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
|
||||
- Unleashed the first **Gluon** alpha unto the world!
|
||||
|
|
|
|||
|
|
@ -45,12 +45,12 @@
|
|||
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small> Opera</small>36</h3></div>
|
||||
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small> Android</small>56</h3></div>
|
||||
</div><figcaption>Browser versions officially supported</figcaption></figure><br/></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div><br/><div id="common-textual-elements" class="card fluid">
|
||||
<h2 class="section double-padded">Common textual elements</h2>
|
||||
<div class="section"><p><strong>mini.css</strong> utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank">native font stack</a> to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to <code>16px</code> and its line height to <code>1.5</code>.</p>
|
||||
|
|
@ -62,12 +62,12 @@
|
|||
<span class="code-line"><span class="highlight-a"><sub></span>Subscript<span class="highlight-a"></sub></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><sup></span>Superscript<span class="highlight-a"></sup></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><hr/></span></span></pre></div>
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-c">/* Do not do this (use Sass instead) */</span></span>
|
||||
<span class="code-line"><span class="highlight-a">html</span> {</span>
|
||||
<span class="code-line"> font-size: <span class="highlight-b">14px</span>;</span>
|
||||
<span class="code-line">}</span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid altering the base font size of <code>16px</code> directly in your CSS code, as it can cause problems with the display of certain elements.</p></div></div></div>
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable.</li><li>Border color can be changed globally by changing the value of the <code>--border-color</code> variable. This affects the color of <code><hr></code> elements.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>You can change the color of links by changing the values of the <code>--a-link-color</code> and <code>--a-visited-color</code> variables.</li></ul></div>
|
||||
</div><br/><div id="heading" class="card fluid">
|
||||
<h2 class="section double-padded">Headings</h2>
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
<span class="code-line"><span class="highlight-a"><h5></span>Heading 5 <span class="highlight-a"><small></span>Subheading<span class="highlight-a"></small></h5></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><h6></span>Heading 6 <span class="highlight-a"><small></span>Subheading<span class="highlight-a"></small></h6></span></span></pre>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the color of the headings' main text.</li><li>Secondary text color can be changed globally by changing the value of the <code>--secondary-fore-color</code> variable. This will affect the color of subheadings.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>You can change the ratio of headings' size by chaning the value of the <code>--heading-ratio</code> variable. Bear in mind that the value of this variable must be unitless to work properly.</li></ul></div>
|
||||
</div><br/><div id="images-captions" class="card fluid">
|
||||
<h2 class="section double-padded">Images & captions</h2>
|
||||
|
|
@ -98,8 +98,8 @@
|
|||
<span class="code-line"> <span class="highlight-a"><img</span> <span class="highlight-b">src</span>=<span class="highlight-c">"image.png"</span> <span class="highlight-b">alt</span>=<span class="highlight-c">"Image description"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><figcaption></span>Image caption<span class="highlight-a"></figcaption></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></figure></span></span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>While not mandatory, it is considered a good practice to always add a <code>alt</code> attribute to image elements on your web apps.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>You can change the text color of <code><figcaption></code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li></ul></div>
|
||||
</div><br/><div id="lists" class="card fluid">
|
||||
|
|
@ -117,9 +117,9 @@
|
|||
<span class="code-line"> <span class="highlight-a"><li></span>Eat breakfast<span class="highlight-a"></li></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><li></span>Go to work<span class="highlight-a"></li></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></ol></span></span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="code-and-quotations" class="card fluid">
|
||||
<h2 class="section double-padded">Code & quotations</h2>
|
||||
|
|
@ -134,8 +134,8 @@
|
|||
<span class="code-line"> return num1 + num2;</span>
|
||||
<span class="code-line">}<span class="highlight-a"></pre></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><blockquote</span> <span class="highlight-b">cite</span>=<span class="highlight-c">"www.quotation.source"</span><span class="highlight-a">></span>This is some text quoted from elsewhere.<span class="highlight-a"></blockquote></span></span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>The <code>cite</code> attribute of <code><blockquote></code> elements is not mandatory and can be omitted. The element's sizing will be automatically adjusted according to the presence of the <code>cite</code> attribute.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of <code><code></code> and <code><pre></code> elements and background color of <code><kbd></code> elements.</li><li>Background color can be changed globally by changing the value of the <code>--back-color</code> variable. This will affect the background color of <code><blockquote></code> elements and text color of <code><kbd></code>.</li><li>You can change the background color of <code><code></code> and <code><pre></code> elements by changing the value of the <code>--secondary-back-color</code> variable.</li><li>You can change the text color of <code><blockquote></code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>You can change the border color of <code><pre></code> and <code><blockquote></code> elements by changing the value of the <code>--secondary-border-color</code> variable.</li><li>You can change the border color of the left border of <code><pre></code> elements by changing the value of the <code>--pre-color</code> variable.</li><li>You can change the border color of the left border of <code><blockquote></code> elements by changing the value of the <code>--blockquote-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="grid" class="card fluid">
|
||||
|
|
@ -412,7 +412,7 @@
|
|||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></form></span></span></pre></div>
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
||||
|
|
@ -501,7 +501,7 @@
|
|||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid combining input groups with the <a href="#grid">grid system</a>, as there might be overlapping styles.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>It is highly recommended that you do not place checkboxes or radio buttons inside fluid or vertical input groups.</li><li>Button groups will display horizontally on medium and large screens, but collapse into a vertical view on small screens.</li></ul></div>
|
||||
|
||||
|
||||
</div><br/><div id="header" class="card fluid">
|
||||
<h2 class="section double-padded">Header</h2>
|
||||
<div class="section"><p>The header element has been minimally styled, allowing you to create modern headers for your web apps. A header can include a logo element (<code>.logo</code>), as well as buttons, links and labels, styled as buttons (<code>.button</code>).</p></div>
|
||||
|
|
@ -544,8 +544,8 @@
|
|||
<span class="code-line"> <span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-1"</span><span class="highlight-a">></span>Category 2.2<span class="highlight-a"></span></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-2"</span><span class="highlight-a">></span>Item 2.2.1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></nav></span></span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>It is recommended that you combine the navigation bar element with the <a href="#grid">grid system</a> to create responsive navigation menus for your web apps.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for navigation bars can be changed by changing the value of the <code>--nav-fore-color</code> variable.</li><li>Background color for navigation bars can be changed by changing the value of the <code>--nav-back-color</code> variable.</li><li>Border color for navigation bars can be changed by changing the value of the <code>--nav-border-color</code> variable.</li><li>Background color for focused buttons inside navigation bars can be changed by changing the value of the <code>--nav-hover-back-color</code> variable.</li><li>Text color for links inside navigation bars can be changed by changing the value of the <code>--nav-link-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="footer" class="card fluid">
|
||||
|
|
@ -559,8 +559,8 @@
|
|||
<h4>Sticky footer</h4><p>You can make your web app's footer sticky (<code>.sticky</code>), by applying the appropriate modifier.</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><footer</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></footer></span></span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.</li><li>Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.</li><li>Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.</li><li>Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="drawer" class="card fluid">
|
||||
<h2 class="section double-padded">Menu drawer</h2>
|
||||
|
|
@ -607,7 +607,7 @@
|
|||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the drawer and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to <code>768px</code> wide.</li><li>It is highly recommended to place your drawer's toggle button inside your web app's header element.</li><li>You can combine the navigation bar element with the drawer menu for better results.</li><li>Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.</li></ul></div>
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color can be changed globally by changing the value of the <code>--fore-color</code> variable. This will affect the text color of the toggle button and items inside the drawer container.</li><li>Background color for the drawer container can be changed by changing the value of the <code>--drawer-back-color</code> variable.</li><li>Border color for the drawer container can be changed by changing the value of the <code>--drawer-border-color</code> variable.</li><li>Text color for the drawer close button can be changed by changing the values of the <code>--drawer-close-color</code>.</li><li>Background color for the drawer close button when focused or hovered over can be changed by changing the values of the <code>--drawer-hover-back-color</code>.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
|
||||
</div></div>
|
||||
<script>
|
||||
|
|
@ -634,4 +634,4 @@
|
|||
}
|
||||
</script>
|
||||
<style id="search-style">#no-results{display:none;}</style>
|
||||
</body></html>
|
||||
</body></html>
|
||||
Loading…
Reference in a new issue