Lesson 2

Twitter Bootstrap

Advanced CSS

Prototyping Lab

Visual Design

Gists & bl.ocks.org

Bootstrap

Setup

The Grid

Tables, Buttons, Icons

Dropdowns, Navs, Alerts, Progress Bars

Other Fun Things

Chrome Developer Tools

WebKit Inspector

Advanced CSS

A introduction to fancier CSS techniques

Display

  • display: none
  • display: inline
  • display: block

Display None

Takes element out of the layout.

e.g. if we apply display: none to paragraph 2


Paragraph 1

Paragraph 2

Paragraph 3

Display None

It vanishes from the layout.


Paragraph 1

Paragraph 2

Paragraph 3

Display Block

Causes the element to be rendered as a block. Divs are by default display: block


Div 1
Div 2
Div 3

Display Inline

But if we apply display: inline to each of the divs...


Here is some text:
Div 1
Div 2
Div 3

Position

  • position: static
  • position: relative
  • position: absolute

Position Static

The default position for elements


Element 1
Element 2
Element 3

Position Absolute

But if we apply position: absolute; top: 15px; left: 15px; to element 2...


Element 1
Element 2
Element 3

Absolute Positioning

Key facts:

  • Positions the element relative to its first ancestor that is not statically positioned
  • Use top, left, bottom, right to position
  • Takes the element out of the layout so following elements will take its place

Relative to what?


<div style="position:relative"> <!-- this one -->
    <div style="margin: 10px">
        <p>Blah blah blah...</p>
        <div style="position: absolute">
        </div>
    </div>
</div>
                    

Relative Positioning

Positions the element relative to where it would be normally

e.g. position: relative; top: 15px; left: 15px;


Element 1
Element 2
Element 3

Relative Positioning

Key facts:

  • It's relative to its original position
  • Use top, left, bottom, right to position as with absolute
  • Pretends as if the element was where it was originally and layout continues normally

Float

  • float: left
  • float: right
  • clear: both

Floats

Floats are a way of taking an element out of the layout flow and moving it all the way right or left (before the edge of its container/next floated element)

e.g. float: left on the div


Mojito dalwhinnie, cactus jack balvenie cardhu caipirinha lagavulin bombay bananarita martell harvey's bristol cream glenfiddich.

Culto a la vida irish mist toro rojo montgomery chocolate soldier, old grand dad glen scotia the last word.

Clearing

Clearing will make sure there's no floats overflowing into the element, e.g.

Mojito dalwhinnie, cactus jack balvenie cardhu caipirinha lagavulin bombay bananarita martell harvey's bristol cream glenfiddich.

Culto a la vida irish mist toro rojo montgomery chocolate soldier, old grand dad glen scotia the last word.

This div has a clear: both applied to it.

Many floats

You can have multiple floats which will stack up


Div 1
Div 2
Div 3
Div 4
Div 5
Div 6
Div 7

CSS Pseudo-classes

They're a way to select a specific subset of elements

  • a:visited
  • a:hover
  • a:active
  • li:first-child

CSS Pseudo-classes Example


                        .pseudo a:visited {
                            color: #00FF00;
                        }
                        .pseudo a:hover {
                            color: #FFFFFF;
                        }
                        .pseudo a:active {
                            color: #FF0000;
                        }
                    

!important

Create rules that take precedence over everything

NB: Use very rarely!


#myhappydiv .div-content {
    background-color: #00FF00;
    padding: 10px;
}
.div-content {
    background-color: #FF0000 !important;
}
                    

Hi there!

Background Image

background-image: url('http://placekitten.com/100/100')

Kittens!

Background Repeat

background-repeat: none

Kittens!

Fonts, fonts, fonts!

Google Web Fonts is a good source of web fonts.

Simply import with a snippet:

<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css' />

And then, style your page accordingly:

font-family: 'Fruktur', cursive;

Fancy times :)

And from here... CSS properties:

text-shadow
box-shadow
border-radius