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)
<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
#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)
<a style="color:red" id="color-red-id" class="color-red">RED</a>
#color-red-id{color:green}
.color-red{color:blue}
Float Property
(Let it float the boat)
- .float-l {float:left}
- .float-r {float:right}
Clear Float!
(With power comes responsibility)
Use .clearfix
(Twitter Bootstrap)
Before
Lets <br />eak
(for 15 mins)
CSS Frameworks
BluePrint | 960.gs | Twitter Bootstrap etc.
Twitter Bootstrap
(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 class="row-fluid">
<div class="span6"> <!-- span12 --> </div> <!-- /.span6 -->
<div class="span6"> <!-- span12 --> </div> <!-- /.span6 -->
</div> <!-- /.row-fluid -->
...
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.}