Best Practices for CSS

(Do's & Don'ts)

Introduction of Twitter Bootstrap Framework (v 2)

Aimed for JSP Developers

First the Basics

<HTML>

Introduction to HTML tags

Single Body HTML tags for e.g. <br> <hr> <input>
Normal HTML tags (Paired Body) for e.g <p>Paragraph</p>, <em>Emphasis</em> <strong>Strong</strong>, <i>italics</i>, <div> Division</div>, <span>Span</span>

Switch to XHTML

XHTML 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML.
~ W3C!

<XHTML />

Strict and cleaner version of HTML

!DOCTYPE required
Single body tag, should be written as
<br />, <hr />, <input />, <img />
All html tags should be lowercase

XHTML...

(continued)

Proper code nesting

<p>Paragraph<span>Span</span></p> [OK]
<p>Paragraph<span>Span Away</p></span> [NOT OK]

Tags should be properly closed
Standardization among different vendors and so forth on web industry

CSS

(Cascade style sheets)

CSS...

HTML Tags, visual classification

For e.g.
display:inline for <span>

display:block for <p>

display:table for <table>

& ETC!

BOX MODEL

(Thinking inside the Visual BOX)

BOX Model...

Outline • Margin • Border • Padding • Width • Height

BOX MODEL DEMO

(in FireFox)

CSS Rules Classification

(Properties & Values)

Text
.fs-12{font-size:12px;}
.font-family{font-family:Arial}
Layout
.display{display:inline-block;} .float{float:left}

CSS Rules Classification...

Background
.bg-color-white{background:#fff}
.opacity -half{opacity:0.5}

BOX Model
.m-5{margin:5px}
.p-5{padding:5px}
.reset-m-t{margin-top:0}

CSS3

What this all about?

Round corners
Fancy things - reflect, shadow, Glow
Transition, Rotate
Bells and Whistles on Better UX and
effects for the <peace & silence /> (not a Tag though :)

(This is a CSS3 Powered SlideShow System, REVEAL.JS)

CSS...

How to write and where to write*

(*JSP Devs.)

Avoid embedded stylesheets as much as possible in JSP files
Avoid inline css rule
(Acting as Poison for Design scalability)
Choose the unique ID's in JSP page and be careful with javascript functions

#WIP

(work in progress)

Use CSS stylesheets

for e.g
Xxxx-common.css
xXxx-tags.css
xxXx-jsp.css

What about File Save Error with CSS! with jetty:// on Windows platform?
Solution: Changes in Web.XML file. Save file, restart jetty server.

#ID vs .class

(#eye-dee vs .clash)

#ID Should be unique
(Help JS to identify such DOM elements uniquely)
Classes can be reused, but use them carefully

Little Teaser

(CSS Specificity)

#color-red-id{color:green}

.color-red{color:blue}

Float Property

(Let it float the boat)

.float-l {float:left}
.float-r {float:right}

Float Usage

(Layout)

Clear Float!

(With power comes responsibility)

Use .clearfix

(Twitter Bootstrap)

Before

After using

.clearfix{}

After using .clearfix

Lets <br />eak

(for 15 mins)

CSS Frameworks

BluePrint | 960.gs | Twitter Bootstrap etc.

Twitter Bootstrap

http://twitter.github.com/bootstrap/index.html

(web demo)

Features

Scaffold (layout)

Fixed Grid (.row .span1)
Responsive Grid ( .row-fluid .span1)

Typography, Form, Button (link)

.btn .btn-primary
.btn-large
<a href="#" class="btn btn-large disabled">Link</a>
Icon usage (<i class='icon-road'></i>)

Features...

(javascript based widget)

Rich UI controls
etc
etc
Addon etc

Form Layouts

(in our approach)

Grid system - 12 columns grid
(.row .span1,..., .row .span12)
Liquid Grid or say Responsive Grid
(.row-fluid .span1, .row-fluid .span12)

Responsive Form Layouts

(Thumb rule in our approach)

for e.g.

</div>

...

Discussion

(Question & Answer)

References

(used)

http://www.htmlgoodies.com/primers/html/article.php/3616146/Why-Switch-to-XHTML.htm

http://css-tricks.com/the-css-box-model/

http://css-tricks.com/all-about-floats/

http://twitter.github.com/bootstrap/index.html

Wish you!

{All.The.Best.}

EOM

(@gauravmishr)

Introduction to CSS For JSP Developers (+ Twitter Bootstrap Intro version 2)

By Gaurav Mishra

Introduction to CSS For JSP Developers (+ Twitter Bootstrap Intro version 2)

Inhouse Session with Neutrino Framework Team @Nucleus Software Resonsible for Product Innovation & Development for Banking Domain Products. Nucleus software is 25+ old firm, completely immersed into Banking domain technology & Products.

10,890

Gaurav Mishra

I am Product UIX Designer. My interest in this direction is for good product usability, which sum up slowly and evolving out for the better UX factually. To Observe, think and reflect for Hi-Performing Agile teams that's my parallel goal.

Best Practices for CSS

Aimed for JSP Developers

First the Basics

Switch to XHTML

<XHTML />

XHTML...

CSS

CSS...

HTML Tags, visual classification

BOX MODEL

BOX Model...

BOX MODEL DEMO

CSS Rules Classification

CSS Rules Classification...

CSS3

CSS...

#WIP

#ID vs .class

Little Teaser

Float Property

Float Usage

Clear Float!

Use .clearfix

After using

Lets <br />eak

CSS Frameworks

Twitter Bootstrap

Features

Scaffold (layout)

Typography, Form, Button (link)

Features...

Form Layouts

Responsive Form Layouts

Discussion

References

http://www.htmlgoodies.com/primers/html/article.php/3616146/Why-Switch-to-XHTML.htm http://css-tricks.com/the-css-box-model/ http://css-tricks.com/all-about-floats/ http://twitter.github.com/bootstrap/index.html

EOM

Introduction to CSS For JSP Developers (+ Twitter Bootstrap Intro version 2)

More from Gaurav Mishra

http://www.htmlgoodies.com/primers/html/article.php/3616146/Why-Switch-to-XHTML.htm

http://css-tricks.com/the-css-box-model/

http://css-tricks.com/all-about-floats/

http://twitter.github.com/bootstrap/index.html