As all the layouts are based on the same grid, elements created in one layout are reusable in the others without making lot of changes. For example, by adjusting the text elements or image sizes in one layout works in another. Lets say some more changes are also required, use the common baseline grid and type presets to fit in different UI elements.
Less Framework is easy and simple for CSS professionals. Its free from pre¬defined column classes, pre-compilers. Just keep playing creatively with HTML and CSS to design and develop content for multiple devices all at once.
Easy steps for CSS Engineers to get started with Less Framework
1. CSS Designers and Wireframe Designers can start with wireframes using Less Framework structure i.e. single grid, composed of 68 px columns with 24 px gutters.
2. Layout home page Layout for web browser and then move to other devices like phone or tablet as amount of columns change from layout to layout.
3. If your website design is content heavy. Typography pre¬sets available for CSS Designers in Less Frameworks like
24 px baseline grid;
16 px body text,
17 px,
18 px
are very useful. These typography sets contain many usable and aesthetically balanced type sizes based on the “Golden Ratio” rule which can easily used by CSS Engineering teams.
4. While working on wireframes spend less time on refining the font style or size because that can also be handled by UI Designers and CSS Engineers while converting design into HTML, just the placement and approximate ratio helps to decide layout of the webpage.
5. Once wireframes are completed based on Less Framework applying aesthetics to wireframe with in the Less Framework limits is faster and save lot of time for CSS Engineering teams. Avoid using gutter spaces to end design element for example don’t leave an edge of rectangular box in gutter space or text in gutter box. End them on the grid itself.
6. CSS/HTML conversion teams can make pixel perfect translation of UI design – pick Default Layout (992 px), and then use CSS3 media queries to code different child layouts: 768, 480, and 320 px. The Default Layout is picked by any browser, which does not support media queries. The various child layouts are displayed, as appropriate, on browsers that do support media queries. Its really fast to code them as they inherit all styles given to the Default Layout.
