2012-07-26 오후 10-24-02

웹사이트 제작 TIP – 반응형 웹사이트 만들기

Posted on July 26, 2012 · Posted in CSS, Uncategorized

15 Responsive CSS Worth Considering
Less Framework 4

 

 

What It Is

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

How It Works

Every layout in Less Framework is based on a single grid, composed of68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

The three sets of typography pre­sets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio.

Technically

The idea is to first code the Default Layout (992 px), and then use CSS3media queries to code seve­ral child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do. They will also inherit all styles given to the Default Layout, so coding them is very fast.

If you think of Mobile First as progressive enhancement, Less Framework will feel more like graceful degradation; old desktop and mobile browsers will only use the default 992 px layout. While not being ideal for accessibility, this also means you will not have to IE-proof any of the child lay­outs, and can freely use modern CSS in them.

To break it down, recent versions of Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as Internet Explorer 9, Android Webkit, and Mobile Safari (all iPhones, iPads and iPod Touches) will use the layout most appropriate to them. Internet Ex­plorer 6–8 and most old mobile devices will only use the Default Layout.