mirror of
https://github.com/picocss/pico.git
synced 2025-05-04 22:57:12 -04:00
pico-flexgrid
This commit is contained in:
Jieiku
parent
04b35d3d0e
commit
4cc9d70d53
6 changed files with 1735 additions and 0 deletions
1490
css/pico.classless.slim.flexgrid.css
Normal file
1490
css/pico.classless.slim.flexgrid.css
Normal file
File diff suppressed because it is too large
Load diff
1
css/pico.classless.slim.flexgrid.css.map
Normal file
1
css/pico.classless.slim.flexgrid.css.map
Normal file
File diff suppressed because one or more lines are too long
8
css/pico.classless.slim.flexgrid.min.css
vendored
Normal file
8
css/pico.classless.slim.flexgrid.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/pico.classless.slim.flexgrid.min.css.map
Normal file
1
css/pico.classless.slim.flexgrid.min.css.map
Normal file
File diff suppressed because one or more lines are too long
169
scss/layout/_flexgrid.scss
Normal file
169
scss/layout/_flexgrid.scss
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
// Grid | milligram.io | MIT License
|
||||||
|
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||||
|
|
||||||
|
// .container is main centered wrapper with a max width of 112.0rem (1120px)
|
||||||
|
.container {
|
||||||
|
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 .column within a .row will evenly take up
|
||||||
|
// available width, and the height of each .column with take
|
||||||
|
// up the height of the tallest .column in the same .row
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&.row-no-padding {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
& > .column {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
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
|
||||||
|
&.column-offset-10 {
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
&.column-offset-20 {
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
&.column-offset-25 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
&.column-offset-33,
|
||||||
|
&.column-offset-34 {
|
||||||
|
margin-left: 33.3333%;
|
||||||
|
}
|
||||||
|
&.column-offset-40 {
|
||||||
|
margin-left: 40%;
|
||||||
|
}
|
||||||
|
&.column-offset-50 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
&.column-offset-60 {
|
||||||
|
margin-left: 60%;
|
||||||
|
}
|
||||||
|
&.column-offset-66,
|
||||||
|
&.column-offset-67 {
|
||||||
|
margin-left: 66.6666%;
|
||||||
|
}
|
||||||
|
&.column-offset-75 {
|
||||||
|
margin-left: 75%;
|
||||||
|
}
|
||||||
|
&.column-offset-80 {
|
||||||
|
margin-left: 80%;
|
||||||
|
}
|
||||||
|
&.column-offset-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
|
||||||
|
&.column-10 {
|
||||||
|
flex: 0 0 10%;
|
||||||
|
max-width: 10%;
|
||||||
|
}
|
||||||
|
&.column-20 {
|
||||||
|
flex: 0 0 20%;
|
||||||
|
max-width: 20%;
|
||||||
|
}
|
||||||
|
&.column-25 {
|
||||||
|
flex: 0 0 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
&.column-33,
|
||||||
|
&.column-34 {
|
||||||
|
flex: 0 0 33.3333%;
|
||||||
|
max-width: 33.3333%;
|
||||||
|
}
|
||||||
|
&.column-40 {
|
||||||
|
flex: 0 0 40%;
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
&.column-50 {
|
||||||
|
flex: 0 0 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
&.column-60 {
|
||||||
|
flex: 0 0 60%;
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
&.column-66,
|
||||||
|
&.column-67 {
|
||||||
|
flex: 0 0 66.6666%;
|
||||||
|
max-width: 66.6666%;
|
||||||
|
}
|
||||||
|
&.column-75 {
|
||||||
|
flex: 0 0 75%;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
&.column-80 {
|
||||||
|
flex: 0 0 80%;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
&.column-90 {
|
||||||
|
flex: 0 0 90%;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
// .column-* vertically aligns an individual .column
|
||||||
|
.column-top {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
.column-bottom {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.column-center {
|
||||||
|
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;
|
||||||
|
|
||||||
|
.column {
|
||||||
|
margin-bottom: inherit;
|
||||||
|
padding: 0 1.0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
66
scss/pico.classless.slim.flexgrid.scss
Normal file
66
scss/pico.classless.slim.flexgrid.scss
Normal 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"; // .grid responsive flexbox
|
||||||
|
@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
|
||||||
Loading…
Add table
Add a link
Reference in a new issue