My general documentation for Front-End Projects.
Latest commit e565bd2 Feb 3, 2012 @xtine update
Failed to load latest commit information.

Front-End Documentation

Starting a Project Template

Using SASS

  • SASS files should be found in /resources/<project_name>/sass/
  • Never touch the compiled CSS files (in /static/css)

Common Mixins

  • @mixin typeface
    • general font for text on the site
  • @mixin cool-font
    • specific font stacks or webfonts for headings or styled text sections
  • @mixin clearfix
    • a better clearfix ("microfix") to clearing floats

File Structure

  • modules
    • /_base.scss
      • core imports
    • /_mixins.scss
      • holds all mixins
      • good practice to declare fonts in this file
    • /_normalize.scss
      • CSS reset
      • edit as necessary to adjust base styles (list padding, styles, etc)
  • partials
    • /_footer.scss
      • <footer></footer>
    • /_header.scss
      • <header></header>
    • /_ie.scss
      • Any IE specific styles go here
      • With Modernizr targetting, should only be using classes .oldie, .ie8, etc
  • styles.scss
    • General site styles
  • views
    • /_<view-name-here>.scss
      • example: /_checkout.scss holds styles for checkout form page
      • separate out styles into view files to not clutter styles.scss

Best Practices