Why you should know css

• You can make things that look AWESOME
   
• Be both a developer AND a designer
   
• And... why not? Add it to your skillset

css fundamentals

(in short)

display

Three primary types:

inline

inline-block

block

Padding

Internal element space

It is used to ensure content is not at the edges of the given element

Margin

External element spacing

It is commonly used to separate elements visually

Floats

This is a very useful property in CSS, but it can be tricky

Commonly used for news / articles

other alignments

Aligning text to the center

• line-height
• text-align
• vertical-align

Aligning child elements

with margins

margin: 0px auto;

Making elements scrollable

The overflow property

You can specify the direction of the overflow

 - overflow-x, overflow-y 

/* Adds vertical scrolling */
overflow-y: auto;

/* Hides any overflow */
overflow: hidden;

Only takes effect when the height of the child elements

becomes greater than the height of the parent element

Positioning elements

relative

absolute

fixed

Leaves a gap for the element

Does not leave any space for the element

Stays at the same position even when scrolling

done with the basics!

Advanced Css

this is the cooler stuff

Checkout this CSS3 Spinner

Keyframes

It's the CSS3 way to define animations

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(359deg);}
}

@keyframes spin {
    0% { do something; }
    25% { do another thing; }
    ...
    100% { get to final "frame" of the animation; }
}

transform everything!

Using those animations

animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;

Put this into the element you want to animate

spinner's css

Breakdown

• Starts out as 100x100px square
• Border-radius turns it into a circle with no background
• 2 / 4 borders are the same color and the others are transparent
  • Creates an illusion
• Start the animation on it

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(359deg);}
}

.spin {
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 100%;
    border-bottom: 2px solid tranparent;
    border-left: 1px solid transparent;
    border-right: 4px solid #9B59B6;
    border-top: 3px solid #9B59B6;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

Design Frameworks

get your designs finished faster!

bootstrap

foundation
semantic-ui

what are the benefits?

grid system

• Every framework has it
   
• Structure your elements neatly
   
• Show / Hide elements when needed
   
• Define how many columns in a row the
  element takes

ready-to-go components

Buttons

Navigation Bars / Menus

Form styling and grouping

Pagination

Labels

Lists

Modal Boxes

Tooltips

Colors

which one should i use?

it doesn't matter

Css preprocessors

use them!

Sass / scss
less
stylus

Why should i use them?

It helps make your CSS more modular

Let's take the Spinner and modularize it

• Color and size variables

/* LESS Example */
@spin-color: #9B59B6;
@spin-size: 100px;

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(359deg);}
}

.spin {
    width: @spin-size;
    height: @spin-size;
    background: transparent;
    border-radius: 100%;
    border-bottom: 2px solid tranparent;
    border-left: 1px solid transparent;
    border-right: 4px solid @spin-color;
    border-top: 3px solid @spin-color;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

override frameworks

This is an example of overriding bootstrap's LESS variables 

• Ends up changing EVERY component that uses that variable
   
• Change color scheme quickly

/* Bootstrap has these variables:
 * @brand-primary 
 * @brand-success 
 * @brand-info 
 * @brand-warning 
 * @brand-danger 
 * and many more
 */

@brand-primary: green;
@brand-info: purple;
@brand-danger: red;