Creating a CSS layout from scratch

955 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
955
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Creating a CSS layout from scratch

  1. 1. Author: Huỳnh Công Hoan Creating a CSS layout from scratch DESIGNVELOPER
  2. 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. 3. Sketch the structure of HTML documents Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  4. 4. Sketch the structure of HTML documents Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Thank you everyone

×