Core tweaks for root element font-size and native font stacks
This commit is contained in:
Angelos Chalaris
parent
0ccd074738
commit
6a29439d80
9
dist/mini-default.css
vendored
9
dist/mini-default.css
vendored
|
|
@ -3,12 +3,17 @@
|
|||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.0 (in-production)
|
||||
*/
|
||||
html {
|
||||
font-size: 16px; }
|
||||
|
||||
html, * {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
|
||||
* {
|
||||
font-size: 1em; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: #212121;
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -541,3 +541,5 @@
|
|||
|
||||
- Added high-tech feature queries for `progress` elements and variants, `margin` and `width` should now work properly. Tested in Firefox and Chrome.
|
||||
- Updated demo pages with latest build.
|
||||
- Tweaks in the `core` module to use a `px`-based root in the `html` element.
|
||||
- Tweaks in the `core` module to use the "native font stack" - See here: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<h1>Grid</h1>
|
||||
<h1>Progress</h1>
|
||||
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
||||
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
||||
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Grid</li></ul>
|
||||
|
|
@ -119,173 +119,33 @@
|
|||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Basic layout</h2>
|
||||
<h2>Basic Progress Bar</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="container"><br>
|
||||
<div class="row"><div class="col-sm-1"><div class="box-colored">1</div></div><div class="col-sm-11"><div class="box-colored">11</div></div></div>
|
||||
<div class="row"><div class="col-sm-2"><div class="box-colored">2</div></div><div class="col-sm-10"><div class="box-colored">10</div></div></div>
|
||||
<div class="row"><div class="col-sm-3"><div class="box-colored">3</div></div><div class="col-sm-9"><div class="box-colored">9</div></div></div>
|
||||
<div class="row"><div class="col-sm-4"><div class="box-colored">4</div></div><div class="col-sm-8"><div class="box-colored">8</div></div></div>
|
||||
<div class="row"><div class="col-sm-5"><div class="box-colored">5</div></div><div class="col-sm-7"><div class="box-colored">7</div></div></div>
|
||||
<div class="row"><div class="col-sm-6"><div class="box-colored">6</div></div><div class="col-sm-6"><div class="box-colored">6</div></div></div>
|
||||
<div class="row"><div class="col-sm-12"><div class="box-colored">12</div></div></div>
|
||||
<div class="row"><div class="col-sm"><div class="box-colored">fluid</div></div><div class="col-sm"><div class="box-colored">fluid</div></div></div>
|
||||
</div>
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>The grid system's basic layout is composed of three components, presented below in the order they should be added to the DOM tree:</p>
|
||||
<ol>
|
||||
<li>The grid's <code>.container</code> is the outermost layer of your grid system. It is a fluid container that wraps the flexible grid system inside it.</li>
|
||||
<li>Inside the container, <code>.row</code>s are added to specify each row of the grid layout. Rows serve to provide you with a simple basis for your layout's columns.</li>
|
||||
<li>Finally, inside the rows, <code>.col-</code> elements are added for the columns. The columns are a little bit more complex than the container and rows, as they are what makes the layout respond to changes. There are two basic ways to define a column for your layout:
|
||||
<ul>
|
||||
<li>using <code>.col-<span class="fore-primary">SCR_SZ</span></code> to specify fluid columns, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><span class="fore-tertiary">sm</span></code> for smaller screens, <code><span class="fore-tertiary">md</span></code> for medium-sized screens or <code><span class="fore-tertiary">lg</span></code> for larger screens).</li>
|
||||
<li>using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> to specify columns with fixed width, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the column (<code>1</code> meaning 1/12 of the width of the row and <code>12</code> meaning 100% of the width of the row).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. Also, the example presented showcases the grid system's syntax for smaller screens, but you can do the same thing for any screen size.</p><br>
|
||||
<div class="container"><div class="row"><div class="tabs stacked"">
|
||||
<input type="checkbox" id="grid-base-sample" autocomplete="off">
|
||||
<label for="grid-base-sample">Show sample code</label>
|
||||
<div>
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-1">
|
||||
</div>
|
||||
<div class="col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div></div></div><br>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li><strong>mini.css</strong> uses a mobile-first approach in its grid system. This means that specifying a layout for smaller device sizes will apply the same layout on medium-sized and larger screens, so you do not have to rewrite the same layout for all three screen sizes. However, if you want to change the layout on different screen sizes, check the section below.</li>
|
||||
<li>The <strong>grid</strong> module is compatible with modern browsers, but does not display properly on older browsers.</li>
|
||||
<li>The specific breakpoints for small, medium and large screen sizes are as follows:
|
||||
<ul>
|
||||
<li><strong>small</strong>: less than <code>768px</code> wide</li>
|
||||
<li><strong>medium</strong>: more than or equal to <code>768px</code> wide but less than <code>1280px</code> wide</li>
|
||||
<li><strong>large</strong>: <code>1280px</code> wide or more</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fluid columns can be used for sizes that are not of the form <code>100%/12×<span class="fore-tertiary">X</span></code> where <code><span class="fore-tertiary">X</span></code> an integer value between <code>1</code> and <code>12</code>. For example, if you have 7 <code>.col-sm</code> elements in one row, each of the elements will have a width of 1/7th the width of the row.</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="col-sm">
|
||||
<div class="container">
|
||||
</div>
|
||||
</div>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<div class="col-sm">
|
||||
<div class="row">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> A column can contain a container or a row inside it. The container can also be skipped if inside a column, so you only need to add a row.</p>
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="col-sm">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using columns inside columns without a row wrapping them. Either make the outer column a row in itself or wrap the inside columns in a row.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="col-sm row">
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> A column can also be a row at the same time, if you want to include sub-columns inside it. You can make the same element both a column in its own row and a row for its containing columns. The same idea can be applied for the container. Containers can, however, be omitted, when already inside a grid.</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="row">
|
||||
<span class="fore-secondary"><!-- content without columns --></span>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using rows with content inside that is not in wrapped in columns. Try to use a single <code>.col-sm</code> to wrap the content inside these, otherwise there might be unexpected behavior.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre> <div class="row">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<div class="col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div>
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> Mix fluid columns with fixed, if you like. Fluid columns will adapt to the size of the container left for them. You can also use columns with a total size of more than <code>12</code>, meaning with a total width of over 100%. The remaining content will flow below the rest, allowing you to specify multiple blocks of content inside the same row if you need to.</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
</div>
|
||||
<p>Normal paragraph.</p>
|
||||
</div>
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
<p>Normal paragraph.</p>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing rows and columns with normal content that is not wrapped on the respective level of the grid system. Always wrap content inside the proper containers (container, row or column) in your grid layout.</p>
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -296,89 +156,33 @@
|
|||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Screen-specific layouts</h2>
|
||||
<h2>Progress Bar variants</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="container">
|
||||
<div class="row"><div class="col-sm"><h4>Small screen layout</h4><hr></div></div>
|
||||
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
||||
<div class="row"><div class="col-sm-12"><div class="box-colored red" style="height: 40px;"></div></div><div class="col-sm-12"><div class="box-colored green" style="height: 60px;"></div></div><div class="col-sm-12"><div class="box-colored red" style="height: 40px;"></div></div></div>
|
||||
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
||||
<div class="row"><div class="col-sm"><h4>Medium/Large screen layout</h4><hr></div></div>
|
||||
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
||||
<div class="row"><div class="col-sm-3"><div class="box-colored red" style="height: 100px;"></div></div><div class="col-sm-5"><div class="box-colored green" style="height: 100px;"></div></div><div class="col-sm-4"><div class="box-colored red" style="height: 100px;"></div></div></div>
|
||||
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
||||
</div>
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>You can specify different layouts for your pages and web apps, using the grid system's columns. To do this add classes to your columns for different screen sizes, using either the fluid column syntax (<code>.col-<span class="fore-primary">SCR_SZ</span></code>) or the fixed width column syntax (<code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>) or even both.</p>
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-3 col-lg-2">
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-5 col-lg-7">
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-4 col-lg-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div></pre><br>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Leaving a column's size unspecified for a resolution will use the style applied for the previous largest resolution recursively.</li>
|
||||
<li>Changing the layout for different screen sizes can sometimes require complex content realignment, offsetting and reordering. For these features, check the sections below.</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can radically change the layout of your content for different displays. Laying out your content vertically in <code>.col-sm-12</code>s for small devices and then compacting it to <code>.col-md-6</code>s for medium displays is pretty common. If your columns exceed a total size of <code>12</code> on some displays, they will wrap accordingly, so do not worry.</p>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> If you want to place two columns side by side on some displays, but not on others (e.g. placing them vertically on smaller displays, then next to each other on medium-sized or larger displays), place them in one row, not multiple, otherwise you will not achieve the desired effect.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-lg-3">
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-8">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> Specify only the screen-specific column sizes that you need. You can omit the medium-sized screens' size from a column if its layout on smaller screens is fluid or should be the same as in medium-sized displays. Or, if your larger screen layout is the same as your medium-sized screen layout, you can omit the class for the larger screen.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="row">
|
||||
<div class="col-md">
|
||||
</div>
|
||||
<div class="col-lg">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Never omit the class needed for the smallest screen size you have (<code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code>), otherwise the column's layout on smaller displays might behave unexpectedly. You can, however, omit layout for the other two screen sizes if you want.</p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -389,74 +193,33 @@
|
|||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Column offsets</h2>
|
||||
<h2>Basic Donut Spinner</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="row"><div class="col-sm-10 col-sm-offset-1"><div class="box-colored">size = 10, offset = 1</div></div></div>
|
||||
<div class="row"><div class="col-sm col-sm-offset-2"><div class="box-colored">fluid, offset = 2</div></div></div>
|
||||
<div class="row"><div class="col-sm-6 col-sm-offset-3"><div class="box-colored">size = 6, offset = 3</div></div></div>
|
||||
<div class="row"><div class="col-sm-8 col-sm-offset-4"><div class="box-colored">size = 8, offset = 4</div></div></div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-1"><div class="box-colored">size = 5, offset = 1</div></div>
|
||||
<div class="col-sm-5 col-sm-offset-1"><div class="box-colored">size = 5, offset = 1</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>If you want to move columns to the right, you can use the offset classes on your columns. Offset classes use the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> syntax, where <code><span class="fore-primary">SCR_SZ</span></code> is one of the available screen size names (<code><span class="fore-tertiary">sm</span></code>, <code><span class="fore-tertiary">md</span></code> or <code><span class="fore-tertiary">lg</span></code>) and <code><span class="fore-secondary">COL_WD</span></code> a number from <code>0</code> to <code>11</code> specifying the width of the column's offset. Offsets can also be used in combination with screen-specific layouts and column sizes, providing you with greater flexibility when spacing out your content.</p>
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<p>The example presented below showcases the grid system's offsetting syntax for smaller screens, but you can do the same thing for any screen size.</p>
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-sm-offset-2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-4">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
</div></pre><br>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Columns with offsets and columns without offsets can be mixed for better results. In fact, we strongly suggest you try that.</li>
|
||||
<li>Remember to specify a basic layout and/or screen specific layouts in addition to the offset classes.</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
|
||||
</div>
|
||||
<div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can specify offset classes when you need them and omit them otherwise. This means that, if you want to offset a column only on a medium-sized or a larger screen, you can just specify the offset for that specific screen. Specifying an offset for a smaller screen, however, will apply it to medium-sized and larger screens as well, medium-sized screen offsets will apply to larger screens etc. similar to how the layout system works.</p>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-0</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, effectively resetting all offsets.</p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -467,73 +230,33 @@
|
|||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Column reordering</h2>
|
||||
<h2>Donut Spinner variants</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="container">
|
||||
<div class="row"><div class="col-sm"><h4>Small screen layout</h4><hr></div></div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored red">normal</div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
</div>
|
||||
<div class="row"><div class="col-sm"><h4>Medium screen layout</h4><hr></div></div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-sm"><div class="box-colored red">first</div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
</div><div class="row"><div class="col-sm"><h4>Large screen layout</h4><hr></div></div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored"> </div></div>
|
||||
<div class="col-sm col-sm"><div class="box-colored red">last</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Finally, if you want to reorder your columns, you can do that to some extent using the <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes to your columns, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><span class="fore-tertiary">sm</span></code>, <code><span class="fore-tertiary">md</span></code> or <code><span class="fore-tertiary">lg</span></code>). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).</p>
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm col-md-last col-lg-normal">
|
||||
</div>
|
||||
<div class="col-sm-first col-md-normal">
|
||||
</div>
|
||||
<div class="col-sm col-md-first col-lg-normal">
|
||||
</div>
|
||||
</div>
|
||||
</div></pre><br>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Columns are ordered by default in order of appearance. You should only apply column reordering classes to the columns you want to reorder on the screen-specific layouts you need them.</li>
|
||||
<li>Remember to specify a basic layout and/or screen specific layouts in addition to the column reordering classes.</li>
|
||||
<li>Column reordering is applied from smaller to larger screens, similar to how column layout and offsetting work.</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-last">
|
||||
</div>
|
||||
<div class="col-sm col-md-last">
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can use multiple <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>s and <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code>s, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, in the same row for the same screen size. If you specify more than one column to be first or last, the columns with the same order will be placed at the beggining or end of the row and the order between them will be determined based on their order of appearance in the DOM tree afterwards.</p>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm-last col-md-normal">
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> To remove a previously applied reorder from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no reordering is active on a column, you can use the <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> class, replacing <code><span class="fore-primary">SCR_SZ</span></code> with the desired screen size, effectively resetting all reorders. You do not, however, need to add this class to all other columns or use it when there are no reorders applied.</p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,15 @@
|
|||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #f5f5f5; // Body background color
|
||||
$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements
|
||||
$base-font-size: 1em; // Default font sizing for all elements
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all
|
||||
// elements? (`true` or `false`) [1]
|
||||
// elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2em; // Font size of h1
|
||||
$h2-font-size: 1.5em; // Font size for h2
|
||||
$h3-font-size: 1.25em; // Font size for h3
|
||||
|
|
@ -28,7 +31,7 @@ $heading-margin: 12px 8px; // Margin for all headings
|
|||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings
|
||||
// be displayed as blocks (`true`/`false`) [2]
|
||||
// be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 1px 8px; // Paragraph element margin
|
||||
|
|
@ -38,10 +41,10 @@ $horizontal-rule-margin: 8px; // <hr> margin
|
|||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
||||
// in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
||||
// <hr> element (`true`/`false`) [3]
|
||||
// <hr> element (`true`/`false`) [5]
|
||||
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be
|
||||
// used for code elements? (`true`/`false`) [4]
|
||||
// used for code elements? (`true`/`false`) [6]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 2px 4px; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
|
|
@ -59,7 +62,7 @@ $pre-element-margin: 8px 10px; // Margin for <pre>
|
|||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
||||
// left side of <pre> (`true`/`false`)
|
||||
// left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre>
|
||||
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
||||
$kbd-element-fore-color: $back-color; // Text color for <kbd>
|
||||
|
|
@ -69,14 +72,14 @@ $kbd-element-border-radius: 2px; // Border radius for <kbd>
|
|||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
// (`true`/`false`) [6]
|
||||
// (`true`/`false`) [8]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
|
||||
// be included (`true`/`false`) [7]
|
||||
// be included (`true`/`false`) [9]
|
||||
$small-font-size: 75%; // Font size for <small> elements
|
||||
$sup-font-size: 75%; // Font size for <sup> elements
|
||||
$sub-font-size: 75%; // Font size for <sub> elements
|
||||
|
|
@ -86,29 +89,34 @@ $link-fore-color: #0277bd; // Text color for <a>
|
|||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a>
|
||||
// elements? (`true`/`false`) [8]
|
||||
// elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
|
||||
// elements use fade-out instead of a different
|
||||
// color (`true`/`false`) [9]
|
||||
// color (`true`/`false`) [11]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
// Notes:
|
||||
// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [2] - If the value of $make-header-smalltext-block is `true` the <small> elements in headers will be displayed below
|
||||
// the main header and the 2 values specified below will apply.
|
||||
// [3] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [4] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [5] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [6] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [7] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [8] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [9] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// [11] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
// Browsers resets and base typography.
|
||||
$apply-defaults-to-all: true !default;
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
@if $apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue