Newbie Spellweaver
- Joined
- Nov 23, 2008
- Messages
- 42
- Reaction score
- 21
Just something I cooked up for my framework but will release ahead of time. This is version.. dunno. It's a work in progress but it can still help people who're struggling with grids. Which as it so happens to be quite a few of you. It's written in SASS! You need to have sass installed and ready to compile this into normal css. I normally keep my variables in a separate file but have slapped them into one. Copy paste this, modify it and use it!
How to use it in your html documents:
You can add as many number of "boxes" in a grid div as you like as long as the total comes to 12. In the demo above, I added two boxes of value "6". Therefore, 6+6 = 12. Basic math.
Good luck!
On a side note. The mention crap on this forum is veeeeeery annoying.
Code:
/*
Grid System. Completely revised using SASS operators.
Customizable if you know what you're doing and want a different
amount of columns and/or different responsive features.
*/
/* Variables for screen sizes -
The logic behind the nameing is as follows:
ScreenResolution-"device"-"portrait/landscape"
results: sr-smartphone-p
*/
/* Screen Resolution for Smartphones => Portrait View */
$sr-smartphone-p: "only screen and (max-width : 320px)";
/* Screen Resolution for Smartphones => Landscape View */
$sr-smartphone-l: "only screen and (max-width : 480px)";
/* Screen Resolution for Tablets => Portrait View */
$sr-tablet-p: "only screen and (max-width : 768px)";
/* Screen Resolution for Tablets => Landscape View */
$sr-tablet-l: "only screen and (max-width : 1024px)";
/* Adjustable Padding */
$grid-padding:10px;
/* Box-Sizing */ [USER=1333445824]mix[/USER]in box-sizing{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* General All Purpose Clearfix */ [USER=1333445824]mix[/USER]in clearfix{
content:"";
display: block;
width:100%;
height:0px;
clear:both;
visibility: hidden;
}
/* Begin Main Grid CSS */
.grid{
/* Clear for floating boxes */
&:after [USER=813494]include[/USER] clearfix;}
/* Making Grid Visible for debugging (Remove for production ready version) */
&.griddemo{ .box{background:#ececec [USER=813494]include[/USER] border-radius-equal(5px);text-align:center;}}
/* Base box style */
.box{float:left;}
/* Class Name Extend Base Style Width Config */
.box-1{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 1%; }
.box-2{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 2%; }
.box-3{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 3%; }
.box-4{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 4%; }
.box-5{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 5%; }
.box-6{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 6%; }
.box-7{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 7%; }
.box-8{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 8%; }
.box-9{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 9%; }
.box-10{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 10%; }
.box-11{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 11%; }
.box-12{ [USER=229973]Extend[/USER] .box; width:100 / 12 * 12%; }
/* Class Name Padding Property Box-Sizing Fix */
.pad-right{ padding-right:$grid-padding; [USER=813494]include[/USER] box-sizing;}
.pad-left{ padding-left:$grid-padding; [USER=813494]include[/USER] box-sizing;}
.pad-top{ padding-top:$grid-padding; [USER=813494]include[/USER] box-sizing;}
.pad-bottom{ padding-bottom:$grid-padding; [USER=813494]include[/USER] box-sizing;}
.pad-all{ padding:$grid-padding; [USER=813494]include[/USER] box-sizing;}
/*
Responsive Features
*/ [USER=1333434998]Media[/USER] #{$sr-smartphone-l} {
.box{width:100%;}
}
}
How to use it in your html documents:
Code:
<div class="grid">
<div class="box-6">This box occupies 50% space.</div>
<div class="box-6">This box also occupies 50% space</div>
</div>
You can add as many number of "boxes" in a grid div as you like as long as the total comes to 12. In the demo above, I added two boxes of value "6". Therefore, 6+6 = 12. Basic math.
Good luck!
On a side note. The mention crap on this forum is veeeeeery annoying.
Last edited: