Last active
December 23, 2015 13:19
-
-
Save gustavokuklinski/6641280 to your computer and use it in GitHub Desktop.
Simply easy Grid System using the same brain as ScrathFramework. http://github.com/tuxlinski/ScrathFramework
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
/* | |
Debugger | |
-- Uncoment this lines for layout Debug | |
Debuging code is very important | |
*/ | |
.container, .container-rwd { outline: 1px solid #ff00ff; } | |
.row { outline: 2px solid #0000ff; } | |
.block1, .block2, .block3, .block2-2 { outline: 2px solid #ffff00; } | |
.header, .footer { outline: 2px solid #00ff00; } | |
.nav ul.menu { outline: 2px solid #006400; } | |
.nav ul.menu > li { outline: 5px solid #FF7F00; } | |
/* | |
Reset | |
-- Clear all default brower alignments | |
*/ | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
/* | |
Simply Grid system | |
-- 3 column grid system | |
*/ | |
/* ======================================================================================== */ | |
/* Basic container for non-responsive layouts */ | |
.container { | |
width: 1028px; | |
height: auto; | |
min-height: 30px; | |
margin: 0 auto; | |
position: relative; | |
} | |
/* Basic container for responsive layouts */ | |
.container-rwd { | |
width: 100%; | |
height: auto; | |
min-height: 30px; | |
margin: 0 auto; | |
position: relative; | |
} | |
/* ======================================================================================== */ | |
/* | |
ROW | |
-- A line to use blocks[*] | |
Use in Responsive and Non-Responsive | |
*/ | |
.row { | |
width: 100%; | |
height: auto; | |
min-height: 30px; | |
} | |
/* ======================================================================================== */ | |
/* | |
Block[*] | |
-- Create blocks with 3 different type of sizes | |
*/ | |
/* Responsive Blocks, using Mobile First */ | |
.container-rwd .block1, | |
.container-rwd .block2, | |
.container-rwd .block2-2, | |
.container-rwd .block3 { | |
width: 100%; | |
min-height: 30px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
/* NON-Responsive Blocks, for fixed websites */ | |
.container .block1 { | |
width: 293px; | |
min-height: 30px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.container .block2 { | |
width: 660px; | |
min-height: 30px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.container .block3 { | |
width: 1028px; | |
min-height: 30px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.container .block2-2 { | |
width: 477px; | |
min-height: 30px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
/* ======================================================================================== */ | |
/* | |
Block[*]:nth-child([*]n+[*]) | |
-- Generate spacing between Blocks[*] | |
*/ | |
.container .block1:nth-child(1n+2), | |
.container .block2-2:nth-child(1n+2), | |
.container .block2:nth-child(2n+2) { | |
margin-left: 70px; | |
} | |
/* | |
Begin a new Block for nesting | |
-- MUST use when you begin a new block to reset the spacing between blocks! | |
*/ | |
.container .begin { | |
margin-left: 0 !important; | |
} | |
/* ======================================================================================== */ | |
/* Media Queries for Responsive Web Design */ | |
@media(min-width: 48em) { | |
/* | |
Only one Break-point was needed for this grid system. | |
*/ | |
.container-rwd .block1 { | |
width: 29.666666%; | |
} | |
.container-rwd .block2 { | |
width: 64.788888%; | |
} | |
.container-rwd .block2-2 { | |
width: 47.222222%; | |
} | |
.container-rwd .block3 { | |
width: 100%; | |
} | |
/* Spacing between blocks */ | |
.container-rwd .block1:nth-child(1n+2), | |
.container-rwd .block2-2:nth-child(1n+2), | |
.container-rwd .block2:nth-child(2n+2) { | |
margin-left: 5.12233%; | |
} | |
} | |
/* ======================================================================================== */ | |
/* | |
TRICK !!! | |
Little hack to work perfect on any device :) | |
*/ | |
@media(max-width: 65.938em) and (min-width: 48em) { | |
.container-rwd .block1:nth-child(1n+2), | |
.container-rwd .block2-2:nth-child(1n+2), | |
.container-rwd .block2:nth-child(2n+2) { | |
margin-left: 4.88888%; | |
} | |
} | |
/* ======================================================================================== */ | |
/* | |
Base CSS System | |
-- Basic CSS system for default base html alignments | |
*/ | |
/* | |
Font Smoothing | |
-- Only works on recent web browsers who uses WebKit enginee. | |
Theres a fallback hack with text-shadow | |
*/ | |
html, | |
html a { | |
-webkit-font-smoothing: antialiased; | |
text-shadow: 1px 1px 1px rgba(0,0,0,0.004); | |
} | |
/* | |
Basic component for HEADER and FOOTER | |
-- To create a Header and Footer easily | |
*/ | |
.header, | |
.footer { | |
width: 100%; | |
height: auto; | |
min-height: 30px; | |
position: relative; | |
} | |
/* | |
Image height alignment | |
-- Aligmnet for images to middle, top and Baseline(Default) | |
*/ | |
img.top-image { /* Align images to top height */ | |
vertical-align: top; | |
} | |
img.middle-image { /* Align images to middle height */ | |
vertical-align: middle; | |
} | |
img.base-image { /* Align images to baseline */ | |
vertical-align: baseline; | |
} | |
/* | |
Text alignment | |
-- Simply aligment for texts everywhere, independent tag | |
*/ | |
.txt-left { /* Align text to left */ | |
text-align: left !important; | |
} | |
.txt-right { /* Align text to Right */ | |
text-align: right !important; | |
} | |
.txt-justify { /* Align text Justify */ | |
text-align: justify !important; | |
} | |
/* | |
Simply inline menu | |
-- Create a nav menu using <ul> list simply and easy with 25px default space between menu itens | |
*/ | |
.nav ul.menu > li { | |
display: inline-block; | |
} | |
.nav ul.menu > li:nth-child(1n+2) { | |
margin-left: 25px; | |
} | |
.nav ul.menu > li a { | |
text-decoration: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment