mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Add initial version of grid system forked from BS4
This commit is contained in:
Cory LaViska
@@ -6,6 +6,7 @@
|
||||
"custom-property-empty-line-before": null,
|
||||
"declaration-block-single-line-max-declarations": null,
|
||||
"number-leading-zero": "never",
|
||||
"selector-list-comma-newline-after": null,
|
||||
"shorthand-property-no-redundant-values": null
|
||||
}
|
||||
}
|
||||
|
||||
10
dist/shoelace.css
vendored
10
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
@@ -24,60 +24,220 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="progress-bars.html">Progress Bars</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
<main class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<ul id="nav">
|
||||
<li><a href="installing.html">Installing</a></li>
|
||||
<li><a href="customizing.html">Customizing</a></li>
|
||||
<li><a href="content.html">Content</a></li>
|
||||
<li><a href="alerts.html">Alerts</a></li>
|
||||
<li><a href="badges.html">Badges</a></li>
|
||||
<li><a href="buttons.html">Buttons</a></li>
|
||||
<li><a href="dropdowns.html">Dropdowns</a></li>
|
||||
<li><a href="forms.html">Forms</a></li>
|
||||
<li><a href="grid-system.html">Grid System</a></li>
|
||||
<li><a href="loaders.html">Loaders</a></li>
|
||||
<li><a href="progress-bars.html">Progress Bars</a></li>
|
||||
<li><a href="switches.html">Switches</a></li>
|
||||
<li><a href="tabs.html">Tabs</a></li>
|
||||
<li><a href="tables.html">Tables</a></li>
|
||||
<li><a href="utilities.html">Utilities</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="browser-support.html">Browser Support</a></li>
|
||||
<li><a href="attribution.html">Attribution</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="grid-system">Grid System</h2>
|
||||
<p>Shoelace doesn’t ship with a grid system because <a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">you don’t need one</a>. You should use the <a href="https://gridbyexample.com/">CSS Grid Layout</a> instead.</p>
|
||||
<p>This website uses the CSS Grid Layout. It’s really simple!</p>
|
||||
<pre><code class="lang-html"><main id="wrap">
|
||||
<nav id="nav">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
...
|
||||
<div class="col-md-9">
|
||||
<div id="content">
|
||||
<h2 id="grid-system">Grid System</h2>
|
||||
<p>Shoelace features a 12-column grid system based heavily on <a href="https://getbootstrap.com/docs/4.0/layout/grid/">Bootstrap 4’s grid</a>. It’s flexible, easy to use, and fully responsive.</p>
|
||||
<h3 id="structure">Structure</h3>
|
||||
<p>The grid consists of containers, rows, and columns. A basic, two-column grid looks like this:</p>
|
||||
<pre><code class="lang-html"><div class="container">
|
||||
<div class="row">
|
||||
<div class="col">1st column</div>
|
||||
<div class="col">2nd column</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</code></pre>
|
||||
<p>Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav <code>12rem</code> wide and the content <code>100% - 12rem</code> so it fills the rest of the space.</p>
|
||||
<pre><code class="lang-css">#wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem calc(100% - 12rem);
|
||||
}
|
||||
</code></pre>
|
||||
<p>You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.</p>
|
||||
<pre><code class="lang-css">@media (max-width: 60rem) {
|
||||
#wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="for-older-browsers">For Older Browsers</h3>
|
||||
<p>Support for CSS Grid Layouts is <a href="http://caniuse.com/css-grid">decent</a>, but if you have an obligation to support Internet Explorer or Edge < 16, consider using the <a href="https://evgenyrodionov.github.io/flexboxgrid2/">Flexbox Grid</a> in combination with Shoelace.</p>
|
||||
<p>You can use it as-is or include the source files and customize it with CSS variables in your build process.</p>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">1st column</div>
|
||||
<div class="col">2nd column</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Containers can be used to wrap sections of your page. Use the <code>container</code> class to create a responsive, fixed-width container or the <code>container-fluid</code> class to create a fluid container.</p>
|
||||
<p>Rows are used to group columns horizontally. Rows can only contain columns as child elements.</p>
|
||||
<p>Columns are where your content will go. To create a complete row, use any combination of columns that adds up to 12 wide.</p>
|
||||
<h3 id="creating-columns">Creating Columns</h3>
|
||||
<p>Columns are equal width by default. The grid will automatically determine the appropriate size for columns with the <code>col</code> class.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col">1</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">1</div>
|
||||
<div class="col">2</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">1</div>
|
||||
<div class="col">2</div>
|
||||
<div class="col">3</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>To set the width of column, use the <code>col-*</code> modifier with a value of 1–12. Widths are calculated based on a total of 12 possible columns. Additional columns will wrap to a new line.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-2">col-2</div>
|
||||
<div class="col-4">col-4</div>
|
||||
<div class="col-6">col-6</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2">col-2</div>
|
||||
<div class="col-4">col-4</div>
|
||||
<div class="col-6">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col-6">col-6</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col-6">col-6</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="making-columns-responsive">Making Columns Responsive</h3>
|
||||
<p>There are five responsive tiers in Shoelace: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. You can use these tiers to change the way the grid responds at various breakpoints.</p>
|
||||
<p>Use the <code>col-{tier}-*</code> modifier to target a specific tier. Note that tiers are based on minimum widths, so using <code>col-sm-6</code> will target <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. However, you can target multiple tiers on the same column as needed.</p>
|
||||
<p>For example, the following columns will stack on <code>xs</code> screens, take up 50% each (6 out of 12 columns) on <code>sm</code> screens, and 75% and 25% respectively on <code>md</code>, <code>lg</code>, and <code>xl</code> screens.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-8">1st column</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">2nd column</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-8">1st column</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">2nd column</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="offsetting-columns">Offsetting Columns</h3>
|
||||
<p>You can offset columns using <code>offset-*</code> and <code>offset-{tier}-*</code> modifiers. To reset an offset at a specific tier, use <code>offset-{tier}-0</code>.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-2">left</div>
|
||||
<div class="col-2 offset-2">center</div>
|
||||
<div class="col-2 offset-2">right</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2">left</div>
|
||||
<div class="col-2 offset-3">center</div>
|
||||
<div class="col-2 offset-3">right</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="reordering-columns">Reordering Columns</h3>
|
||||
<p>You can control the visual order of columns using the <code>order-*</code> and <code>order-{tier}-*</code> modifiers. Note that columns without an order modifier will not be affected.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-4">1st (no order)</div>
|
||||
<div class="col-4 order-3">2nd (shown 3rd)</div>
|
||||
<div class="col-4 order-2">3rd (shown 2nd)</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-4">1st (unordered)</div>
|
||||
<div class="col-4 order-3">2nd</div>
|
||||
<div class="col-4 order-2">3rd</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="hiding-columns">Hiding Columns</h3>
|
||||
<p>You can hide columns based on breakpoints using <a href="utilities.html#display-utilities">display utilities</a>.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-2">always</div>
|
||||
<div class="col-2 hidden-xs">hidden-xs</div>
|
||||
<div class="col-2 hidden-sm">hidden-sm</div>
|
||||
<div class="col-2 hidden-md">hidden-md</div>
|
||||
<div class="col-2 hidden-lg">hidden-lg</div>
|
||||
<div class="col-2 hidden-xl">hidden-xl</div>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2 hidden-xs">xs</div>
|
||||
<div class="col-2 hidden-sm">sm</div>
|
||||
<div class="col-2 hidden-md">md</div>
|
||||
<div class="col-2 hidden-lg">lg</div>
|
||||
<div class="col-2 hidden-xl">xl</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="removing-gutters">Removing Gutters</h3>
|
||||
<p>By default, columns have horizontal spacing around them to create “gutters.” You can remove this spacing by applying the <code>no-gutters</code> class to the parent row.</p>
|
||||
<pre><code class="lang-html"><div class="row no-gutters">
|
||||
...
|
||||
</div>
|
||||
</code></pre>
|
||||
<p>For an edge-to-edge design, refrain from using <code>container</code> and <code>container-fluid</code>.</p>
|
||||
<h3 id="nesting-grids">Nesting Grids</h3>
|
||||
<p>Grids can be nested. Simply add a new row inside of a column.</p>
|
||||
<pre><code class="lang-html"><div class="row">
|
||||
<div class="col-8">
|
||||
outer, col-8
|
||||
<div class="row">
|
||||
<div class="col-3">inner, col-3</div>
|
||||
<div class="col-9">inner, col-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
outer, col-8
|
||||
<div class="row">
|
||||
<div class="col-3">inner, col-3</div>
|
||||
<div class="col-9">inner, col-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
|
||||
@@ -13,22 +13,14 @@ body {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
max-width: 60rem;
|
||||
padding: 0 2rem;
|
||||
margin: 2rem auto;
|
||||
display: grid;
|
||||
grid-template-columns: 12rem calc(100% - 12rem);
|
||||
}
|
||||
|
||||
#nav {
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
border-right: solid 1px #ddd;
|
||||
padding-right: 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
#nav li {
|
||||
margin: .5rem 0;
|
||||
display: block;
|
||||
}
|
||||
@@ -38,6 +30,19 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#nav {
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
margin: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#foot {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
@@ -49,48 +54,6 @@ body {
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
#homepage #wrap {
|
||||
max-width: 48rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 60rem) {
|
||||
#head {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
padding: 0 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav {
|
||||
font-size: .9rem;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
margin: .3rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback to block nav for unsupportive browsers */
|
||||
@supports (not (display: grid)) {
|
||||
#nav {
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
margin: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
h1[id]:not(:first-child),
|
||||
h2[id]:not(:first-child),
|
||||
h3[id]:not(:first-child),
|
||||
@@ -117,13 +80,6 @@ a code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 45rem) {
|
||||
a.bookmark {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.browsers {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -134,18 +90,6 @@ a code {
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
/* Column helpers */
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-left: -.5rem;
|
||||
margin-right: -.5rem;
|
||||
}
|
||||
|
||||
.two-column .column {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
/* Sizing examples */
|
||||
.width-sizing-example {
|
||||
border: solid 1px #ddd;
|
||||
@@ -197,15 +141,28 @@ a code {
|
||||
}
|
||||
|
||||
/* Tabs example */
|
||||
.tabs-vertical-example {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Grid example */
|
||||
.grid-example {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-example .row .col,
|
||||
.grid-example .row [class*="col-"] {
|
||||
background: #0074d9;
|
||||
border: solid 1px white;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.grid-example .row .row .col,
|
||||
.grid-example .row .row [class*="col-"] {
|
||||
background: tomato;
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
@@ -13,12 +13,6 @@ body {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
max-width: 48rem;
|
||||
padding: 0 2rem;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
|
||||
}
|
||||
|
||||
763
source/css/grid.css
Normal file
763
source/css/grid.css
Normal file
@@ -0,0 +1,763 @@
|
||||
/*! Grid System
|
||||
|
||||
Forked from Bootstrap 4.
|
||||
|
||||
Copyright (c) 2011-2017 Twitter, Inc.
|
||||
Copyright (c) 2011-2017 The Bootstrap Authors
|
||||
|
||||
Licensed under the MIT license.
|
||||
*/
|
||||
:root {
|
||||
--container-max-width-sm: 540px;
|
||||
--container-max-width-md: 720px;
|
||||
--container-max-width-lg: 960px;
|
||||
--container-max-width-xl: 1140px;
|
||||
|
||||
--grid-gutter-width: 2rem;
|
||||
}
|
||||
|
||||
/* Containers */
|
||||
.container,
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: calc(var(--grid-gutter-width) / 2);
|
||||
padding-left: calc(var(--grid-gutter-width) / 2);
|
||||
}
|
||||
|
||||
@media (--breakpoint-sm-up) {
|
||||
.container {
|
||||
max-width: var(--container-max-width-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-md-up) {
|
||||
.container {
|
||||
max-width: var(--container-max-width-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-lg-up) {
|
||||
.container {
|
||||
max-width: var(--container-max-width-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-xl-up) {
|
||||
.container {
|
||||
max-width: var(--container-max-width-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Rows */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: calc(var(--grid-gutter-width) / -2);
|
||||
margin-left: calc(var(--grid-gutter-width) / -2);
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Columns */
|
||||
.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
|
||||
.col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
|
||||
.col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
|
||||
.col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
|
||||
.col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: calc(var(--grid-gutter-width) / 2);
|
||||
padding-left: calc(var(--grid-gutter-width) / 2);
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.order-1 { order: 1; }
|
||||
.order-2 { order: 2; }
|
||||
.order-3 { order: 3; }
|
||||
.order-4 { order: 4; }
|
||||
.order-5 { order: 5; }
|
||||
.order-6 { order: 6; }
|
||||
.order-7 { order: 7; }
|
||||
.order-8 { order: 8; }
|
||||
.order-9 { order: 9; }
|
||||
.order-10 { order: 10; }
|
||||
.order-11 { order: 11; }
|
||||
.order-12 { order: 12; }
|
||||
|
||||
.offset-1 { margin-left: 8.333333%; }
|
||||
.offset-2 { margin-left: 16.666667%; }
|
||||
.offset-3 { margin-left: 25%; }
|
||||
.offset-4 { margin-left: 33.333333%; }
|
||||
.offset-5 { margin-left: 41.666667%; }
|
||||
.offset-6 { margin-left: 50%; }
|
||||
.offset-7 { margin-left: 58.333333%; }
|
||||
.offset-8 { margin-left: 66.666667%; }
|
||||
.offset-9 { margin-left: 75%; }
|
||||
.offset-10 { margin-left: 83.333333%; }
|
||||
.offset-11 { margin-left: 91.666667%; }
|
||||
|
||||
/* Columns (sm) */
|
||||
@media (--breakpoint-sm-up) {
|
||||
.col-sm {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-sm-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.col-sm-1 {
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-sm-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-sm-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-sm-5 {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-sm-7 {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
|
||||
.col-sm-8 {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
|
||||
.col-sm-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-sm-10 {
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
|
||||
.col-sm-11 {
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.order-sm-1 { order: 1; }
|
||||
.order-sm-2 { order: 2; }
|
||||
.order-sm-3 { order: 3; }
|
||||
.order-sm-4 { order: 4; }
|
||||
.order-sm-5 { order: 5; }
|
||||
.order-sm-6 { order: 6; }
|
||||
.order-sm-7 { order: 7; }
|
||||
.order-sm-8 { order: 8; }
|
||||
.order-sm-9 { order: 9; }
|
||||
.order-sm-10 { order: 10; }
|
||||
.order-sm-11 { order: 11; }
|
||||
.order-sm-12 { order: 12; }
|
||||
|
||||
.offset-sm-0 { margin-left: 0%; }
|
||||
.offset-sm-1 { margin-left: 8.333333%; }
|
||||
.offset-sm-2 { margin-left: 16.666667%; }
|
||||
.offset-sm-3 { margin-left: 25%; }
|
||||
.offset-sm-4 { margin-left: 33.333333%; }
|
||||
.offset-sm-5 { margin-left: 41.666667%; }
|
||||
.offset-sm-6 { margin-left: 50%; }
|
||||
.offset-sm-7 { margin-left: 58.333333%; }
|
||||
.offset-sm-8 { margin-left: 66.666667%; }
|
||||
.offset-sm-9 { margin-left: 75%; }
|
||||
.offset-sm-10 { margin-left: 83.333333%; }
|
||||
.offset-sm-11 { margin-left: 91.666667%; }
|
||||
}
|
||||
|
||||
/* Columns (md) */
|
||||
@media (--breakpoint-md-up) {
|
||||
.col-md {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-md-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.col-md-1 {
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
|
||||
.col-md-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-md-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-md-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-md-5 {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
|
||||
.col-md-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-md-7 {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
|
||||
.col-md-8 {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
|
||||
.col-md-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-md-10 {
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
|
||||
.col-md-11 {
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
|
||||
.col-md-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.order-md-1 { order: 1; }
|
||||
.order-md-2 { order: 2; }
|
||||
.order-md-3 { order: 3; }
|
||||
.order-md-4 { order: 4; }
|
||||
.order-md-5 { order: 5; }
|
||||
.order-md-6 { order: 6; }
|
||||
.order-md-7 { order: 7; }
|
||||
.order-md-8 { order: 8; }
|
||||
.order-md-9 { order: 9; }
|
||||
.order-md-10 { order: 10; }
|
||||
.order-md-11 { order: 11; }
|
||||
.order-md-12 { order: 12; }
|
||||
|
||||
.offset-md-0 { margin-left: 0%; }
|
||||
.offset-md-1 { margin-left: 8.333333%; }
|
||||
.offset-md-2 { margin-left: 16.666667%; }
|
||||
.offset-md-3 { margin-left: 25%; }
|
||||
.offset-md-4 { margin-left: 33.333333%; }
|
||||
.offset-md-5 { margin-left: 41.666667%; }
|
||||
.offset-md-6 { margin-left: 50%; }
|
||||
.offset-md-7 { margin-left: 58.333333%; }
|
||||
.offset-md-8 { margin-left: 66.666667%; }
|
||||
.offset-md-9 { margin-left: 75%; }
|
||||
.offset-md-10 { margin-left: 83.333333%; }
|
||||
.offset-md-11 { margin-left: 91.666667%; }
|
||||
}
|
||||
|
||||
/* Columns (lg) */
|
||||
@media (--breakpoint-lg-up) {
|
||||
.col-lg {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-lg-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.col-lg-1 {
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-lg-5 {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
|
||||
.col-lg-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-lg-7 {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
|
||||
.col-lg-8 {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
|
||||
.col-lg-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-lg-10 {
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
|
||||
.col-lg-11 {
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
|
||||
.col-lg-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.order-lg-1 { order: 1; }
|
||||
.order-lg-2 { order: 2; }
|
||||
.order-lg-3 { order: 3; }
|
||||
.order-lg-4 { order: 4; }
|
||||
.order-lg-5 { order: 5; }
|
||||
.order-lg-6 { order: 6; }
|
||||
.order-lg-7 { order: 7; }
|
||||
.order-lg-8 { order: 8; }
|
||||
.order-lg-9 { order: 9; }
|
||||
.order-lg-10 { order: 10; }
|
||||
.order-lg-11 { order: 11; }
|
||||
.order-lg-12 { order: 12; }
|
||||
|
||||
.offset-lg-0 { margin-left: 0%; }
|
||||
.offset-lg-1 { margin-left: 8.333333%; }
|
||||
.offset-lg-2 { margin-left: 16.666667%; }
|
||||
.offset-lg-3 { margin-left: 25%; }
|
||||
.offset-lg-4 { margin-left: 33.333333%; }
|
||||
.offset-lg-5 { margin-left: 41.666667%; }
|
||||
.offset-lg-6 { margin-left: 50%; }
|
||||
.offset-lg-7 { margin-left: 58.333333%; }
|
||||
.offset-lg-8 { margin-left: 66.666667%; }
|
||||
.offset-lg-9 { margin-left: 75%; }
|
||||
.offset-lg-10 { margin-left: 83.333333%; }
|
||||
.offset-lg-11 { margin-left: 91.666667%; }
|
||||
}
|
||||
|
||||
/* Columns (xl) */
|
||||
@media (--breakpoint-xl-up) {
|
||||
.col-xl {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.col-xl-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.col-xl-1 {
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
|
||||
.col-xl-2 {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.col-xl-4 {
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
|
||||
.col-xl-5 {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
|
||||
.col-xl-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.col-xl-7 {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
|
||||
.col-xl-8 {
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
|
||||
.col-xl-9 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.col-xl-10 {
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
|
||||
.col-xl-11 {
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
|
||||
.col-xl-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.order-xl-1 { order: 1; }
|
||||
.order-xl-2 { order: 2; }
|
||||
.order-xl-3 { order: 3; }
|
||||
.order-xl-4 { order: 4; }
|
||||
.order-xl-5 { order: 5; }
|
||||
.order-xl-6 { order: 6; }
|
||||
.order-xl-7 { order: 7; }
|
||||
.order-xl-8 { order: 8; }
|
||||
.order-xl-9 { order: 9; }
|
||||
.order-xl-10 { order: 10; }
|
||||
.order-xl-11 { order: 11; }
|
||||
.order-xl-12 { order: 12; }
|
||||
|
||||
.offset-xl-0 { margin-left: 0%; }
|
||||
.offset-xl-1 { margin-left: 8.333333%; }
|
||||
.offset-xl-2 { margin-left: 16.666667%; }
|
||||
.offset-xl-3 { margin-left: 25%; }
|
||||
.offset-xl-4 { margin-left: 33.333333%; }
|
||||
.offset-xl-5 { margin-left: 41.666667%; }
|
||||
.offset-xl-6 { margin-left: 50%; }
|
||||
.offset-xl-7 { margin-left: 58.333333%; }
|
||||
.offset-xl-8 { margin-left: 66.666667%; }
|
||||
.offset-xl-9 { margin-left: 75%; }
|
||||
.offset-xl-10 { margin-left: 83.333333%; }
|
||||
.offset-xl-11 { margin-left: 91.666667%; }
|
||||
}
|
||||
|
||||
/* Grid Utilities */
|
||||
.flex-row { flex-direction: row !important; }
|
||||
.flex-column { flex-direction: column !important; }
|
||||
.flex-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-column-reverse { flex-direction: column-reverse !important; }
|
||||
.flex-wrap { flex-wrap: wrap !important; }
|
||||
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-start { justify-content: flex-start !important; }
|
||||
.justify-content-end { justify-content: flex-end !important; }
|
||||
.justify-content-center { justify-content: center !important; }
|
||||
.justify-content-between { justify-content: space-between !important; }
|
||||
.justify-content-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-start { align-items: flex-start !important; }
|
||||
.align-items-end { align-items: flex-end !important; }
|
||||
.align-items-center { align-items: center !important; }
|
||||
.align-items-baseline { align-items: baseline !important; }
|
||||
.align-items-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-start { align-content: flex-start !important; }
|
||||
.align-content-end { align-content: flex-end !important; }
|
||||
.align-content-center { align-content: center !important; }
|
||||
.align-content-between { align-content: space-between !important; }
|
||||
.align-content-around { align-content: space-around !important; }
|
||||
.align-content-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-auto { align-self: auto !important; }
|
||||
.align-self-start { align-self: flex-start !important; }
|
||||
.align-self-end { align-self: flex-end !important; }
|
||||
.align-self-center { align-self: center !important; }
|
||||
.align-self-baseline { align-self: baseline !important; }
|
||||
.align-self-stretch { align-self: stretch !important; }
|
||||
|
||||
@media (--breakpoint-sm-up) {
|
||||
.flex-sm-row { flex-direction: row !important; }
|
||||
.flex-sm-column { flex-direction: column !important; }
|
||||
.flex-sm-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-sm-column-reverse { flex-direction: column-reverse !important; }
|
||||
.flex-sm-wrap { flex-wrap: wrap !important; }
|
||||
.flex-sm-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-sm-start { justify-content: flex-start !important; }
|
||||
.justify-content-sm-end { justify-content: flex-end !important; }
|
||||
.justify-content-sm-center { justify-content: center !important; }
|
||||
.justify-content-sm-between { justify-content: space-between !important; }
|
||||
.justify-content-sm-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-sm-start { align-items: flex-start !important; }
|
||||
.align-items-sm-end { align-items: flex-end !important; }
|
||||
.align-items-sm-center { align-items: center !important; }
|
||||
.align-items-sm-baseline { align-items: baseline !important; }
|
||||
.align-items-sm-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-sm-start { align-content: flex-start !important; }
|
||||
.align-content-sm-end { align-content: flex-end !important; }
|
||||
.align-content-sm-center { align-content: center !important; }
|
||||
.align-content-sm-between { align-content: space-between !important; }
|
||||
.align-content-sm-around { align-content: space-around !important; }
|
||||
.align-content-sm-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-sm-auto { align-self: auto !important; }
|
||||
.align-self-sm-start { align-self: flex-start !important; }
|
||||
.align-self-sm-end { align-self: flex-end !important; }
|
||||
.align-self-sm-center { align-self: center !important; }
|
||||
.align-self-sm-baseline { align-self: baseline !important; }
|
||||
.align-self-sm-stretch { align-self: stretch !important; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-md-up) {
|
||||
.flex-md-row { flex-direction: row !important; }
|
||||
.flex-md-column { flex-direction: column !important; }
|
||||
.flex-md-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-md-column-reverse { flex-direction: column-reverse !important; }
|
||||
.flex-md-wrap { flex-wrap: wrap !important; }
|
||||
.flex-md-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-md-start { justify-content: flex-start !important; }
|
||||
.justify-content-md-end { justify-content: flex-end !important; }
|
||||
.justify-content-md-center { justify-content: center !important; }
|
||||
.justify-content-md-between { justify-content: space-between !important; }
|
||||
.justify-content-md-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-md-start { align-items: flex-start !important; }
|
||||
.align-items-md-end { align-items: flex-end !important; }
|
||||
.align-items-md-center { align-items: center !important; }
|
||||
.align-items-md-baseline { align-items: baseline !important; }
|
||||
.align-items-md-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-md-start { align-content: flex-start !important; }
|
||||
.align-content-md-end { align-content: flex-end !important; }
|
||||
.align-content-md-center { align-content: center !important; }
|
||||
.align-content-md-between { align-content: space-between !important; }
|
||||
.align-content-md-around { align-content: space-around !important; }
|
||||
.align-content-md-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-md-auto { align-self: auto !important; }
|
||||
.align-self-md-start { align-self: flex-start !important; }
|
||||
.align-self-md-end { align-self: flex-end !important; }
|
||||
.align-self-md-center { align-self: center !important; }
|
||||
.align-self-md-baseline { align-self: baseline !important; }
|
||||
.align-self-md-stretch { align-self: stretch !important; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-lg-up) {
|
||||
.flex-lg-row { flex-direction: row !important; }
|
||||
.flex-lg-column { flex-direction: column !important; }
|
||||
.flex-lg-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-lg-column-reverse { flex-direction: column-reverse !important; }
|
||||
.flex-lg-wrap { flex-wrap: wrap !important; }
|
||||
.flex-lg-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-lg-start { justify-content: flex-start !important; }
|
||||
.justify-content-lg-end { justify-content: flex-end !important; }
|
||||
.justify-content-lg-center { justify-content: center !important; }
|
||||
.justify-content-lg-between { justify-content: space-between !important; }
|
||||
.justify-content-lg-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-lg-start { align-items: flex-start !important; }
|
||||
.align-items-lg-end { align-items: flex-end !important; }
|
||||
.align-items-lg-center { align-items: center !important; }
|
||||
.align-items-lg-baseline { align-items: baseline !important; }
|
||||
.align-items-lg-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-lg-start { align-content: flex-start !important; }
|
||||
.align-content-lg-end { align-content: flex-end !important; }
|
||||
.align-content-lg-center { align-content: center !important; }
|
||||
.align-content-lg-between { align-content: space-between !important; }
|
||||
.align-content-lg-around { align-content: space-around !important; }
|
||||
.align-content-lg-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-lg-auto { align-self: auto !important; }
|
||||
.align-self-lg-start { align-self: flex-start !important; }
|
||||
.align-self-lg-end { align-self: flex-end !important; }
|
||||
.align-self-lg-center { align-self: center !important; }
|
||||
.align-self-lg-baseline { align-self: baseline !important; }
|
||||
.align-self-lg-stretch { align-self: stretch !important; }
|
||||
}
|
||||
|
||||
@media (--breakpoint-xl-up) {
|
||||
.flex-xl-row { flex-direction: row !important; }
|
||||
.flex-xl-column { flex-direction: column !important; }
|
||||
.flex-xl-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-xl-column-reverse { flex-direction: column-reverse !important; }
|
||||
.flex-xl-wrap { flex-wrap: wrap !important; }
|
||||
.flex-xl-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-xl-start { justify-content: flex-start !important; }
|
||||
.justify-content-xl-end { justify-content: flex-end !important; }
|
||||
.justify-content-xl-center { justify-content: center !important; }
|
||||
.justify-content-xl-between { justify-content: space-between !important; }
|
||||
.justify-content-xl-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-xl-start { align-items: flex-start !important; }
|
||||
.align-items-xl-end { align-items: flex-end !important; }
|
||||
.align-items-xl-center { align-items: center !important; }
|
||||
.align-items-xl-baseline { align-items: baseline !important; }
|
||||
.align-items-xl-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-xl-start { align-content: flex-start !important; }
|
||||
.align-content-xl-end { align-content: flex-end !important; }
|
||||
.align-content-xl-center { align-content: center !important; }
|
||||
.align-content-xl-between { align-content: space-between !important; }
|
||||
.align-content-xl-around { align-content: space-around !important; }
|
||||
.align-content-xl-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-xl-auto { align-self: auto !important; }
|
||||
.align-self-xl-start { align-self: flex-start !important; }
|
||||
.align-self-xl-end { align-self: flex-end !important; }
|
||||
.align-self-xl-center { align-self: center !important; }
|
||||
.align-self-xl-baseline { align-self: baseline !important; }
|
||||
.align-self-xl-stretch { align-self: stretch !important; }
|
||||
}
|
||||
@@ -13,6 +13,7 @@
|
||||
@import url('buttons.css');
|
||||
@import url('dropdowns.css');
|
||||
@import url('forms.css');
|
||||
@import url('grid.css');
|
||||
@import url('loaders.css');
|
||||
@import url('progress-bars.css');
|
||||
@import url('switches.css');
|
||||
@@ -20,6 +21,26 @@
|
||||
@import url('tables.css');
|
||||
@import url('utilities.css');
|
||||
|
||||
/* Custom media queries */
|
||||
@custom-media --breakpoint-xs-up only screen and (min-width: 0);
|
||||
@custom-media --breakpoint-sm-up only screen and (min-width: 576px);
|
||||
@custom-media --breakpoint-md-up only screen and (min-width: 768px);
|
||||
@custom-media --breakpoint-lg-up only screen and (min-width: 992px);
|
||||
@custom-media --breakpoint-xl-up only screen and (min-width: 1200px);
|
||||
|
||||
@custom-media --breakpoint-xs-down only screen and (max-width: 575px);
|
||||
@custom-media --breakpoint-sm-down only screen and (max-width: 767px);
|
||||
@custom-media --breakpoint-md-down only screen and (max-width: 991px);
|
||||
@custom-media --breakpoint-lg-down only screen and (max-width: 1199px);
|
||||
@custom-media --breakpoint-xl-down only screen and (min-width: 0);
|
||||
|
||||
@custom-media --breakpoint-xs-only only screen and (min-width: 0) and (max-width: 575px);
|
||||
@custom-media --breakpoint-sm-only only screen and (min-width: 576px) and (max-width: 767px);
|
||||
@custom-media --breakpoint-md-only only screen and (min-width: 768px) and (max-width: 991px);
|
||||
@custom-media --breakpoint-lg-only only screen and (min-width: 992px) and (max-width: 1199px);
|
||||
@custom-media --breakpoint-xl-only only screen and (min-width: 1200px);
|
||||
|
||||
/* Core variables */
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-sans-serif: sans-serif;
|
||||
|
||||
@@ -10,7 +10,7 @@ Special thanks to the following individuals and organizations for their contribu
|
||||
|
||||
- [Cory LaViska](https://twitter.com/claviska) – for creating this project.
|
||||
- [Adam K Olson](https://twitter.com/adamkolson) – for designing the logo with a single shoelaces.
|
||||
- [Bootstrap](https://getbootstrap.com/) – for inspiration.
|
||||
- [Bootstrap](https://getbootstrap.com/) – for inspiration and an amazing grid system.
|
||||
- [KeyCDN](https://keycdn.com/) – for providing an awesome CDN service.
|
||||
- [GitHub](https://github.com/) – for hosting this and many other open source projects.
|
||||
- [Surreal CMS](https://www.surrealcms.com/) – for sponsoring development.
|
||||
|
||||
@@ -6,43 +6,231 @@ description: Shoelace doesn’t ship with a grid system because you don’t need
|
||||
|
||||
## Grid System
|
||||
|
||||
Shoelace doesn’t ship with a grid system because [you don’t need one](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/). You should use the [CSS Grid Layout](https://gridbyexample.com/) instead.
|
||||
Shoelace features a 12-column grid system based heavily on [Bootstrap 4’s grid](https://getbootstrap.com/docs/4.0/layout/grid/). It’s flexible, easy to use, and fully responsive.
|
||||
|
||||
This website uses the CSS Grid Layout. It’s really simple!
|
||||
### Structure
|
||||
|
||||
The grid consists of containers, rows, and columns. A basic, two-column grid looks like this:
|
||||
|
||||
```html
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
...
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
...
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">1st column</div>
|
||||
<div class="col">2nd column</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
```
|
||||
|
||||
Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav `12rem` wide and the content `100% - 12rem` so it fills the rest of the space.
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">1st column</div>
|
||||
<div class="col">2nd column</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```css
|
||||
#wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem calc(100% - 12rem);
|
||||
}
|
||||
Containers can be used to wrap sections of your page. Use the `container` class to create a responsive, fixed-width container or the `container-fluid` class to create a fluid container.
|
||||
|
||||
Rows are used to group columns horizontally. Rows can only contain columns as child elements.
|
||||
|
||||
Columns are where your content will go. To create a complete row, use any combination of columns that adds up to 12 wide.
|
||||
|
||||
### Creating Columns
|
||||
|
||||
Columns are equal width by default. The grid will automatically determine the appropriate size for columns with the `col` class.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col">1</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">1</div>
|
||||
<div class="col">2</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">1</div>
|
||||
<div class="col">2</div>
|
||||
<div class="col">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```css
|
||||
@media (max-width: 60rem) {
|
||||
#wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
To set the width of column, use the `col-*` modifier with a value of 1–12. Widths are calculated based on a total of 12 possible columns. Additional columns will wrap to a new line.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-2">col-2</div>
|
||||
<div class="col-4">col-4</div>
|
||||
<div class="col-6">col-6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### For Older Browsers
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2">col-2</div>
|
||||
<div class="col-4">col-4</div>
|
||||
<div class="col-6">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Support for CSS Grid Layouts is [decent](http://caniuse.com/css-grid), but if you have an obligation to support Internet Explorer or Edge < 16, consider using the [Flexbox Grid](https://evgenyrodionov.github.io/flexboxgrid2/) in combination with Shoelace.
|
||||
You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.
|
||||
|
||||
You can use it as-is or include the source files and customize it with CSS variables in your build process.
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col-6">col-6</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
<div class="col-6">col-6</div>
|
||||
<div class="col">col</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Making Columns Responsive
|
||||
|
||||
There are five responsive tiers in Shoelace: `xs`, `sm`, `md`, `lg`, and `xl`. You can use these tiers to change the way the grid responds at various breakpoints.
|
||||
|
||||
Use the `col-{tier}-*` modifier to target a specific tier. Note that tiers are based on minimum widths, so using `col-sm-6` will target `sm`, `md`, `lg`, and `xl`. However, you can target multiple tiers on the same column as needed.
|
||||
|
||||
For example, the following columns will stack on `xs` screens, take up 50% each (6 out of 12 columns) on `sm` screens, and 75% and 25% respectively on `md`, `lg`, and `xl` screens.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-8">1st column</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">2nd column</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-8">1st column</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">2nd column</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Offsetting Columns
|
||||
|
||||
You can offset columns using `offset-*` and `offset-{tier}-*` modifiers. To reset an offset at a specific tier, use `offset-{tier}-0`.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-2">left</div>
|
||||
<div class="col-2 offset-2">center</div>
|
||||
<div class="col-2 offset-2">right</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2">left</div>
|
||||
<div class="col-2 offset-3">center</div>
|
||||
<div class="col-2 offset-3">right</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Reordering Columns
|
||||
|
||||
You can control the visual order of columns using the `order-*` and `order-{tier}-*` modifiers. Note that columns without an order modifier will not be affected.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-4">1st (no order)</div>
|
||||
<div class="col-4 order-3">2nd (shown 3rd)</div>
|
||||
<div class="col-4 order-2">3rd (shown 2nd)</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-4">1st (unordered)</div>
|
||||
<div class="col-4 order-3">2nd</div>
|
||||
<div class="col-4 order-2">3rd</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Hiding Columns
|
||||
|
||||
You can hide columns based on breakpoints using [display utilities](utilities.html#display-utilities).
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-2">always</div>
|
||||
<div class="col-2 hidden-xs">hidden-xs</div>
|
||||
<div class="col-2 hidden-sm">hidden-sm</div>
|
||||
<div class="col-2 hidden-md">hidden-md</div>
|
||||
<div class="col-2 hidden-lg">hidden-lg</div>
|
||||
<div class="col-2 hidden-xl">hidden-xl</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-2 hidden-xs">xs</div>
|
||||
<div class="col-2 hidden-sm">sm</div>
|
||||
<div class="col-2 hidden-md">md</div>
|
||||
<div class="col-2 hidden-lg">lg</div>
|
||||
<div class="col-2 hidden-xl">xl</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Removing Gutters
|
||||
|
||||
By default, columns have horizontal spacing around them to create “gutters.” You can remove this spacing by applying the `no-gutters` class to the parent row.
|
||||
|
||||
```html
|
||||
<div class="row no-gutters">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
For an edge-to-edge design, refrain from using `container` and `container-fluid`.
|
||||
|
||||
### Nesting Grids
|
||||
|
||||
Grids can be nested. Simply add a new row inside of a column.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
outer, col-8
|
||||
<div class="row">
|
||||
<div class="col-3">inner, col-3</div>
|
||||
<div class="col-9">inner, col-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="container grid-example">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
outer, col-8
|
||||
<div class="row">
|
||||
<div class="col-3">inner, col-3</div>
|
||||
<div class="col-9">inner, col-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user