mmoser/wordpress-grunt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
Mark Moser
2018-04-24 20:41:34 -05:00
commit 0348bb3c42
43 changed files with 5169 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dev/scss/generic/_container.scss Normal file
View File

@ -0,0 +1,32 @@
.container {
display: grid;
grid-template-columns: 1fr 10fr 1fr;
> * { grid-column: 2 / -2; }
> .full-bleed { grid-column: 1 / -1; }
}
@media screen and (min-width: #{$screen-tablet}) {
.container {
grid-template-columns: 1fr $container-tablet 1fr;
}
}
@media screen and (min-width: #{$screen-tablet-lg}) {
.container {
grid-template-columns: 1fr $container-tablet-lg 1fr;
}
}
@media screen and (min-width: #{$screen-desktop}) {
.container {
grid-template-columns: 1fr $container-desktop 1fr;
}
}
@media screen and (min-width: #{$screen-desktop-lg}) {
.container {
grid-template-columns: 1fr $container-desktop-lg 1fr;
}
}

170
dev/scss/generic/_grid.scss Normal file
View File

@ -0,0 +1,170 @@
.grid {
display: grid;
grid-template-columns: 1fr;
&.grid-gutter { grid-gap: $gutter; }
&.grid-gutter-lg { grid-gap: $gutter * 2; }
&.grid-start { align-items: start; }
&.grid-center { align-items: center; }
&.grid-end { align-items: end; }
&.col-100 { grid-template-columns: 1fr; }
&.col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.col-33 { grid-template-columns: 1fr 1fr 1fr; }
&.col-50 { grid-template-columns: 1fr 1fr; }
&.col-70-30 { grid-template-columns: 2fr 1fr; }
&.col-30-70 { grid-template-columns: 1fr 2fr; }
&.col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
&.col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
&.col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
&.col-25-75 { grid-template-columns: 1fr 3fr; }
&.col-75-25 { grid-template-columns: 3fr 1fr; }
}
//////////////////////////
// desktop first classes
//////////////////////////
@media screen and (max-width: #{$screen-desktop-lg - 1}) {
.grid {
&.col-100-lg { grid-template-columns: 1fr; }
&.col-20-lg { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.col-25-lg { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.col-33-lg { grid-template-columns: 1fr 1fr 1fr; }
&.col-50-lg { grid-template-columns: 1fr 1fr; }
&.col-70-30-lg { grid-template-columns: 2fr 1fr; }
&.col-30-70-lg { grid-template-columns: 1fr 2fr; }
&.col-50-25-25-lg { grid-template-columns: 2fr 1fr 1fr; }
&.col-25-50-25-lg { grid-template-columns: 1fr 2fr 1fr; }
&.col-25-25-50-lg { grid-template-columns: 1fr 1fr 2fr; }
&.col-25-75-lg { grid-template-columns: 1fr 3fr; }
&.col-75-25-lg { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (max-width: #{$screen-desktop - 1}) {
.grid {
&.col-100-md { grid-template-columns: 1fr; }
&.col-20-md { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.col-25-md { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.col-33-md { grid-template-columns: 1fr 1fr 1fr; }
&.col-50-md { grid-template-columns: 1fr 1fr; }
&.col-70-30-md { grid-template-columns: 2fr 1fr; }
&.col-30-70-md { grid-template-columns: 1fr 2fr; }
&.col-50-25-25-md { grid-template-columns: 2fr 1fr 1fr; }
&.col-25-50-25-md { grid-template-columns: 1fr 2fr 1fr; }
&.col-25-25-50-md { grid-template-columns: 1fr 1fr 2fr; }
&.col-25-75-md { grid-template-columns: 1fr 3fr; }
&.col-75-25-md { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (max-width: #{$screen-tablet-lg - 1}) {
.grid {
&.col-100-sm { grid-template-columns: 1fr; }
&.col-20-sm { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.col-25-sm { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.col-33-sm { grid-template-columns: 1fr 1fr 1fr; }
&.col-50-sm { grid-template-columns: 1fr 1fr; }
&.col-70-30-sm { grid-template-columns: 2fr 1fr; }
&.col-30-70-sm { grid-template-columns: 1fr 2fr; }
&.col-50-25-25-sm { grid-template-columns: 2fr 1fr 1fr; }
&.col-25-50-25-sm { grid-template-columns: 1fr 2fr 1fr; }
&.col-25-25-50-sm { grid-template-columns: 1fr 1fr 2fr; }
&.col-25-75-sm { grid-template-columns: 1fr 3fr; }
&.col-75-25-sm { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (max-width: #{$screen-tablet - 1}) {
.grid {
&.col-100-xs { grid-template-columns: 1fr; }
&.col-20-xs { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.col-25-xs { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.col-33-xs { grid-template-columns: 1fr 1fr 1fr; }
&.col-50-xs { grid-template-columns: 1fr 1fr; }
&.col-70-30-xs { grid-template-columns: 2fr 1fr; }
&.col-30-70-xs { grid-template-columns: 1fr 2fr; }
&.col-50-25-25-xs { grid-template-columns: 2fr 1fr 1fr; }
&.col-25-50-25-xs { grid-template-columns: 1fr 2fr 1fr; }
&.col-25-25-50-xs { grid-template-columns: 1fr 1fr 2fr; }
&.col-25-75-xs { grid-template-columns: 1fr 3fr; }
&.col-75-25-xs { grid-template-columns: 3fr 1fr; }
}
}
//////////////////////////
// mobile first classes
//////////////////////////
@media screen and (min-width: #{$screen-tablet}) {
.grid {
&.sm-col-100 { grid-template-columns: 1fr; }
&.sm-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.sm-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.sm-col-33 { grid-template-columns: 1fr 1fr 1fr; }
&.sm-col-50 { grid-template-columns: 1fr 1fr; }
&.sm-col-70-30 { grid-template-columns: 2fr 1fr; }
&.sm-col-30-70 { grid-template-columns: 1fr 2fr; }
&.sm-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
&.sm-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
&.sm-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
&.sm-col-25-75 { grid-template-columns: 1fr 3fr; }
&.sm-col-75-25 { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (min-width: #{$screen-tablet-lg}) {
.grid {
&.md-col-100 { grid-template-columns: 1fr; }
&.md-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.md-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.md-col-33 { grid-template-columns: 1fr 1fr 1fr; }
&.md-col-50 { grid-template-columns: 1fr 1fr; }
&.md-col-70-30 { grid-template-columns: 2fr 1fr; }
&.md-col-30-70 { grid-template-columns: 1fr 2fr; }
&.md-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
&.md-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
&.md-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
&.md-col-25-75 { grid-template-columns: 1fr 3fr; }
&.md-col-75-25 { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (min-width: #{$screen-desktop}) {
.grid {
&.lg-col-100 { grid-template-columns: 1fr; }
&.lg-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.lg-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.lg-col-33 { grid-template-columns: 1fr 1fr 1fr; }
&.lg-col-50 { grid-template-columns: 1fr 1fr; }
&.lg-col-70-30 { grid-template-columns: 2fr 1fr; }
&.lg-col-30-70 { grid-template-columns: 1fr 2fr; }
&.lg-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
&.lg-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
&.lg-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
&.lg-col-25-75 { grid-template-columns: 1fr 3fr; }
&.lg-col-75-25 { grid-template-columns: 3fr 1fr; }
}
}
@media screen and (min-width: #{$screen-desktop-lg}) {
.grid {
&.xl-col-100 { grid-template-columns: 1fr; }
&.xl-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
&.xl-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
&.xl-col-33 { grid-template-columns: 1fr 1fr 1fr; }
&.xl-col-50 { grid-template-columns: 1fr 1fr; }
&.xl-col-70-30 { grid-template-columns: 2fr 1fr; }
&.xl-col-30-70 { grid-template-columns: 1fr 2fr; }
&.xl-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
&.xl-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
&.xl-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
&.xl-col-25-75 { grid-template-columns: 1fr 3fr; }
&.xl-col-75-25 { grid-template-columns: 3fr 1fr; }
}
}

14
dev/scss/generic/_reset.scss Normal file
View File

@ -0,0 +1,14 @@
html {
margin: 0;
padding: 0;
width: 100vw;
font-size: 16px;
overflow-x: hidden;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}

59
dev/scss/generic/_typography.scss Normal file
View File

@ -0,0 +1,59 @@
body {
font-family: $helvetica;
font-size: 1em;
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
font-weight: 700;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.375rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 {
font-size: 1em;
font-weight: 400;
}
p {
line-height: 1.6;
}
article,
section {
font-size: 1.125em;
li { line-height: 1.6; }
}
.copy-small {
font-size: 0.875em;
}
.copy-italic {
letter-spacing: 0.03em;
font-style: italic;
}
.strong {
font-weight: 700;
}
@media screen and (min-width: $screen-tablet-lg) {
h1 { font-size: 3.4375rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; }
}