I am trying to get a webpage to have the same setup as livingsocial and their login page . Basically a big div in the middle that contains other stuff inside it.
Looking at their css I see they are using a lot of grid based design
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,
.grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
I am not got at all with CSS and am looking for some help of a framework to make things easier on myself.
Questions
- Does living social also use a CSS framework?
- If I am trying to get a web template like livingsocial then which framework is my best bet? I looked at blueprint CSS but their demo page looks nothing like what I want
- Today I came across the semantic grid css system(http://semantic.gs/) but again can’t make sense how/what I would need to do to make a skeleton like living social.
- Any good tutorials of how to use the framework would greatly help.
Answers to your questions:
Seems like it. The
.grid_xstuff is something you find in grid based Frameworks, of which there are a lot.Before diving into a framework, learn the basics of CSS first. It’s always good to know what a framework does and which one suits to your needs. You will not know that if you don’t know the basics of the language you want a framework for. Googling will get you an enormous amount of CSS tutorials, but I particularly like this site: http://css-tricks.com/
Again, learn the basics of CSS. Then everything should become clear once you start with a framework or grid.
Might I give another suggestion? Use http://compass-style.org/ as a framework. It has all the basics tools to create websites with relative ease and also hosts helpers to get your typography, div alignment, icon sprites and grid right. Furthermore, it already accounts for all the cross-browser issues CSS has.
Tutorials can be found here: http://compass-style.org/help/