Sculpt Framework Mobile-First with Progressive Enhancement

Sculpt Framework What are the benefits Sculpt? Mobile-First Design with Progressive Enhancement. Designed for legacy browsers in mind. Built with SASS (Syntactically Awesome Style Sheets)

Progressive Enhancement Graceful Degradation vs Progressive Enhancement Graceful Degradation starts with developing for the desktop and working down to tablets and mobile phones. Progressive Enhancement starts with developing for mobile phones and working up to tablets and then desktop versions.

Progressive Enhancement What’s the difference? When you start with the desktop platform, you tend to want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. But when starting with only the essential things needed in a mobile design, you can freely build onto the design for tablet and desktop without having to worry about the mobile version later.

Sass Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.variablesnested rulesmixinsinline importsthe Compass style library

Sass #main p { color: #00ff00; width: 97%;.redbox { background-color: #ff0000; color: #000000; } } #main p { color: #00ff00; width: 97%; } #main p.redbox { background-color: #ff0000; color: #000000; } Sass allows CSS rules to be nested within one another. The inner rule then only applies within the outer rule’s selector. For example:

Sculpt Structure Structure: Sculpt is modular by nature, so you only drop onto the page the elements you need to use. The basic structure of a content block looks like this. This is some content.

Sculpt Structure The class declarations follow the rule type | format | size. In this instance we only have type and size. You don't have to stick to a full-width column, though. Should you want to segment your content, you can specify a different column width. As long as adjacent columns add up to twelve, the layout will behave as expected.

Sculpt Structure This is six column widths. This is three column widths. This is three column widths.

Sculpt Buttons Three options for button sizes: - Small, Normal, Big Small button

Sculpt Typography By default, Sculpt uses a 2.5rem horizontal baseline grid system and 1.6rem for base font size. 1rem is equivalent to 10px, and there is a px based fallback for IE8 as it does not recognise rem as a unit of measurement. It's possible to control the weight of the text through classes. As Open Sans comes with a full family of type weights it's possible to have Light, Regular, Semi Bold, Bold and Extra Bold text. As well as using the standard bold tags. Simply wrap the text in an element with the class light, regular, semibold, bold or extrabold.

Sculpt Typography It's also possible to control the spacing of letters as well, with the following classes (which can be applied to any text element): Tightest, Tighter, Tight, Loose, Looser, Loosest text goes here To control the weight use: text goes here

Modernizr + JS What is modernizr? Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Modernizr Why does Sculpt use it? Sculpt uses Modernizr to load scripts and additional files where necessary, and manage overheads to ensure that only the right scripts for the current environment are loaded. By default Modernizr test for the following: Touchscreen (or touch event) support - For mobile devices, tablets, and newer touchscreen PCs Media query and CSS3 Transform events - For recent browsers. This will exclude IE9 and below because while IE9 supports media queries, it does not support CSS3 transforms. If this condition isn't met, then scripts to support legacy browsers will be loaded.

Load Mobile The Sculpt framework checks to see if your device is mobile and if true it will load hammer.min.js, selectivizr.min.js. - Hammer supports Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures. Each gesture triggers useful events and eventData. - Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. If you are not on a mobile device, the appropriate files are loaded for your device.

Questions 1. What is the benefit of designing for mobile first and using progressive enhancement with Sculpt? When starting with a mobile design you are then free to build onto that structure without having to worry about functionality and aesthetic features breaking. Also you don’t have to worry about the ‘weight’ of the website because your design is already optimized for mobile use.

Questions 2. Does Sculpt have an extensive typographic library? No, Sculpt does not have an extensive typographic library. It has features that allow for customization of fonts determining font weight and kerning but only is installed with one default font. Any customization beyond this point is up to the user to design and develop.

Questions 3. In the Sculpt framework, will modernizr always download mobile files first even if a mobile device isn’t detected? No, files associated with mobile functionality will only be downloaded if and when a mobile device is detected. If it is not detected, modernizr will load the desktop version for the files instead.

Sources