simple-gists

css_tips

/*
  working with floats
  apply additional class on the floats' parent
*/
.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

/* 
  centering text inside a div block
  make height and line-height equal.
*/

div {
  height: 30px;
  line-height: 30px;
}





/*

*** CHECK FOR REPEATABLE BLOCK DESIGNS IN THE APP. THEN TRY CREATING CLASSES THAT CAN BE USED REPEATEDLY. ***

. inline elements don't take commands on width, height, margins, padding ...

. block elements support those

. so make inline elements (display: inline-block) to do so.

. when using icons, check whats the display style. Then try to apply inline-block and center the using text-align: center.

. for a div with "text-align: center", all inline elements within that, get centered. NOT the divs inside that.

. inline-block elements as menu headers/footers, 1/2px padding/between inline-blocks- browser rendering problems

- when view doesn't have much content, use fixed position/margins for content and footer.
  (make sure when content increases, div size increases and footer gets pushed down)

- avoid naming class like "blueText". name it as "noteText" or something. (later color change won't matter)

- consistent wordings (across projects)

- use Reset. Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers.

- top down approach (write css from head to footer of html)

- combine elements: h1, h2, h3 {font-family: tahoma, color: #333}

- create HTML first

- don't dump everything in one class. Try combining classes (each with a special use)

- use shorthand:  margin: 8px 7px 0px 5px; (TRBL)

- INLINE: span, a, strong, em, img, br, input, abbr, acronym

- BLOCK: div, h1...h6, p, ul, li, table, blockquote, pre, form

- properties in css style (arrange according to alphabet)

- margin: 0 auto; To Center Layouts // top, bottom - and left, right values, respectively.

- Use Absolute Positioning Sparingly;

- Use Text-transform (lowercase/uppercasing the text)

- Don't use Negative Margins to Hide Your h1 (spam)

- Avoid extra selectors: body #container .someclass ul li {....}

- Add Margins and Padding to All (if needed a global reset... ) * {margin:0;padding:0;}

- If you're noticing that your design looks a tad wonky, there's a good chance it's because you've left off a closing </div>. You can use the XHTML validator to help sniff out all sorts of errors too.

- Finally: minify and then concat css files into one file. - Reduction in loading time (removal of handshakes, filetransfer delays)


*/