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.


Popular posts from this blog

Being Critical and Comparative about my ride

I don't want to sound too critical.. But am just wondering if any1 out there in city of Mumbai, face the menace of this black rushing cockroach... the auto rickshaw. (Spare me if I did!)
No doubt, its the quickest was to reach in the nick of the time to your office..your home..a function.. when there is no public transport! The problem is.. there are more issues to travelling by an auto then there are advantages!
First of all, its next to impossible to get an empty auto in the city of mumbai and if you still manage to plead a driver with your innocent looks you should think thats an angel hailed from heaven on a god-forbid road.

Kshamapna: Forgiveness

The 8days Jain festival called "Paryushan" has a very thoughtful message to give. It inspires you to forgive and forget the past grievances. "Michhami Dukkadam" is what you tell everyone, not only humans but every single soul in the universe. It is a prakrit phrase meaning 'to be forgiven' or 'may all evil that has been done be forgiven'.

Why do we forgive some one?
1. Because he can be harmful
2. Because you owe him
3. Because of some religious reason like God says we must forgive and forget
4. Because that is what you call as dignity
There can be many reasons. Be it. But the calmness you feel after forgiving wholeheartedly is inexpressible. Like we bath daily... our soul should also be cleaned at-least on a yearly basis!

As humans we tend to have some or the other feel of grievances, hatred, enmity, jealousy etc towards others. Slowly & gradually this ill feelings give rise to feelings of revenge which ultimately is a destructive process &…

Strong Mental Health

How to be Mentally Strong?  Ami Morin is a therapist and has written the bestseller "13 Things Mentally Strong People Don't Do". I haven't read the book but I have heard her tedx talk. Here is the guidance by Amy Morin and my notes on them.

 Believe in yourselfWe usually have certain beliefs about ourselves that are developed during our childhood. Like I am lazy to finish any task, I am an angry person, I am only good to people for certain amount of time etc. These are the statements usually by my key person, my guardian or my mom. I do feel offended when she says so but I accept it like a blind faith.If I try to say good things about myself and prove with incidences I can regain faith in my efforts, in myself. That will make me HAPPY.Daily Gratification is a good habit I will cultivate. It will surely make me feel special and thankful for what i have.Achieving my goals will elevate my faith in myself. Dont Compare yourselfWe find ourselves comparing with our friends…