217 lines
18 KiB
HTML
217 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="../mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Grid</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, grid ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
|
|
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
|
|
td:first-child, td:last-child { font-family: monospace, monospace; }
|
|
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
|
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> GitHub</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
|
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid#grid-title">Grid</a>
|
|
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="input_control#input-control-title">Input Control</a>
|
|
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
|
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
|
<br/> <a href="navigation#navigation-title">Navigation</a>
|
|
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="table#table-title">Table</a>
|
|
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card#card-title">Card</a>
|
|
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab#tab-title">Tab</a>
|
|
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual#contextual-title">Contextual</a>
|
|
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
|
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress#progress-title">Progress</a>
|
|
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility#utility-title">Utility</a>
|
|
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
|
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="grid-title">
|
|
<div class="col-sm-12">
|
|
<h1>Grid</h1>
|
|
<p style="text-align:justify">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p><br />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p style="text-align:justify">Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The <strong>grid</strong> module utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> to provide you with a modern and responsive layout grid system for all your needs. Rules in the <strong>grid</strong> module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p style="text-align:justify">To customize the <strong>grid</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="classes-breakpoints">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Classes & breakpoints</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</p><br/>
|
|
<table style="width: 100%" class="striped">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$grid-container-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class name for the grid system's container</td><td data-label="Sample value">'container'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-container-side-padding</td><td data-label="Type">Padding (single value)</td>
|
|
<td data-label="Description">Left and right padding for the grid system's container</td><td data-label="Sample value">10px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-container-column-count</td><td data-label="Type">Integer</td>
|
|
<td data-label="Description">Number of columns in the grid</td><td data-label="Sample value">12</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the grid system's columns</td><td data-label="Sample value">0 4px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-row-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class name for the grid system's rows</td><td data-label="Sample value">'row'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for the grid sytem's columns</td><td data-label="Sample value">'col'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$use-four-step-grid</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Toggles the 4-step grid on or off<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">false</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-extra-small-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for extra small screen columns<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">'xs'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">The grid system's breakpoint for small screens<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">480px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-small-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for small screen columns</td><td data-label="Sample value">'sm'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">The grid system's breakpoint for medium-sized screens</td><td data-label="Sample value">768px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-medium-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for medium-sized screen columns</td><td data-label="Sample value">'md'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
|
<td data-label="Description">The grid system's breakpoint for large screens</td><td data-label="Sample value">1280px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-large-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for large screen columns</td><td data-label="Sample value">'lg'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$include-parent-layout</td><td data-label="Type">Logical</td>
|
|
<td data-label="Description">Enables rows defining the column layout of their children<sup><a href="#grid-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-rows-parent-layout-prefix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class prefix for the grid's row parents<sup><a href="#grid-note-two">2</a></sup></td><td data-label="Sample value">'cols'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-offset-suffix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class suffix for the grid system's offset columns</td><td data-label="Sample value">'offset'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-normal-suffix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class suffix for the grid system's normal order columns</td><td data-label="Sample value">'normal'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-first-suffix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class suffix for the grid system's first order columns</td><td data-label="Sample value">'first'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$grid-column-last-suffix</td><td data-label="Type">String</td>
|
|
<td data-label="Description">The class suffix for the grid system's last order columns</td><td data-label="Sample value">'last'</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes:</h3>
|
|
<ol style="text-align:justify">
|
|
<li id="grid-note-one">The values of <code>$grid-extra-small-prefix</code> and <code>$grid-small-breakpoint</code> will only be used if <code>$use-four-step-grid</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
<li id="grid-note-two">The value of <code>$grid-row-parent-layout-prefix</code> will only be used if <code>$include-parent-layout</code> is set to <code class="fore-tertiary">true</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">GitHub</a>.</footer>
|
|
</body>
|
|
</html>
|