|
Tutorial
Tutorial- emasticInstalationPut the following css files into your page: <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/grid.css" rel="stylesheet" type="text/css"> <link href="css/type.css" rel="stylesheet" type="text/css"> <!--[if IE]><link href="css/ie.css" type="text/css" rel="stylesheet"><![endif]--> CSS Files
How emastic works?The grid sistem is based on ems elastic layout. The grid sistem is not limited only on ems. You can use px or % for the page width. (e.g: width:xx em or width:xx px or width:xx %). The grid is made from blocks from 5em to 75em. If the body tag font-size is 100% (1em = 16px). If the body tag font-size is 75% (1em = 12px). This is default! Take a look at the spreadsheet. I added blocks of 1 and 2 ems for fine tuning. There is also one block widh 100% and one for fluid columns. The block can be floated left or right. And that is it! legendAll css classes have min. names in order to preserve space.
(e.g dl20 = div floated left, with width of 20em(240px) Some codeThe basic container is "main" class, by default is 70em(840px). Inside the main container we can put 1,2,3,4 or more columns. If we need 3 columns we can do:
<div class="main"> <div class="dl20"> 20 em </div> <div class="dl20"> 20 em </div> <div class="dl30"> 30 em </div> <br class="clear" /> <div class="dl10"> 10 em </div> <div class="dl30"> 30 em </div> <div class="dl30"> 30 em </div> <br class="clear" /> <div class="dl50"> 50 em </div> <div class="dl10"> 10 em </div> <div class="dl10"> 10 em </div> <br class="clear" /> </div> What if the main container is 80%? Then we use fluid columns. If we need 3 columns layout we will use 1 fluid and 2 fixed columns. <div class="main"> <div class="dl20"> 20 em </div> <div class="dr20"> 20 em </div> <div class="fluid"> fluid </div> <br class="clear" /> </div> Just use them like lego blocks! You can also use Div inside Div. <div class="main"> <div class="dl20"> 20 em <div class="dl10"> 10 em </div> <div class="dl10"> 10 em </div> </div> </div> OR: <div class="main"> <div class="dl20"> 20 em <div class="dl20"> 20 em (The structure won't break) </div> </div> </div> |
Sign in to add a comment
hmm - sounds good but how can you separate % widths from em widths ?
hmm.. it's just shortcut for not using style attribute in your markup.. instead style="float:left; width: 20em" you write class="dl20" This approach is pretty same to what we've had when we build layouts on tables - it doesn't separate structure from presentation.. anyway it's more convenient than tables.
I like it, it's not something i'd use for designing sites everyday but depending on the person designing the site, there knowledge, the purpose of the site and the time limits, this approach could work well.
Seems the br tag is missing an opening double-quote in all instances above.
@mariuszn3: Interesting point of view. @actionscripted: Thank you! Now is OK.
mariuszn3 is dead on. Presentational markup - choose your flavor:
width="20em" align="left" style="width: 20em; float: left" class="dl20"
The only benefit is that 2 of these methods will validate. Just another reason validation is not a benchmark for good code.
Just so you know. The links to the css sheets that you have at the top of this tutorial won't work in FF3. The rel="stylesheet" declaration must be in the link.
@dylanbathurst: There is rel="stylesheet" in the production files.Now they are in tutorial file. Thanks!
My .main (70em) class measures 840 px and not 1120px ??
@steffenveit: That is because inside type.css you have 75% font size.I am working on beta 1 and better tutorial(I will explain all the measures)
If you want semantic classes, I guess you could edit the grid.css file, and add semantic ids or classes beside the presentation class names. E.g.
#sideNav, .dl20 { width: 20em; } #sideNav, .dl1, .dl2, .dl5, .dl10 { float: left; }Then you get the best of both worlds!
Or use jQuery to replace your semantic class names with physical ones: http://www.fancybread.com/blog/index.cfm/2007/12/12/Blending-Blueprint-CSS-and-jQuery-for-Layout-and-Behaviour
I don't like this: <br class="clear" /> These days I try and avoid using <br /> as much as I can, it's too presentational for me.
@avengex: You can use <div class="clear"></div> or just "clearfix" in the last div.
Has there been any development on this project?
I have chosen your framework after reading much on the subject. I want my sites to represent a better layout using em and fluidity, instead of being fixed. That is why I am switching from BluePrint? and 960.
@organizedfellow: Yes this project is under constant development. I was hoping on more active community support. Do you have some suggestion? Please share your experience at the forum.
For semantic use id's not classes
@ ruben.media: I do use ID!
I like it :)