creating a css layout from scratch

Author: Huỳnh Công Hoan

Creating a CSS layout from scratch

DESIGNVELOPER

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

1. Slice image from design file.2. Sketch the structure of HTML documents.3. Building layout with HTML.4. Style layout with CSS.5. Validate web page.6. Add support for web page.7. Optimize source code.

Agenda


Sketch the structure of HTML documents


Building layout with HTML

* Selecting the correct HTML tag corresponding to sections of of the structure.

* Some HTML5 tag for Web page layouts

header: represents a group of introductory or navigation aids

nav: section of page that links to other pages or to parts within the page.

footer: represent a footer for the section it applies to section:represent a generic document or application

section.


article: a section of page that consists of a composition that forms independent part of a document, page or site.

aside: a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be separate form that content.

hgroup: used to group a set of h1 – h6 elements when heading has multiple levels

Building layout with HTML

For more details, you can reference: www.w3schools.com


Style layout with CSS

* Create CSS reset

+ HTML5 Doctor Reset: http://html5doctor.com/html-5-reset-stylesheet

+ Normalize Resethttp://necolas.github.io/normalize.css/3.0.0/normalize.css

+ Yahoo! (YUI 3) Reset CSShttp://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css

+ Eric Mayer’s “Reset CSS” 2.0http://www.cssreset.com/scripts/eric-meyer-reset-css/


* Create main style


+ CSS Selector: http://www.w3schools.com/cssref/css_selectors.asp+ CSS Specificityhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

* Create a specific style for a particular browser version

Use conditional comments to assign a stylesheet for a particular browser version

Ex: <!–-[if gte IE9]><link rel=“stylesheet” type=“text/css” href=“css/ie.css” /><![endif]-->

<!—[if lte IE6]> <link rel=“stylesheet” type=“text/css” href=“css/ie6.css” /><![endif]-->


To specify a style for IE10, you can use


Validate web page

* Validate HTML: http://validator.w3.org* Validate CSS: http://jigsaw.w3.org/css-validator* Validate links: http://validator.w3.org/checklink

To easy and convenience, you can use web developer add-on


Add support for site page

* Support compatible cross browser.

+ Browser hack Use asterisks mark

Ex: For IE 5.5 & IE 6 * html .test { position: absolute;} For morder browser

.test { position: fixed; } Use backflash mark

Ex: .test {height: 500px; // For IE 5.5

he\ight: 400px; // For morder browser }


Use underscore mark

Add support for site page (cont)

Ex: .test { position: fixed; /* For morden browser */_position: absolute; /* For IE <= 6 */

}

For more details, you can reference: browserhacks.com

Use selector don’t exist in old browser

Ex: #test { position: absolute;} html > body #text { position: fixed;}


-ms- : Microsoft Internet Explorer -moz- : Mozilla Firefox


+ Add vendor prefix for CSS3 properties

Ex: .box_rotate { -webkit-transform: rotate(-20deg); /* Chrome, Safari 3.1+*/-moz-transform: rotate(-20deg); /* Firefox 3.5 - 15 */ -ms-transform: rotate(-20deg); /* IE 9 */-o-transform: rotate(-20deg); /* Opera 10.50-12.00 */ transform: rotate(-20deg); /* Firefox16+,IE 10+,Opera 12.10+ }

-webkit- : Google Chrome & Safari -o- : Opera -kthml- : Konqueror

For more details, you can reference: caniuse.com



+ Embed direct JavaScript into CSS

* Use JavaScript

Ex: h1#fixed {position: absolute;top: expression((d = document.compatMode ==

"CSS1Compat"?document.documentElement : document.body)&&(eval(d.scrollTop)) );}

+ Use JavaScript library To use HTML5 in older browsers, you could us HTML5.js

(http://html5shim.googlecode.com/svn/trunk/html5.js) or html5shiv (https://code.google.com/p/html5shiv)


* Supports a variety of different devices


To use CSS3 properties in old browser, you can use PIE (http://css3pie.com) To use media query in old browser, you can use css3-mediaqueries-

js (http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js)

To fix some common bugs in IE, you can use IE9.js(https://github.com/mylovecompany/ie9-js)

To support a variety of different devices, you can use CSS Media Queries



Ex: @media screen { body { width: 75%; } /* Support for screen */

} @media print {

body {padding: 1in;border: 0.5pt solid #666; /* Support for printer*/

} }

@page {margin: 2.5cm; /* default for all page */

}

@page:left {margin-left: 5cm; /* only for left-page */

}



* Supports a variety of screen sizes Similar, to support a variety of screen sizes, you can use CSS Media

Queries for different screen sizes

Ex: @media screen and (max-width: 980px) {

#pagewrap {width:95%;}}@media screen and (max-width: 650px) {

#pagewrap {width:65%;}}@media screen and (max-width: 480px) {

#pagewrap {width:35%;}}


Optimize source code

1. Optimize images

* Always use Save for Web & Deveice when save an image in Photoshop.

* Selecting the appropriate image format.

+ GIF (Graphics Interchange Format) Use LZW method to compress image. Support transparent, animation. Only support a maximum of 256 colors


+ JPG (Joint Photographic Experts Group)

Optimize source code (cont)

Support 16.7 million color Support progressive image

+ PNG (Portable Network Graphics)

Support 8-bit color (GIF) and also support 24-bit RGB (JPG) Support transparent image, but not support animation Don’t support in old browser



* Use Image Sprite technical

+ A collection of images put into a single image.+ Reduce the number of server requests and save bandwidth.+ Online tools: Spritepad (spritepad.wearekiss.com) Project Fondue (spritegen.website-performance.org) CSS Sprites Generator (csssprites.com)

* Use image compressor

Dynamic Drive (tools.dynamicdrive.com) Web Resizer (webresizer.com) Kraken.io (kraken.io)


2. Optimize HTML+ Remove unnecessary white spaces, line breaks, tabs,…

3. Optimize CSS+ Filter unnecessary selector, CSS shorthand, sort properties, compress colors,…+ Tools: CSS Beautifier (http://www.codebeautifier.com) Clean CSS (http://cleancss.com) Robson CSS Compressor (http://iceyboard.no-ip.org/projects/css_compressor)



Web tool

Editor: Sublime Text + plugins: emmet, autoprefix, browser frefesh, fetch,…

Software: Texter, Browser Chooser, IE Tester

Thank you everyone

creating a css layout from scratch

Technology