Skip to content

Instantly share code, notes, and snippets.

@kellishouts

kellishouts/css_for_n00bs.md

Last active September 29, 2016 20:56
Show Gist options
  • Save kellishouts/f5e26d187977fafc2681 to your computer and use it in GitHub Desktop.
Save kellishouts/f5e26d187977fafc2681 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for n00bs
Raw
css_for_n00bs.md

Intro to CSS / SCSS Styling for n00bs

Write html for the largest, most complex layout; style for the smallest, simplest layout.

1. Write good markup, thinking LARGE to SMALL

2. Add imports, resets, grids, css frameworks.

3. Give layout elements (rows and columns) really ugly styles (give everything a bright bg color or border)

4. Style your layout element Media Query Ranges SMALL to LARGE

Style the layout using CSS markup and structure. Don't worry about implementing any scss fanciness yet (for n00bs).

  • 4a. Style the Mobile Layout, focusing only on Sizing, and Font Size.

  • 4b. Style the next media query up, focusing only on Sizing, and Font Size.

  • 4c. Style the next media query up, focusing only on Sizing, and Font Size (etc.)

  • 4d. Go back and style small --> large, fixing all the Color properties. Leave images as placeholders or giant blocks. Worry about those later.

5. Make it dryer!

  • 5a. Clean up your css! Make sure things are structured nicely, make sure your styles flow top to bottom, following the page architecture, or some other convention.

  • 5b. Make it dryer! Add scss variables for common values, do minimal nested styles.

  • 5c. Make it dryer! Add variables for media query ranges, make your media queries inline.

  • 5d. Make it dryer! Add mixins, functions, etc.

6. Add in styles for staic images & any final colors, icons, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment