BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Modify utility grid classes to be mobile first responsive

Browse Source 
Also added minor utility functions.
This commit is contained in:
Steve 2019-01-26 16:31:27 -05:00
parent 7462765a84
commit 2c617eec9c
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/barebones.css
View File

@ -134,32 +134,38 @@ html {
grid-template-columns: minmax(200px, 1fr); grid-template-columns: minmax(200px, 1fr);
} }
/* basic grids */
.grid-container.fifths {
grid-template-columns: repeat(5, 1fr);
}
.grid-container.quarters {
grid-template-columns: repeat(4, 1fr);
}
.grid-container.thirds {
grid-template-columns: repeat(3, 1fr);
}
.grid-container.halves {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.full {
grid-template-columns: 1fr;
}
/* grids to 3 columns above mobile sizes */ /* grids to 3 columns above mobile sizes */
@media (min-width: 600px) { @media (min-width: 600px) {
.grid-container { .grid-container {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
padding: 10px 0; padding: 10px 0;
} }
/* basic grids */
.grid-container.fifths {
grid-template-columns: repeat(5, 1fr);
}
.grid-container.quarters {
grid-template-columns: repeat(4, 1fr);
}
.grid-container.thirds {
grid-template-columns: repeat(3, 1fr);
}
.grid-container.halves {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.full {
grid-template-columns: 1fr;
}
} }
/* Base Styles /* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
html { html {
@ -417,6 +423,10 @@ form {
float: right; } float: right; }
.u-pull-left { .u-pull-left {
float: left; } float: left; }
.u-align-left {
text-align: left; }
.u-align-right {
text-align: right; }
/* Misc /* Misc