Trying to start on a page with css and html

Question

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.

Answer 1

Answers to your questions:

• Does living social also use a CSS framework?:

Seems like it. The .grid_x stuff is something you find in grid based Frameworks, of which there are a lot.

• 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

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/

• 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.

Again, learn the basics of CSS. Then everything should become clear once you start with a framework or grid.

• Any good tutorials of how to use the framework would greatly help.

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/

Answer 2

Looks like they're simply using float:left and float:right to place two div's side by side.

So if you have;

<div style="float:left">Left div</div>
<div style="float:right">Right div</div>

they will appear next to each other.

Within those two divs you then place other content such as more divs.

Each time you add another div you need to place it using css.

.div1 { margin-top:20px; padding-left:30px }

That's how you get to place the content like in LivingSocial.

It can be a bit tricky to place them all but once you are done it's very easy to then move items around the screen and have the contents follow.

I hope this helps

edit

if you really don't want to get involved in the world of css then maybe take a look at http://themeforest.net/ and see if there is a theme you can purchase

Answer 3

I think Semantic is quite a good bet, it's responsive too, so if you want to make your site to be compatible with different mobile device screen widths on devices supporting HTML5, it would suggest getting to know Semantic a bit better.

You can read more about responsive web design here: http://www.alistapart.com/articles/responsive-web-design/

One thing to keep in mind about Semantic is that it is a LessCSS implementation, see more about LessCSS here: http://lesscss.org/ LessCSS opens doors to styling your website, so take the time to learn it, trust me, it's worth it.

Also, take a look at this article posted on SmashingMagazine today: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ it might answer some of your questions.

I strongly suggest subscribing to Smashing Magazine's RSS feed, it is the best for learning the latest trends and techniques in web development.

Lastly, your best bet for learning Semantic would be to download it, get it running and dissect it, it should come with a demo. There is also a Tutorials section a little ways down on their page at http://semantic.gs/