Less – design that is more
Download as PPTX, PDF•1 like•363 views
The document introduces 'less', a design framework featuring an adaptive cross-platform CSS grid system optimized for responsiveness and mobile-first projects. It highlights compatibility with various browsers and devices, offering layouts for desktops, tablets, and mobile phones, each with specific column configurations. Additionally, it emphasizes the use of CSS3 media queries for layout adaptation and provides a default layout for older browsers.
Less – design that is more
- 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