The document describes a CSS grid system called 'less' that is adaptive and works across various platforms, offering responsive layouts for different devices. It supports multiple browser and device compatibility, featuring four layouts with several typography presets suitable for desktops, tablets, and mobile devices. Additionally, it employs media queries to adjust layouts based on device sizes, ensuring accessibility for users with older browsers.

1. Less –
Design That is More…
BY SPEC INDIA

2. Less – Design
 Adaptive Cross Platform CSS grid system
 Responsive & Mobile First Projects
 Uses Standards-based CSS3 media queries

3. Less – Browser Compatibility
 Compatible with
 Browsers
 Firefox
 Chrome
 Safari
 Opera
 Internet Explorer 9

4. Less – Device Compatibility
 Android
 Android Phones
 Tablets
 iOS devices
 iPhones
 iPads
 iTouches
 Windows Phone series

5. Less For All

6. The Less Layouts for More
 This CSS grid system of the framework includes
 4 layouts
 3 sets of typography presets
•10 columns at 992 px
•Desktops
•Laptops
•Tablets in Landscape
•All old browsers
Default Layout
•8 columns at 768 px
•iPads
•tablets
Tablet Layout
•3 columns at 320 px
•iPhones
•iPod Touches
•modern mobile devices.
Mobile Layout
•5 columns at 480 px
•Large Mobile Devices
•iPhones in Landscape
•iPod Touches in Landscape
Wide Mobile Layout

7. Adapting To All Layouts
 Single grid based layout
 Composed of 68 px columns with 24 px gutters
 Changes for each layout
 Amount of Columns
 Width of the Outer Margins
 Three sets of typography presets
 Aligned according to the layout of choice
 24px baseline grid

8. An Innovative Solution
 Default Layout is coded first-992 px
 Next, CSS3 media queries used to code the Child Layouts
 768 px
 480 px
 320 px
 The Default Layout available to
 Browsers not supporting media queries
 Child Layouts available according to
 Device size
 Browser

9. Visit
www.spec-india.com
&
Request a FREE POC
to
Test Drive our Services