Creating a CSS layout from scratch

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

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

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 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/

* Create main style
+ 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

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

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
}

 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 */
} Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

* 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%;}
}
}
} 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

+ 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)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)

Web tool
Editor: Sublime Text + plugins: emmet, autoprefix, browser
frefesh, fetch,…
Software: Texter, Browser Chooser, IE Tester

Creating a CSS layout from scratch

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Creating a CSS layout from scratch

Semelhante a Creating a CSS layout from scratch (20)

Mais de Designveloper

Mais de Designveloper (20)

Último

Último (20)

Creating a CSS layout from scratch