creating a css layout from scratch
DESCRIPTION
TRANSCRIPT
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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Sketch the structure of HTML documents
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Sketch the structure of HTML documents
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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.
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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/
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
* Create main style
Style layout with CSS
+ 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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]-->
Style layout with CSS
To specify a style for IE10, you can use
<!--[if !IE]><!--<script> if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } </script><!--<![endif-->
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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 }
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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;}
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
-ms- : Microsoft Internet Explorer -moz- : Mozilla Firefox
Add support for site page (cont)
+ 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Add support for site page (cont)
+ 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)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
* Supports a variety of different devices
Add support for site page (cont)
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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Add support for site page (cont)
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 */
}
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Add support for site page (cont)
* 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%;}}
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
+ 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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Optimize source code (cont)
* 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)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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)
Optimize source code (cont)
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Web tool
Editor: Sublime Text + plugins: emmet, autoprefix, browser frefesh, fetch,…
Software: Texter, Browser Chooser, IE Tester
Thank you everyone