1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 14:26:28 +02:00

Updated customization doc for mobile

Added a mobile-friendly menu to help visitors on mobile navigate the pages.
This commit is contained in:
Angelos Chalaris
2017-05-03 11:22:20 +03:00
parent 4ba49f343a
commit 11c244ed98
2 changed files with 15 additions and 2 deletions

View File

@@ -71,7 +71,19 @@
<div class="col-sm-12">
<h1>Customization</h1>
<p><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors.html">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
<p>Use the sidebar menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided below before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
<p>Use the <span class="hidden-sm">sidebar </span>menu <span class="hidden-md hidden-lg">below </span>to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
</div>
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
<div class="button-group" style="border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; height: 100%;">
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="navigation.html" class="button small">Navigation</a><a href="input_control.html" class="button small">Input Control</a><a href="table.html" class="button small">Table</a>
</div>
</div>
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
<div class="button-group" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin: 0; height: 100%;">
<a href="card.html" class="button small">Card</a><a href="tab.html" class="button small">Tab</a><a href="contextual.html" class="button small">Contextual</a><a href="progress.html" class="button small">Progress</a><a href="utility.html" class="button small">Utility</a>
</div>
</div>
<div class="col-sm-12">
<br/>
<h2>Introduction &amp; basics</h2>
<p><strong>mini.css</strong> is written using <a href="http://sass-lang.com/">Sass</a>, a very popular CSS preprocessor. We use Sass to do four things:</p>
@@ -105,7 +117,7 @@
</div>
<div class="row">
<div class="col-sm-12">
<p>To read more about the inner workings of <strong>mini.css</strong>, please choose a module from the top navigation bar to view its documentation.</p>
<p>To read more about the inner workings of <strong>mini.css</strong>, please choose a module from the menu to view its documentation.</p>
</div>
</div>
<div class="row box-centered"><div class="col-sm-12"></div></div>

View File

@@ -1067,3 +1067,4 @@
- Extensive validity checking for the CSS codebase, no real issues that can be solved, due to most being part of the `WD` or `REC`, so they will be resolved on their own over time.
- Some testing and work on how to simplify certain rules has taken place. Honestly, some rules are too high-specificity, maybe a *loose* definitions flag is in store for later releases.
- Checked page mobile-friendliness and speed, removed the `Noto Sans` link from the `head`, added as rules inside the pages to improve loading speed.
- Updated the `index.html` of customization to make sure that mobile users have a menu they can use for the section (using a `.button-group`).