Skip to content

Instantly share code, notes, and snippets.

@getpavilion

getpavilion/Pavilion flexbox classes 1.0.28 and later

Created December 23, 2016 13:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save getpavilion/f855ebf4fa0ff82f71b267a9113a670c to your computer and use it in GitHub Desktop.
Save getpavilion/f855ebf4fa0ff82f71b267a9113a670c to your computer and use it in GitHub Desktop.
Download ZIP
Pavilion flexbox classes 1.0.28 and later
Raw
Pavilion flexbox classes 1.0.28 and later
/**
* Rows & Columns for the grid
*/
.row-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-right: -1.5rem;
margin-left: -1.5rem;
@media(min-width: $size-switch) {
margin-right: -1rem;
margin-left: -1rem;
}
&:before {
// content: " ";
display: table;
}
&:after {
content: " ";
display: table;
clear: both;
}
.col {
position: relative;
display: block;
flex: 1;
padding-right: 1.5rem;
padding-left: 1.5rem;
@media(min-width: $size-switch) {
padding-right: 1rem;
padding-left: 1rem;
}
}
.col-pp-10,
.col-pp-20,
.col-pp-25,
.col-pp-30,
.col-pp-33,
.col-pp-40,
.col-pp-50,
.col-pp-60,
.col-pp-70,
.col-pp-66,
.col-pp-75,
.col-pp-80,
.col-pp-90,
.col-pp-100,
.col-pl-10,
.col-pl-20,
.col-pl-25,
.col-pl-30,
.col-pl-33,
.col-pl-40,
.col-pl-50,
.col-pl-60,
.col-pl-66,
.col-pl-70,
.col-pl-75,
.col-pl-80,
.col-pl-90,
.col-pl-100,
.col-tp-10,
.col-tp-20,
.col-tp-25,
.col-tp-30,
.col-tp-33,
.col-tp-40,
.col-tp-50,
.col-tp-60,
.col-tp-66,
.col-tp-70,
.col-tp-75,
.col-tp-80,
.col-tp-90,
.col-tp-100,
.col-tl-10,
.col-tl-20,
.col-tl-25,
.col-tl-30,
.col-tl-33,
.col-tl-40,
.col-tl-50,
.col-tl-60,
.col-tl-66,
.col-tl-70,
.col-tl-75,
.col-tl-80,
.col-tl-90,
.col-tl-100,
.col-dt-10,
.col-dt-20,
.col-dt-25,
.col-dt-30,
.col-dt-33,
.col-dt-40,
.col-dt-50,
.col-dt-60,
.col-dt-66,
.col-dt-70,
.col-dt-75,
.col-dt-80,
.col-dt-90,
.col-dt-100 {
position: relative;
flex: 0 0 100%;
max-width: 100%;
padding-right: 1.5rem;
padding-left: 1.5rem;
@media(min-width: $size-switch) {
padding-right: 1rem;
padding-left: 1rem;
}
}
.col-pp-10 {
flex: 0 0 10%;
max-width: 10%;
}
.col-pp-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-pp-25 {
flex: 0 0 25%;
max-width: 25%;
}
.col-pp-30 {
flex: 0 0 30%;
max-width: 30%;
}
.col-pp-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-pp-40 {
flex: 0 0 40%;
max-width: 40%;
}
.col-pp-50 {
flex: 0 0 50%;
max-width: 50%;
}
.col-pp-60 {
flex: 0 0 60%;
max-width: 60%;
}
.col-pp-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-pp-70 {
flex: 0 0 70%;
max-width: 70%;
}
.col-pp-75 {
flex: 0 0 75%;
max-width: 75%;
}
.col-pp-80 {
flex: 0 0 80%;
max-width: 80%;
}
.col-pp-90 {
flex: 0 0 90%;
max-width: 90%;
}
.col-pp-100 {
flex: 0 0 100%;
max-width: 100%;
}
@media(min-width: $phone-landscape-size) {
.col-pl-10 {
flex: 0 0 10%;
max-width: 10%;
}
.col-pl-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-pl-25 {
flex: 0 0 25%;
max-width: 25%;
}
.col-pl-30 {
flex: 0 0 30%;
max-width: 30%;
}
.col-pl-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-pl-40 {
flex: 0 0 40%;
max-width: 40%;
}
.col-pl-50 {
flex: 0 0 50%;
max-width: 50%;
}
.col-pl-60 {
flex: 0 0 60%;
max-width: 60%;
}
.col-pl-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-pl-70 {
flex: 0 0 70%;
max-width: 70%;
}
.col-pl-75 {
flex: 0 0 75%;
max-width: 75%;
}
.col-pl-80 {
flex: 0 0 80%;
max-width: 80%;
}
.col-pl-90 {
flex: 0 0 90%;
max-width: 90%;
}
.col-pl-100 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media(min-width: $tablet-portrait-size) {
.col-tp-10 {
flex: 0 0 10%;
max-width: 10%;
}
.col-tp-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-tp-25 {
flex: 0 0 25%;
max-width: 25%;
}
.col-tp-30 {
flex: 0 0 30%;
max-width: 30%;
}
.col-tp-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-tp-40 {
flex: 0 0 40%;
max-width: 40%;
}
.col-tp-50 {
flex: 0 0 50%;
max-width: 50%;
}
.col-tp-60 {
flex: 0 0 60%;
max-width: 60%;
}
.col-tp-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-tp-70 {
flex: 0 0 70%;
max-width: 70%;
}
.col-tp-75 {
flex: 0 0 75%;
max-width: 75%;
}
.col-tp-80 {
flex: 0 0 80%;
max-width: 80%;
}
.col-tp-90 {
flex: 0 0 90%;
max-width: 90%;
}
.col-tp-100 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media(min-width: $tablet-landscape-size) {
.col-tl-10 {
flex: 0 0 10%;
max-width: 10%;
}
.col-tl-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-tl-25 {
flex: 0 0 25%;
max-width: 25%;
}
.col-tl-30 {
flex: 0 0 30%;
max-width: 30%;
}
.col-tl-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-tl-40 {
flex: 0 0 40%;
max-width: 40%;
}
.col-tl-50 {
flex: 0 0 50%;
max-width: 50%;
}
.col-tl-60 {
flex: 0 0 60%;
max-width: 60%;
}
.col-tl-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-tl-70 {
flex: 0 0 70%;
max-width: 70%;
}
.col-tl-75 {
flex: 0 0 75%;
max-width: 75%;
}
.col-tl-80 {
flex: 0 0 80%;
max-width: 80%;
}
.col-tl-90 {
flex: 0 0 90%;
max-width: 90%;
}
.col-tl-100 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media(min-width: $desktop-size) {
.col-dt-10 {
flex: 0 0 10%;
max-width: 10%;
}
.col-dt-20 {
flex: 0 0 20%;
max-width: 20%;
}
.col-dt-25 {
flex: 0 0 25%;
max-width: 25%;
}
.col-dt-30 {
flex: 0 0 30%;
max-width: 30%;
}
.col-dt-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-dt-40 {
flex: 0 0 40%;
max-width: 40%;
}
.col-dt-50 {
flex: 0 0 50%;
max-width: 50%;
}
.col-dt-60 {
flex: 0 0 60%;
max-width: 60%;
}
.col-dt-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-dt-70 {
flex: 0 0 70%;
max-width: 70%;
}
.col-dt-75 {
flex: 0 0 75%;
max-width: 75%;
}
.col-dt-80 {
flex: 0 0 80%;
max-width: 80%;
}
.col-dt-90 {
flex: 0 0 90%;
max-width: 90%;
}
.col-dt-100 {
flex: 0 0 100%;
max-width: 100%;
}
}
}
/**
* Flexbox main class
*/
.display-flex {
display: flex;
}
.display-inline-flex {
display: inline-flex;
}
/**
* Flex Parent Configuration
*/
// flex direction
.flex-direction-row {
flex-direction: row; // default in pavilion
}
.flex-direction-row-reverse {
flex-direction: row-reverse;
}
.flex-direction-column {
flex-direction: column;
}
.flex-direction-column-reverse {
flex-direction: column-reverse;
}
// flex wrap
.flex-wrap {
flex-wrap: wrap; // default in pavilion
}
.flex-no-wrap {
flex-wrap: nowrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
// justify content
.items-left, // 1.0.27 class
.flex-justify-content-start {
justify-content: flex-start;
}
.items-right, // 1.0.27 class
.flex-justify-content-end {
justify-content: flex-end;
}
.items-center-h, // 1.0.27 class
.flex-justify-content-center {
justify-content: center;
}
.items-spaced-between, // 1.0.27 class
.flex-justify-content-between {
justify-content: space-between;
}
.items-spaced-around, // 1.0.27 class
.flex-justify-content-around {
justify-content: space-around;
}
// align items
.items-top, // 1.0.27 class
.flex-align-items-start {
align-items: flex-start;
}
.items-bottom, // 1.0.27 class
.flex-align-items-end {
align-items: flex-end;
}
.items-center-v, // 1.0.27 class
.flex-align-items-center {
align-items: center;
}
.items-baseline, // 1.0.27 class
.flex-align-items-baseline {
align-items: baseline;
}
.flex-align-items-stretch {
align-items: stretch;
}
// align content
.flex-align-content-start {
align-content: flex-start;
}
.flex-align-content-end {
align-content: flex-end;
}
.flex-align-content-center {
align-content: center;
}
.flex-align-content-between {
align-content: space-between;
}
.flex-align-content-around {
align-content: space-around;
}
.flex-align-content-stretch {
align-content: stretch;
}
/**
* Flex Children Configuration
* flex-order, flex-grow, flex-shrink, flex-basis are not included.
*/
.flex-align-self-auto {
align-self: auto;
}
.item-top, // 1.0.27 class
.flex-align-self-start {
align-self: flex-start;
}
.item-bottom, // 1.0.27 class
.flex-align-self-end {
align-self: flex-end;
}
.item-center-v, // 1.0.27 class
.flex-align-self-center {
align-self: center;
}
.item-baseline, // 1.0.27 class
.flex-align-self-baseline {
align-self: baseline;
}
.flex-align-self-stretch {
align-self: stretch;
}
.item-first { // 1.0.27 class
order: -1;
}
.item-last { // 1.0.27 class
order: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment