Crash Course on CSS & Design

Yeah... look through stuff... try it out... make it pretty.

YOU CAN DO IT.

Slides that went with the content

Note: Most sections include a README.md that gives a little more explanation on the desired file.

Structuring your HTML

• Basic Layout (Part 1 & Part 2)

CSS Fundamentals Examples

• Displays
• Padding vs Margin
• Floats & Alignment
• Containing data in a scrollable box
• Positioning Elements

Advanced CSS Examples

• Spinning Animation
• Post Tags
• Off Canvas Menu
• Using a Grid System (Bootstrap Specific)
• Overriding Framework Specific CSS

CSS Preprocessors (LESS, SASS, Styl, etc.)

What is a CSS preprocessor?

Wikipedia article on preprocessors

A CSS preprocessor is essentially a supercharged version of CSS that has more functionality like mixins (functions), variables, nesting, and inheritance.

Imagine being able to change a single color variable and have your entire site change almost instantly. Immediate color scheme change without having to go out and change each and every place where you are using that specified color.

SASS and LESS are the two primary preprocessors, but there are many others. Which one you choose is really up to you.

If you want to see what I mean by that, I encourage you to go through these: LESS Features
SASS Guide

LESS Workflow

Important Note for ALL listed workflows

It is good to have one centralized LESS file that has all of the other files imported into it. All other files should be named *.import.less (not required).

So, you have one file style.less that has everything in it.

@import 'variables.import.less';
@import 'mixins.import.less';
@import 'base.import.less';
@import 'home.import.less';
@import 'blog.import.less';

The reason that it should be this way is so that you can structure the way your CSS outputs. The order that CSS is in really does matter. Styles that are instantiated later take precedence and can override similar styles from before.

And this is the file that is compiled to CSS in the end.

With Gulp

Coming Soon!

With Meteor

Add in the LESS package meteor add less and use the same structure as listed above by importing all less files into a master less file.

Using Design Frameworks

You should follow the DRY principles. So, why re-do CSS when you can utilize a framework and speed up your design process. Focus on the nicer pieces of your website and what make it unique. Avoid spending time on the base css that can be repeated and improved project after project.

There are three primary CSS design frameworks:
Bootstrap - Most Popular
Foundation
Semantic-UI - Newer, but very nice
Other:
Picnic-CSS - New and lightweight

Useful Resources

Mozilla Developer Network
W3 Schools
CSS-Tricks
Codrops
CodePen
Simpsons in CSS
A Single Div