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
4cc9d70d53
commit
8ce5885453
5 changed files with 70 additions and 74 deletions
|
|
@ -508,14 +508,14 @@ section {
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: col;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.row.row-no-padding {
|
.row.row-no-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.row.row-no-padding > .column {
|
.row.row-no-padding > .col {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.row.row-wrap {
|
.row.row-wrap {
|
||||||
|
|
@ -536,97 +536,97 @@ section {
|
||||||
.row.row-baseline {
|
.row.row-baseline {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
.row .column {
|
.row .col {
|
||||||
display: block;
|
display: block;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-10 {
|
.row .col.col-offset-10 {
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-20 {
|
.row .col.col-offset-20 {
|
||||||
margin-left: 20%;
|
margin-left: 20%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-25 {
|
.row .col.col-offset-25 {
|
||||||
margin-left: 25%;
|
margin-left: 25%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-33, .row .column.column-offset-34 {
|
.row .col.col-offset-33 {
|
||||||
margin-left: 33.3333%;
|
margin-left: 33.3333%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-40 {
|
.row .col.col-offset-40 {
|
||||||
margin-left: 40%;
|
margin-left: 40%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-50 {
|
.row .col.col-offset-50 {
|
||||||
margin-left: 50%;
|
margin-left: 50%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-60 {
|
.row .col.col-offset-60 {
|
||||||
margin-left: 60%;
|
margin-left: 60%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-66, .row .column.column-offset-67 {
|
.row .col.col-offset-66 {
|
||||||
margin-left: 66.6666%;
|
margin-left: 66.6666%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-75 {
|
.row .col.col-offset-75 {
|
||||||
margin-left: 75%;
|
margin-left: 75%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-80 {
|
.row .col.col-offset-80 {
|
||||||
margin-left: 80%;
|
margin-left: 80%;
|
||||||
}
|
}
|
||||||
.row .column.column-offset-90 {
|
.row .col.col-offset-90 {
|
||||||
margin-left: 90%;
|
margin-left: 90%;
|
||||||
}
|
}
|
||||||
.row .column.column-10 {
|
.row .col.col-10 {
|
||||||
flex: 0 0 10%;
|
flex: 0 0 10%;
|
||||||
max-width: 10%;
|
max-width: 10%;
|
||||||
}
|
}
|
||||||
.row .column.column-20 {
|
.row .col.col-20 {
|
||||||
flex: 0 0 20%;
|
flex: 0 0 20%;
|
||||||
max-width: 20%;
|
max-width: 20%;
|
||||||
}
|
}
|
||||||
.row .column.column-25 {
|
.row .col.col-25 {
|
||||||
flex: 0 0 25%;
|
flex: 0 0 25%;
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
}
|
}
|
||||||
.row .column.column-33, .row .column.column-34 {
|
.row .col.col-33 {
|
||||||
flex: 0 0 33.3333%;
|
flex: 0 0 33.3333%;
|
||||||
max-width: 33.3333%;
|
max-width: 33.3333%;
|
||||||
}
|
}
|
||||||
.row .column.column-40 {
|
.row .col.col-40 {
|
||||||
flex: 0 0 40%;
|
flex: 0 0 40%;
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
.row .column.column-50 {
|
.row .col.col-50 {
|
||||||
flex: 0 0 50%;
|
flex: 0 0 50%;
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
.row .column.column-60 {
|
.row .col.col-60 {
|
||||||
flex: 0 0 60%;
|
flex: 0 0 60%;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
}
|
}
|
||||||
.row .column.column-66, .row .column.column-67 {
|
.row .col.col-66 {
|
||||||
flex: 0 0 66.6666%;
|
flex: 0 0 66.6666%;
|
||||||
max-width: 66.6666%;
|
max-width: 66.6666%;
|
||||||
}
|
}
|
||||||
.row .column.column-75 {
|
.row .col.col-75 {
|
||||||
flex: 0 0 75%;
|
flex: 0 0 75%;
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
}
|
}
|
||||||
.row .column.column-80 {
|
.row .col.col-80 {
|
||||||
flex: 0 0 80%;
|
flex: 0 0 80%;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
.row .column.column-90 {
|
.row .col.col-90 {
|
||||||
flex: 0 0 90%;
|
flex: 0 0 90%;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
.row .column .column-top {
|
.row .col .col-top {
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
.row .column .column-bottom {
|
.row .col .col-bottom {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
.row .column .column-center {
|
.row .col .col-center {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -636,7 +636,7 @@ section {
|
||||||
width: calc(100% + 2rem);
|
width: calc(100% + 2rem);
|
||||||
margin-left: -1rem;
|
margin-left: -1rem;
|
||||||
}
|
}
|
||||||
.row .column {
|
.row .col {
|
||||||
margin-bottom: inherit;
|
margin-bottom: inherit;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
2
css/pico.classless.slim.flexgrid.min.css
vendored
2
css/pico.classless.slim.flexgrid.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,26 +11,26 @@
|
||||||
}
|
}
|
||||||
// Using flexbox for the grid, inspired by Philip Walton:
|
// Using flexbox for the grid, inspired by Philip Walton:
|
||||||
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||||||
// By default each .column within a .row will evenly take up
|
// By default each .col within a .row will evenly take up
|
||||||
// available width, and the height of each .column with take
|
// available width, and the height of each .col with take
|
||||||
// up the height of the tallest .column in the same .row
|
// up the height of the tallest .col in the same .row
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: col;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&.row-no-padding {
|
&.row-no-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
& > .column {
|
& > .col {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.row-wrap {
|
&.row-wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
// Vertically Align Columns
|
// Vertically Align cols
|
||||||
// .row-* vertically aligns every .col in the .row
|
// .row-* vertically aligns every .col in the .row
|
||||||
&.row-top {
|
&.row-top {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
&.row-baseline {
|
&.row-baseline {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
.column {
|
.col {
|
||||||
display: block;
|
display: block;
|
||||||
// IE 11 required specifying the flex-basis otherwise it breaks mobile
|
// IE 11 required specifying the flex-basis otherwise it breaks mobile
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|
@ -55,100 +55,96 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
// Column Offsets
|
// col Offsets
|
||||||
&.column-offset-10 {
|
&.col-offset-10 {
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
}
|
}
|
||||||
&.column-offset-20 {
|
&.col-offset-20 {
|
||||||
margin-left: 20%;
|
margin-left: 20%;
|
||||||
}
|
}
|
||||||
&.column-offset-25 {
|
&.col-offset-25 {
|
||||||
margin-left: 25%;
|
margin-left: 25%;
|
||||||
}
|
}
|
||||||
&.column-offset-33,
|
&.col-offset-33 {
|
||||||
&.column-offset-34 {
|
|
||||||
margin-left: 33.3333%;
|
margin-left: 33.3333%;
|
||||||
}
|
}
|
||||||
&.column-offset-40 {
|
&.col-offset-40 {
|
||||||
margin-left: 40%;
|
margin-left: 40%;
|
||||||
}
|
}
|
||||||
&.column-offset-50 {
|
&.col-offset-50 {
|
||||||
margin-left: 50%;
|
margin-left: 50%;
|
||||||
}
|
}
|
||||||
&.column-offset-60 {
|
&.col-offset-60 {
|
||||||
margin-left: 60%;
|
margin-left: 60%;
|
||||||
}
|
}
|
||||||
&.column-offset-66,
|
&.col-offset-66 {
|
||||||
&.column-offset-67 {
|
|
||||||
margin-left: 66.6666%;
|
margin-left: 66.6666%;
|
||||||
}
|
}
|
||||||
&.column-offset-75 {
|
&.col-offset-75 {
|
||||||
margin-left: 75%;
|
margin-left: 75%;
|
||||||
}
|
}
|
||||||
&.column-offset-80 {
|
&.col-offset-80 {
|
||||||
margin-left: 80%;
|
margin-left: 80%;
|
||||||
}
|
}
|
||||||
&.column-offset-90 {
|
&.col-offset-90 {
|
||||||
margin-left: 90%;
|
margin-left: 90%;
|
||||||
}
|
}
|
||||||
// Explicit Column Percent Sizes
|
// Explicit col Percent Sizes
|
||||||
// By default each grid column will evenly distribute
|
// By default each grid col will evenly distribute
|
||||||
// across the grid. However, you can specify individual
|
// across the grid. However, you can specify individual
|
||||||
// columns to take up a certain size of the available area
|
// cols to take up a certain size of the available area
|
||||||
&.column-10 {
|
&.col-10 {
|
||||||
flex: 0 0 10%;
|
flex: 0 0 10%;
|
||||||
max-width: 10%;
|
max-width: 10%;
|
||||||
}
|
}
|
||||||
&.column-20 {
|
&.col-20 {
|
||||||
flex: 0 0 20%;
|
flex: 0 0 20%;
|
||||||
max-width: 20%;
|
max-width: 20%;
|
||||||
}
|
}
|
||||||
&.column-25 {
|
&.col-25 {
|
||||||
flex: 0 0 25%;
|
flex: 0 0 25%;
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
}
|
}
|
||||||
&.column-33,
|
&.col-33 {
|
||||||
&.column-34 {
|
|
||||||
flex: 0 0 33.3333%;
|
flex: 0 0 33.3333%;
|
||||||
max-width: 33.3333%;
|
max-width: 33.3333%;
|
||||||
}
|
}
|
||||||
&.column-40 {
|
&.col-40 {
|
||||||
flex: 0 0 40%;
|
flex: 0 0 40%;
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
&.column-50 {
|
&.col-50 {
|
||||||
flex: 0 0 50%;
|
flex: 0 0 50%;
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
&.column-60 {
|
&.col-60 {
|
||||||
flex: 0 0 60%;
|
flex: 0 0 60%;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
}
|
}
|
||||||
&.column-66,
|
&.col-66 {
|
||||||
&.column-67 {
|
|
||||||
flex: 0 0 66.6666%;
|
flex: 0 0 66.6666%;
|
||||||
max-width: 66.6666%;
|
max-width: 66.6666%;
|
||||||
}
|
}
|
||||||
&.column-75 {
|
&.col-75 {
|
||||||
flex: 0 0 75%;
|
flex: 0 0 75%;
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
}
|
}
|
||||||
&.column-80 {
|
&.col-80 {
|
||||||
flex: 0 0 80%;
|
flex: 0 0 80%;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
&.column-90 {
|
&.col-90 {
|
||||||
flex: 0 0 90%;
|
flex: 0 0 90%;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
// .column-* vertically aligns an individual .column
|
// .col-* vertically aligns an individual .col
|
||||||
.column-top {
|
.col-top {
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
.column-bottom {
|
.col-bottom {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
.column-center {
|
.col-center {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -161,7 +157,7 @@
|
||||||
width: calc(100% + 2.0rem);
|
width: calc(100% + 2.0rem);
|
||||||
margin-left: -1.0rem;
|
margin-left: -1.0rem;
|
||||||
|
|
||||||
.column {
|
.col {
|
||||||
margin-bottom: inherit;
|
margin-bottom: inherit;
|
||||||
padding: 0 1.0rem;
|
padding: 0 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue