Last active
November 9, 2018 05:31
-
-
Save rollbackpt/aa0166e6fddd8e03eaab to your computer and use it in GitHub Desktop.
One% CSS Grid - 12 Columns Fluid CSS Grid System
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ********************************************************************************************************************* | |
One% CSS Grid - 12 Columns Fluid CSS Grid System | |
Why One% ? Let’s count ... | |
we have 12 columns (magic number divided by 2, 3, 4, 6) | |
for 12 columns we need 11 margins | |
so if we count margin 3%, then 3% * 11 margins = 33% | |
and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66% | |
in the end we have 33% + 66% = 99% aaand ??? | |
1% is still here so that's the name - One% | |
2 starting options ? Let’s count a bit more ... | |
1200px - perfectly fits 1280 screens | |
12 columns | |
margin 3% / 36px (full-width) | |
col1 5.5% / 66px (full-width) | |
1000px - perfectly fits 1024 screens | |
12 columns | |
margin 3% / 30px (full-width) | |
col1 5.5% / 55px (full-width) | |
*/ | |
/* ********************************************************************************************************************* | |
* Main container for all | |
*/ | |
.onepcssgrid-1000, .onepcssgrid-1200 { | |
margin: 0 auto; | |
padding: 0 0 0 1%; /* THAT'S THE NAME ;) */ | |
} | |
.onepcssgrid-1200 { | |
max-width: 1220px; | |
} | |
.onepcssgrid-1000 { | |
max-width: 1020px; | |
} | |
.onerow { | |
clear: both; | |
padding: 0 10px; | |
} | |
/* ********************************************************************************************************************* | |
* Common columns definitions | |
*/ | |
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { | |
float: left; | |
margin: 0 3% 0 0; | |
} | |
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 { | |
margin: 0; | |
} | |
.col1 { width: 5.5%; } | |
.col2 { width: 14%; } | |
.col3 { width: 22.5%; } | |
.col4 { width: 31%; } | |
.col5 { width: 39.5%; } | |
.col6 { width: 48%; } | |
.col7 { width: 56.5%; } | |
.col8 { width: 65%; } | |
.col9 { width: 73.5%; } | |
.col10 { width: 82%; } | |
.col11 { width: 90.5%; } | |
.col12 { width: 99%; margin: 0; } | |
.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img { | |
width: 100%; | |
height: auto; | |
display: block; | |
} | |
/* ********************************************************************************************************************* | |
* Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math | |
*/ | |
@media all and (min-width: 1024px) { | |
.onepcssgrid-1000 { | |
max-width: 1000px; | |
} | |
.onepcssgrid-1000 .onerow { | |
padding: 0; | |
} | |
} | |
/* ********************************************************************************************************************* | |
* Small devices | |
*/ | |
@media all and (max-width: 768px) { | |
.onerow { | |
} | |
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 { | |
float: none; | |
width: 99%; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- content to be placed inside <body>…</body> --> | |
<div class="onepcssgrid-1000"> | |
<div class="onerow" style="height: 160px;"> | |
<div class="col3"> | |
<div style="background: #cecece; height: 150px;">Column 3</div> | |
</div> | |
<div class="col3"> | |
<div style="background: #cecece; height: 150px;">Column 3</div> | |
</div> | |
<div class="col3"> | |
<div style="background: #cecece; height: 150px;">Column 3</div> | |
</div> | |
<div class="col3 last"> | |
<div style="background: #cecece; height: 150px;">Column 3</div> | |
</div> | |
</div> | |
</br> | |
<div class="onerow"> | |
<div class="col3"> <div style="background: #cecece; height: 150px;">Column 3</div> </div> <div class="col3"> <div style="background: #cecece; height: 150px;"">Column 3</div> </div> <div class="col3"> <div style="background: #cecece;">Column 3</div> </div> <div class="col3 last"> <div style="background: #cecece;">Column 3<div> </div> </div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
The dabblet.html has some problems while running. please find attached fixed.