mirror of
https://github.com/picocss/pico.git
synced 2025-05-05 07:07:11 -04:00
pico-flexgrid
This commit is contained in:
Jieiku
parent
04b35d3d0e
commit
4cc9d70d53
6 changed files with 1735 additions and 0 deletions
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