Websites: https://www.designveloper.com Visit our blog: https://www.designveloper.com/blog Like Facebook page: https://www.facebook.com/designveloper/ Youtube: http://bit.ly/29PTtFS

1. Author: Huỳnh Công Hoan
Creating a CSS layout
from scratch
DESIGNVELOPER

2. 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

3. Sketch the structure of HTML documents
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

4. Sketch the structure of HTML documents
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

5. 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

6.  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

7. Style layout with CSS
* Create CSS reset
+ HTML5 Doctor Reset:
http://html5doctor.com/html-5-reset-stylesheet
+ Normalize Reset
http://necolas.github.io/normalize.css/3.0.0/normalize.css
+ Yahoo! (YUI 3) Reset CSS
http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-
min.css
+ Eric Mayer’s “Reset CSS” 2.0
http://www.cssreset.com/scripts/eric-meyer-reset-css/
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

8. * Create main style
Style layout with CSS
+ CSS Selector:
http://www.w3schools.com/cssref/css_selectors.asp
+ CSS Specificity
http://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

9. 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

10. 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

11. 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
height: 400px; // For morder browser
}
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

12.  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

13.  -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

14. 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

15. * 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

16. 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

17. 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

18. 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

19. + 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

20. 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

21. 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

22. Web tool
Editor: Sublime Text + plugins: emmet, autoprefix, browser
frefesh, fetch,…
Software: Texter, Browser Chooser, IE Tester
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

23. Thank you everyone