mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-07-01 10:22:21 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

grid system with breakpoints

Browse source
This commit is contained in:
Jieiku 2022-01-17 10:32:35 -08:00
parent 157899683e
commit e69d24c5b9
12 changed files with 3294 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

11
docs/css/pico.docs.css
View file

@ -39,6 +39,17 @@
--article-code-background-color: var(--code-background-color);
}
.flex.demo > * > * {
display: block;
padding: 0.3em 0;
background: #008000;
text-align: center;
}
.flex.demo > *:nth-child(2n) > * {
background: #00FFFF;
}
/**
* Docs: Document
*/

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

8
docs/flexgrid.html
View file

File diff suppressed because one or more lines are too long

12
docs/scss/themes/_docs.scss
View file

@ -23,3 +23,15 @@
[data-theme="dark"] {
@include dark;
}
// Display the grid with colors
.flex.demo > * > * {
display: block;
padding: .3em 0;
background: #008000;
text-align: center;
}
.flex.demo > *:nth-child(2n) > * {
background: #00FFFF;
}

32
docs/src/flexgrid.html
View file

@ -3,7 +3,7 @@
<head>
${require('./_head.html')
title="FlexGrid"
description=".flexgrid enables a responsive flexbox based minimal grid system with auto-layout columns that stack vertically as the page width is reduced."
description=".flex enables a responsive flexbox based minimal grid system with auto-layout columns that stack vertically as the page width is reduced."
canonical="flexgrid.html"
}
</head>
@ -18,33 +18,19 @@
<section id="flexgrid">
<hgroup>
<h1>FlexGrid</h1>
<h2><code>.flexgrid</code> enables a responsive flexbox based minimal grid system with auto-layout columns that stack vertically as the page width is reduced.</h2>
<h2><code>.flex</code> enables a responsive flexbox based minimal grid system with auto-layout columns that stack vertically as the page width is reduced.
The following example should be one column until the page is atleast 500 px wide then it will become two columns.</h2>
</hgroup>
<article aria-label="FlexGrid example">
<div class="flexgrid">
<div class="row">
<div class="col">
<h3>First Column</h3>
<p>The grid columns will stack vertically as the page width is reduced.</p>
<a href="#confirm" role="button">INFO</a>
</div>
<div class="col">
<h3>Second Column</h3>
<p>Each column gets equal space unless specified: class="col col-33"</p>
<a href="#confirm" role="button">INFO</a>
</div>
</div>
<div class="flex one two-500 demo">
<div><span>1</span></div>
<div><span>2</span></div>
</div>
<footer class="code">
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"flexgrid"</u>&gt;
&lt;<b>div</b> <i>class</i>=<u>"row"</u>&gt;
&lt;<b>div</b> <i>class</i>=<u>"col"</u>&gt;1&lt;/<b>div</b>&gt;
&lt;<b>div</b> <i>class</i>=<u>"col"</u>&gt;2&lt;/<b>div</b>&gt;
&lt;/<b>div</b>&gt;
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"flex one two-500"</u>&gt;
&lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer>