mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-04 14:49:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge 157899683e into fe0a9d7e72

Browse source
This commit is contained in:
Jake G 2022-01-06 05:37:13 +00:00 • committed by GitHub
commit 28a97e63e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 1836 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

1490
css/pico.classless.slim.flexgrid.css Normal file
View file

File diff suppressed because it is too large Load diff

1
css/pico.classless.slim.flexgrid.css.map Normal file
View file

File diff suppressed because one or more lines are too long

8
css/pico.classless.slim.flexgrid.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
css/pico.classless.slim.flexgrid.min.css.map Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

2
docs/buttons.html
View file

File diff suppressed because one or more lines are too long

2
docs/cards.html
View file

File diff suppressed because one or more lines are too long

2
docs/classless.html
View file

File diff suppressed because one or more lines are too long

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

2
docs/customization.html
View file

File diff suppressed because one or more lines are too long

6
docs/flexgrid.html Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/forms.html
View file

File diff suppressed because one or more lines are too long

2
docs/grid.html
View file

File diff suppressed because one or more lines are too long

2
docs/index.html
View file

File diff suppressed because one or more lines are too long

2
docs/loading.html
View file

File diff suppressed because one or more lines are too long

2
docs/modal.html
View file

File diff suppressed because one or more lines are too long

2
docs/navs.html
View file

File diff suppressed because one or more lines are too long

2
docs/progress.html
View file

File diff suppressed because one or more lines are too long

2
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scroller.html
View file

File diff suppressed because one or more lines are too long

3
docs/src/_sidebar.html
View file

@ -26,6 +26,7 @@
<ul>
<li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li>
<li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li>
<li><a href="./flexgrid.html" id="flexgrid-link" class="secondary">FlexGrid</a></li>
<li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li>
</ul>
</details>
@ -70,4 +71,4 @@
activeLink.classList.add('active');
parentAccordion.setAttribute('open', 'true');
</script>
</aside>
</aside>

76
docs/src/flexgrid.html Normal file
View file

@ -0,0 +1,76 @@
<!doctype html>
<html lang="en">
<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."
canonical="flexgrid.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="flexgrid-link"}
<div role="document">
<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>
</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>
<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;
&lt;/<b>div</b>&gt;</code></pre>
</footer>
</article>
<details>
<summary>
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
&nbsp;More about grids
</summary>
<p>As Pico focuses on native HTML elements, we kept this flexbox based grid system very minimalist.</p>
<p>A more robust grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
</details>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
<script src="js/grid.min.js"></script>
</body>
</html>

2
docs/tables.html
View file

File diff suppressed because one or more lines are too long

2
docs/themes.html
View file

File diff suppressed because one or more lines are too long

2
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

2
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2
docs/we-love-classes.html
View file

File diff suppressed because one or more lines are too long

10
package.json
View file

@ -29,22 +29,18 @@
"scripts": {
"watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js --silent",
"build": "npm-run-all scss:sorter:pico build:pico scss:sorter:docs build:docs:css build:docs:js build:docs:html --silent",
"build:docs": "npm-run-all --parallel build:docs:css build:docs:js build:docs:html --silent",
"build:docs:css": "npm-run-all css:compile:docs css:prefix:docs css:minify:docs --silent",
"build:docs:html": "npm-run-all htmlincludes:docs --silent",
"build:docs:js": "npm-run-all js:bundle:docs:commons js:bundle:docs:customization js:babel:docs:commons js:babel:docs:customization js:babel:docs:grid js:babel:docs:modal js:minify:docs:commons js:minify:docs:customization js:minify:docs:grid js:minify:docs:modal --silent",
"build:pico": "npm-run-all css:compile:pico css:prefix:pico css:minify:pico --silent",
"css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
"css:compile:pico": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
"css:minify:docs": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min docs/css/*.css !docs/css/*.min.css",
"css:minify:pico": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
"css:prefix:docs": "postcss --config css --replace docs/css/*.css !docs/css/*.min.css",
"css:prefix:pico": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css",
"htmlincludes:docs": "html-includes --src docs/src --dest docs --minify minifyJS=true --quiet",
"js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
"js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
"js:babel:docs:grid": "babel docs/js/grid.js --out-file docs/js/grid.min.js --presets=@babel/preset-env --quiet",
@ -55,10 +51,8 @@
"js:minify:docs:customization": "uglifyjs docs/js/customization.min.js --compress --mangle --output docs/js/customization.min.js",
"js:minify:docs:grid": "uglifyjs docs/js/grid.min.js --compress --mangle --output docs/js/grid.min.js",
"js:minify:docs:modal": "uglifyjs docs/js/modal.min.js --compress --mangle --output docs/js/modal.min.js",
"scss:sorter:docs": "postcss --config scss ./docs/scss/**/*.scss --replace",
"scss:sorter:pico": "postcss --config scss ./scss/**/*.scss --replace",
"prebuild:docs:html": "echo '[@picocss/pico] Create documentation pages'",
"prebuild:docs:js": "echo '[@picocss/pico] Bundle and minify documentation .js files'",
"precss:compile:docs": "echo '[@picocss/pico] Compile documentation .css file'",
@ -67,12 +61,10 @@
"precss:minify:pico": "echo '[@picocss/pico] Minify Pico .css files'",
"prescss:sorter:docs": "echo '[@picocss/pico] Order documentation .scss properties'",
"prescss:sorter:pico": "echo '[@picocss/pico] Order Pico .scss properties'",
"postbuild:docs:css": "echo '\\033[32m[@picocss/pico] Documentation .css build done\\033[0m'",
"postbuild:docs:html": "echo '\\033[32m[@picocss/pico] Documentation pages done\\033[0m'",
"postbuild:docs:js": "echo '\\033[32m[@picocss/pico] Documentation .js build done\\033[0m'",
"postbuild:pico": "echo '\\033[32m[@picocss/pico] Pico library build done\\033[0m'",
"watch:docs:html": "nodemon --watch docs/src/ --ext html --exec 'npm run build:docs:html'",
"watch:docs:js": "nodemon --watch docs/js/ --ext js --ignore *.min.js --exec 'npm run build:docs:js'",
"watch:docs:scss": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:docs:css'",
@ -100,4 +92,4 @@
"last 2 major versions",
"not dead"
]
}
}

165
scss/layout/_flexgrid.scss Normal file
View file

@ -0,0 +1,165 @@
// Grid | milligram.io | MIT License
// ––––––––––––––––––––––––––––––––––––––––––––––––––
// .flexgrid is main centered wrapper with a max width of 112.0rem (1120px)
.flexgrid {
position: relative;
width: 100%;
max-width: 112.0rem;
margin: 0 auto;
padding: 0 2.0rem;
}
// Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
// By default each .col within a .row will evenly take up
// available width, and the height of each .col with take
// up the height of the tallest .col in the same .row
.row {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
&.row-no-padding {
padding: 0;
& > .col {
padding: 0;
}
}
&.row-wrap {
flex-wrap: wrap;
}
// Vertically Align columns
// .row-* vertically aligns every .col in the .row
&.row-top {
align-items: flex-start;
}
&.row-bottom {
align-items: flex-end;
}
&.row-center {
align-items: center;
}
&.row-stretch {
align-items: stretch;
}
&.row-baseline {
align-items: baseline;
}
.col {
display: block;
// IE 11 required specifying the flex-basis otherwise it breaks mobile
flex: 1 1 auto;
width: 100%;
max-width: 100%;
margin-left: 0;
// column Offsets
&.col-os-10 {
margin-left: 10%;
}
&.col-os-20 {
margin-left: 20%;
}
&.col-os-25 {
margin-left: 25%;
}
&.col-os-33 {
margin-left: 33.3333%;
}
&.col-os-40 {
margin-left: 40%;
}
&.col-os-50 {
margin-left: 50%;
}
&.col-os-60 {
margin-left: 60%;
}
&.col-os-66 {
margin-left: 66.6666%;
}
&.col-os-75 {
margin-left: 75%;
}
&.col-os-80 {
margin-left: 80%;
}
&.col-os-90 {
margin-left: 90%;
}
// Explicit column Percent Sizes
// By default each grid column will evenly distribute
// across the grid. However, you can specify individual
// columns to take up a certain size of the available area
&.col-10 {
flex: 0 0 10%;
max-width: 10%;
}
&.col-20 {
flex: 0 0 20%;
max-width: 20%;
}
&.col-25 {
flex: 0 0 25%;
max-width: 25%;
}
&.col-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
&.col-40 {
flex: 0 0 40%;
max-width: 40%;
}
&.col-50 {
flex: 0 0 50%;
max-width: 50%;
}
&.col-60 {
flex: 0 0 60%;
max-width: 60%;
}
&.col-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
&.col-75 {
flex: 0 0 75%;
max-width: 75%;
}
&.col-80 {
flex: 0 0 80%;
max-width: 80%;
}
&.col-90 {
flex: 0 0 90%;
max-width: 90%;
}
// .col-* vertically aligns an individual .col column
.col-top {
align-self: flex-start;
}
.col-bot {
align-self: flex-end;
}
.col-cen {
align-self: center;
}
}
}
// Larger than mobile screen
// Safari desktop has a bug using `rem`, but Safari mobile works
@media (min-width: 40.0rem) {
.row {
flex-direction: row;
width: calc(100% + 2.0rem);
margin-left: -1.0rem;
.col {
margin-bottom: inherit;
padding: 0 1.0rem;
}
}
};

66
scss/pico.classless.slim.flexgrid.scss Normal file
View file

@ -0,0 +1,66 @@
/*!
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
*/
// Config
// --------------------
// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: true;
// Enable .classes
$enable-classes: false;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
$enable-responsive-spacings: false;
// Enable transitions
$enable-transitions: false;
// Enable overriding with !important
$enable-important: false;
// Pico Lib
// --------------------
// Config
@import "variables";
// Theming
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/flexgrid"; // .flexgrid, .col, .row, responsive flexbox grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/table"; // table, tr, td, ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
//@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
//@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
//@import "content/code"; // pre, code, ...
//@import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Utilities
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion
//@import "utilities/loading"; // aria-busy=true
//@import "utilities/tooltip"; // data-tooltip
// Components
@import "components/nav";
@import "components/card";
//@import "components/accordion"; // details, summary
//@import "components/modal"; // dialog
//@import "components/progress"; // progress