1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +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>