Skip to main content

Making the must have stylesheet

A stylesheet is like pastel in canvas! It fills effectiveness in the html structure. When i started with front-end development i felt a need for a stylesheet that i can refer every time. A designer must believe in smart work rather than hard work.
There was a need for a stylesheet that is perfect enough to avoid starting from scratch, that serves purpose for all kind of media (be it print or cross-browser) and that meets the W3C recommendations. When the search for such a framework began, I came across a few but personally i found the listed below as worth jotting down. Each one has its pros and cons.

  1. 960 grid system
  2. Yahoo! UI Library CSS Foundation
  3. Blueprint
 Every front-end developer must have his own stylesheet. I have two. One purely for wordpress and the other for other static html. I am also making one for Joomla too. This saves my valuable time and efforts.
Lets start making our framework

1. Styles related to reset
To me the idea of resetting all browser style came from the blueprint framework. Every time I use this, I can be assured that my site will look more or less similar on most browsers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1.5; }
Include this stylesheet on the top of other stylesheet thus it can be overridden. One can also include styles related to tables or list that are included in most designs.
Say for example
a img { border: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
2. Styles related to structure
The structure style sheet must include the styles that are related to HTML tags / IDs that determine the layout. For example this layout has 5 basic structures so our stylesheet will have width height and float for them.

Also styles to be given for FORMS, LISTS, TABLE, IMAGES, LINK and other tags like pre, code, caption, address, blockquote etc. These styles should be well organized as they will be used frequently.

/* Begin of form styles
---------------------------*/

These indication also help other developers to refer to styles easily. I once made different stylesheets for each element like forms , tables for my company’s admin-side framework. Although that doesn’t increase the file size but it does increase the code accessibility.

3. Styles related to print
Printer friendly pages can be styled by removing the unnecessary padding and margin, using the display:none; option for header, navigation links that need nt be printed.
Also the font size must have value in pt and not pixel or em ( eg font-size:7pt ) As the output of the content appears different while we print. One can check the print preview through the browser option FILE > PRINT PREVIEW

4. Styles related to typography
This stylesheet must consist of heading and paragraph related styles. Their line-height, letter spacing, font-size, font-family should be preferably in em units to maintain consistancy over browsers. Also the body tag should be given font-size as 62.5% as it resets 1em to 10px.
Labels:

Comments

Post a Comment

Popular posts from this blog

An Ideal School System

Reading Raghu's Rearview made me realize why kids dread school so much and why i still don't like to recollect my school days. What I don't get is the attitude of parents in-general. Why do they on the first place want their piece of heart to go through such bad upbringing. In Raghu's words, School is mediocrity and uniformity at its worst... when all parents want is the opposite of that. I get anxious on the thought of sending my kid to any school... which is why homeschooling excites me. Is it my fear or something else? I don't know! All I know is i would send my child without any delay to a place where he genuinely learned and enjoyed learning. Where he finds that being of use to anyone is the only creditability to have something learned and providing value to the society can be an ultimate goal. Screw Exams. How perfect would it be to have questions from the student himself and he tried to figure of the answer! Ideally It should be the student passing ...
Post a Comment
Continue Reading

Pawna Lakeside Camping (Day 2)

Next morning I could wake before the birds chirped. It was gloomy and fog lay on the banks. I was trying to figure out east while reminding me where the sun set to the west.  The boys were still sleeping and my eyes was wide awake wanting to soak in more of this beauty. After the sun rose and my son rose... We all did a group hug and headed to the play area.  H made few friends and we had poha, chai and bread muskah for breakfast. The Resort people were kind enough to serve warm milk for my son. Hello Sun H starting to interest in photography New friends H was keen in exploring the place more. He showed me some red chilly plants, a sugarcane grass and few grasshoppers over a Chikoo tree. We spotted a green cocoon, a praying mantis and a grasshopper. Chilly Chili Sugarcane Stages of Butterfly Now you see me A Praying Mantis Today was the day to leave. Its very tough for my son to accept end of any event, be it school or visit to his Nani'...
Post a Comment
Continue Reading

Lets go seed collecting

This is a post on how something that interested me so much got passed down to my son naturally. Nature always interested me although staying in Bangalore for a couple of years made it evoke.  I started noticing various fruit trees in my locality like coconut, papaya, jackfruit, pomegranate, fig and banana. It was surprising to me how food was grown in some households. The beauty of various seasons was much prominent in HSR Layout, making me exploring more about other trees and searching them on google. Few months ago I was much frustrated by my son's rag picking all day. He would stop at various intervals on our way to pick up things like tobacco wrappers or used plastic bottles from the roadside. While in the park he would keep searching for chips packets or used lollipop sticks. I was worried about his health and overall his habit. I would explain him with logic and multiple repetition, yet no gain. I myself was frustrated with so many NOs to him. I thought there need to ...
Post a Comment
Continue Reading