8ad9b471d5
- CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
105 lines
3.3 KiB
CSS
105 lines
3.3 KiB
CSS
/* include this file if you want to duplicate all classes available
|
||
* the original skeleton boilerplate.
|
||
*
|
||
* Note: if you are creating a new site, this file is not needed
|
||
* and simpler CSS Grid elements should be used without all the
|
||
* additional classes on HTML elements. See the Readme for examples.
|
||
*/
|
||
|
||
|
||
/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
/* Directives to replicate all skeleton.css functionality */
|
||
/* .row becomes a grid container with 12 columns */
|
||
.container, .row {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.row {
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 4%;
|
||
}
|
||
|
||
.column,
|
||
.columns {
|
||
width: 100%;
|
||
float: left;
|
||
box-sizing: border-box; }
|
||
|
||
/* For devices larger than 400px */
|
||
@media (min-width: 400px) {
|
||
.container {
|
||
width: 85%;
|
||
padding: 0; }
|
||
}
|
||
|
||
/* For devices larger than 550px */
|
||
@media (min-width: 550px) {
|
||
.container {
|
||
width: 80%;
|
||
}
|
||
.row {
|
||
width: 100%;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 4%;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.one.column, .one.columns { grid-column-end: span 1; }
|
||
.two.columns { grid-column-end: span 2; }
|
||
.three.columns { grid-column-end: span 3; }
|
||
.four.columns { grid-column-end: span 4; }
|
||
.five.columns { grid-column-end: span 5; }
|
||
.six.columns { grid-column-end: span 6; }
|
||
.seven.columns { grid-column-end: span 7; }
|
||
.eight.columns { grid-column-end: span 8; }
|
||
.nine.columns { grid-column-end: span 9; }
|
||
.ten.columns { grid-column-end: span 10; }
|
||
.eleven.columns { grid-column-end: span 11; }
|
||
.twelve.columns { grid-column-end: span 12; }
|
||
.one-third.column { grid-column-end: span 4; }
|
||
.two-thirds.column { grid-column-end: span 8; }
|
||
.one-half.column { grid-column-end: span 6; }
|
||
|
||
/* Offsets */
|
||
.offset-by-one.column,
|
||
.offset-by-one.columns { grid-column-start: 2; }
|
||
.offset-by-two.column,
|
||
.offset-by-two.columns { grid-column-start: 3; }
|
||
.offset-by-three.column,
|
||
.offset-by-three.columns { grid-column-start: 4; }
|
||
.offset-by-four.column,
|
||
.offset-by-four.columns { grid-column-start: 5; }
|
||
.offset-by-five.column,
|
||
.offset-by-five.columns { grid-column-start: 6; }
|
||
.offset-by-six.column,
|
||
.offset-by-six.columns { grid-column-start: 7; }
|
||
.offset-by-seven.column,
|
||
.offset-by-seven.columns { grid-column-start: 8; }
|
||
.offset-by-eight.column,
|
||
.offset-by-eight.columns { grid-column-start: 9; }
|
||
.offset-by-nine.column,
|
||
.offset-by-nine.columns { grid-column-start: 10; }
|
||
.offset-by-ten.column,
|
||
.offset-by-ten.columns { grid-column-start: 11; }
|
||
.offset-by-eleven.column,
|
||
.offset-by-eleven.columns { grid-column-start: 12; }
|
||
|
||
.offset-by-one-third.column,
|
||
.offset-by-one-third.columns { grid-column-start: 5;}
|
||
.offset-by-two-thirds.column,
|
||
.offset-by-two-thirds.columns { grid-column-start: 9;}
|
||
|
||
.offset-by-one-half.column,
|
||
.offset-by-one-half.columns { grid-column-start: 7;}
|
||
}
|
||
|
||
|
||
|