0afb5277ad
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
693 lines
50 KiB
HTML
693 lines
50 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#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{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;}}
|
|
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" 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.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
|
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
|
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
|
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
|
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
|
|
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
|
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
|
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
|
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
|
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
|
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
|
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><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>
|
|
<p style="text-align: justify;"><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><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 use the <strong>grid</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre>
|
|
<figure class="hidden-sm" style="margin: 0;"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1972.embed"></iframe></div><figcaption style="padding: 0.5rem;">mini.css grids tutorial by <a href="https://scrimba.com/casts/cast-1972" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="basic-layout">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Basic layout</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 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>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">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 style="text-align: justify;">
|
|
<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>
|
|
<h3>Sample code</h3>
|
|
<p style="text-align: justify;">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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<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 might not display properly in 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>
|
|
</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" style="text-align: justify;"><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>
|
|
</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" style="text-align: justify;"><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" style="text-align: justify;"><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">
|
|
<p>Content without columns...</p>
|
|
</div></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Avoid using rows with content inside that is not 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" style="text-align: justify;"><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>
|
|
</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" style="text-align: justify;"><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="screen-specific-layout">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Screen-specific layouts</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md">
|
|
<div class="row"><div class="col-sm"><h4 style="text-align:center">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: 45px;"></div></div><div class="col-sm-12"><div class="box-colored green" style="height: 120px;"></div></div><div class="col-sm-12"><div class="box-colored red" style="height: 45px;"></div></div></div>
|
|
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<div class="row"><div class="col-sm"><h4 style="text-align:center">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: 282px;"></div></div><div class="col-sm-5"><div class="box-colored green" style="height: 282px;"></div></div><div class="col-sm-4"><div class="box-colored red" style="height: 282px;"></div></div></div>
|
|
<div class="row"><div class="col-sm"><div class="box-colored"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<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>
|
|
</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" style="text-align: justify;"><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>
|
|
<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" style="text-align: justify;"><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" style="text-align: justify;"><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" style="text-align: justify;"><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="predefined-layout">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Predefined layouts</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">Some simple grid layout problems can be solved using predefined layouts. To use a predefined layout, simply add a predefined layout class to a <code>.row</code> element. Predefined classes can be written using one of two syntaxes, similar to normal column classes:</p>
|
|
<ul style="text-align: justify;">
|
|
<li>fluid column layouts can be specified using <code>.cols-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names.</li>
|
|
<li>fixed width columns layouts can be specified using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>, 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 columns.</li>
|
|
</ul>
|
|
<h3>Sample code</h3>
|
|
<pre><div class="row cols-sm-6">
|
|
<div>
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
<div>
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
</div></pre><br>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<li>Predefined layouts can be combined with most of the features of the grid system, such as offsets and reordering.</li>
|
|
<li>If you use a fluid predefined layout, its columns will always be placed in one row.</li>
|
|
<li>Not specifying a predefined layout for a resolution will use the style applied for the previous largest resolution recursively.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row cols-sm-12 cols-md-6">
|
|
<div>
|
|
<p>col-sm-12, col-md-6</p>
|
|
</div>
|
|
<div>
|
|
<p>col-sm-12, col-md-6</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row cols-sm-6">
|
|
<div class="row cols-sm-7">
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
<div class="row cols-sm-5">
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="column-offset">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Column offsets</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container"><br>
|
|
<div class="row"><div class="col-sm-8 col-sm-offset-2"><div class="box-colored">size = 8, 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-4 col-sm-offset-4"><div class="box-colored">size = 4, offset = 4</div></div></div>
|
|
<div class="row">
|
|
<div class="col-sm-4 col-sm-offset-1"><div class="box-colored">size = 4, offset = 1</div></div>
|
|
<div class="col-sm-4 col-sm-offset-2"><div class="box-colored">size = 4, offset = 2</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">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>
|
|
<h3>Sample code</h3>
|
|
<p style="text-align: justify;">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-8 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-4 col-sm-offset-4">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm col-sm-offset-1">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 col-sm-offset-1">
|
|
</div>
|
|
<div class="col-sm-4 col-sm-offset-2">
|
|
</div>
|
|
</div>
|
|
</div></pre><br>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<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>
|
|
</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" style="text-align: justify;"><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>
|
|
<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" style="text-align: justify;"><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="column-reorder">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Column reordering</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container">
|
|
<div class="row"><div class="col-sm"><br><br></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"><br><br></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"><br><br></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>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p style="text-align: justify;">Additionally, 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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align: justify;">
|
|
<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>
|
|
</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" style="text-align: justify;"><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>
|
|
<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" style="text-align: justify;"><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="media-object">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Media object pattern</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container">
|
|
<div class="row"><div class="col-sm"><br></div></div>
|
|
<div class="row">
|
|
<div class="col-sm col-sm-2"><img src="https://placehold.it/800x600" alt="image"></div>
|
|
<div class="col-sm col-sm row">
|
|
<div class="col-sm">
|
|
<h3>Media object heading</h3>
|
|
<p>This is an example implementation of the popular media object pattern, using simple grid rules.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<p style="text-align: justify;">Last, but not least, you can use the grid system's classes to create a <a href="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> in one of many ways, based on your needs. The simplest way to implement a media object is using two columns, one for the media (i.e. <code><img></code>) and one for the textual content next to the media.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><div class="row">
|
|
<div class="col-sm-1">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm">
|
|
<h2>Media object heading</h2>
|
|
<p>Media object content...</p>
|
|
</div>
|
|
</div></pre><br>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>The media object is not a different component, but rather a popular pattern that can be implemented using the standard grid system classes.</li>
|
|
<li>You can use many different elements for your media object. For example, you can make the right side of the media object contain a form or an input field.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row">
|
|
<div class="col-sm-1 col-md-2 col-lg-3">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm-11 col-md-10 col-lg-9">
|
|
<h2>Media object heading</h2>
|
|
<p>Media object content...</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can make your media object responsive, by adding screen-specific layout classes to its columns.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row">
|
|
<div class="col-sm-1 col-sm-last">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm">
|
|
<h2>Media object heading</h2>
|
|
<p>Media object content...</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> You can align the media object's content to the left of the image (instead of the other way round), using 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.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row">
|
|
<div class="col-sm-2">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<h2>Parent media object</h2>
|
|
<p>Parent media object content...</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm">
|
|
<h2>Child media object</h2>
|
|
<p>Child media object content...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark> Media objects can be easily nested. You can use <code>.row</code> elements in the content column of the media object to make everything align perfectly.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="row">
|
|
<img src="..." class="col-sm-1">
|
|
<div class="col-sm">
|
|
<h2>Media object heading</h2>
|
|
<p>Media object content...</p>
|
|
</div>
|
|
</div></pre>
|
|
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> Do not apply a column class directly to the media element (e.g.<code><img></code>) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in <code><div></code> elements and apply the grid classes to them, instead.</p>
|
|
</div>
|
|
</div>
|
|
</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 <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module 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>
|