Week 02, Day 02

What we covered today:

• CSS - Visual Formatting Model
• CSS - Fonts
• Atom Packages

Warmup

• Warm up and solution - Scrabble

Slides

• Advanced CSS

CSS - visual formatting model

The CSS visual formatting model is the set of rules used to process and render documents to visual media. Each element of a document is converted to one or more boxes, and the layout of each box is determined by its:

• Box model (width, height, margins, padding, borders)
• Display type (ie, display; eg, block, inline, inline-block, etc)
• The positioning scheme (ie, position; eg, static, relative, absolute, etc)
• Relationship to other elements in the document object model.

The box model

Every HTML element generates a rectangular box. The 'box model' defines these boxes, their properties and how they are laid out according to the 'visual formatting model'.

The core box-model CSS properties are: size (height width), margin, padding, border and box-sizing.

Size

The size of the element's content box - the size and width of the element itself. The following properties can be used to control the size of the box:

• height and width
• max-height and max-width
• min-height and min-width

Padding

Specifies the space between the content box and the box's border. The following properties can be used to control the box's padding:

• padding - a 'variadic' property that can be used to set some or all padding attributes of an element (all sides, all sides in pairs, all sides individually)
• padding-top, padding-right, padding-bottom, padding-left

Margins

Specifies the space between the element and adjacent elements. The following properties can be used to control the box's margins:

• margin - a 'variadic' property that can be used to set some or all padding attributes (all sides, all sides in pairs, all sides individually)
• margin-top, margin-right, margin-bottom, margin-left

Border

Specifies the style of the box's border. There are a lot of border properties (eg border-bottom-righ-radius, etc), but the following properties can be used to control the box's border:

• border - a shorthand property for setting the border's width, style and color properties
• border-style
• border-width
• border-color

Positioning

Static

Static is the default value for any element. It lets the element use the normal behaviour (what it is supposed to do). The top, right, bottom, left and z-index properties are not respected. It really does nothing.

Relative

Relative treats position: static as its starting point and, without changing the position of any other elements, allows us to move an element relative to its own static position.

For example, if we added top: -20px to a position: relative element, it would move that element up the page by 20px without affecting the position of any other elements.

Absolute

Position absolute is very different to relative and static. If we add this property, the browser will not leave space for that element - the element will be removed from the document flow, and other elements will be re-positioned to fill the empty space. Absolutely positioned elements are positioned relative to the position of its nearest positioned parent ( ie, the nearest parent with anything other than position: static ) - this will often reference the body element.

Make sure you reference top and left or bottom and right when you use this property. Remember that this will change the document flow!

Fixed

This is similar to position absolute, however a position: fixed element is positioned relative to the (top, bottom, left and/or right of) the viewport, where it will stay - it will not move when the document is scrolled.

This is how we create fixed navigation bars, etc.

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
}

Display

The display property determines the type of box that will be generated by an element, with each type resulting in different visual formatting of the box. There are a bunch of display values, but the most common are inline, block, inline-block and none.

Inline

display: inline elements create boxes that can participate in an inline formatting context - they are capable of being laid out horizontally within a containing block.

An inline element will accept:

• horizontal margins
• horizontal padding
• vertical-align

An inline element will ignore:

• vertical margins
• vertical padding
• height
• width

Block

display:block elements create boxes that are visually formatted as a block, intended to be stacked vertically.

A block element will accept:

• height
• width
• margins
• padding

A block element will ignore:

• vertical-align

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>, as well as text "blocks" like <p> and <h1>.

Unless a width is specified, a block-level element will take up as much horizontal space as its parent container allows.

Inline-block

A display:inline-block element creates a box that can participate in an inline formatting context, but which will also respect width and height attributes.

An inline-block element will accept:

• height
• width
• margins
• padding
• vertical align

None

display: noneremoves the element from the page. Note that while the element is still in the document object model, it is otherwise removed in every conceivable way - the document is reflowed as if the element never existed, elements positioned relative to the element will be repositioned relative to some other ancestor, it will be ignored by screen readers, it cannot be 'tabbed' to, etc.

Overflow

The overflow properties specifies how the browser should deal with content that exceeds the dimensions of the element's block-level container. In order to work, the element's block-level container must have one of the following properties: height/width, max-height/max-width or white-space: nowrap (otherwise the container will simply expand to accommodate the dimensions of its child.

Visible

overflow: visible is the default value. Content is not clipped, and may be rendered outside the content box.

Hidden

overflow: hidden - the content is clipped and no scrollbars are provided.

Scroll

overflow: scroll - the content is clipped and scrollbars will be displayed in desktop browseres, regardless of whether any content is clipped.

Auto

overflow: auto lets the browser decide whether scrollbars should be displayed based on the content itself (if content would overflow, provide a scrollbar; if not, don't).

Box-sizing

The box-sizing property is used to alter the default CSS box model used to calculate width and height of elements.

The default value of the box-sizing property for an element is box-sizing: content-box.

content-box

The width and height properties of the element are measured including the content, but not the padding, border or margin.

So, for an element with the following properties:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    margin: 15px;
    border: 1px;
}

The dimensions of the element (excluding the margins) will be:

• width: 222px
  • 200 + 10 + 10 + 1 + 1)
  • width + top padding + bottom padding + top border + bottom border
• height: 122px
  • 100 + 10 + 10 + 1 + 1
  • height + left padding + right padding + left border + right border

border-box

The width and height properties of the element are measured including the content, padding and border, but not the margin.

So, for an element with the following properties:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    margin: 15px;
    border: 1px;
}

The dimensions of the element (excluding the margins) will be:

• width: 200px
  • (200 - 10 - 10 - 1 - 1) + (10 + 10 + 1 + 1)
  • (width - top padding - bottom padding - top border - bottom border) + (top padding + bottom padding + top border + bottom border)
• height: 100px
  • (100 - 10 - 10 - 1 - 1) + (10 + 10 + 1 + 1)
  • (height - left padding - right padding - left border - right border) + (left padding + right padding + left border + right border)

CSS - The Visual Formatting Model - Recommended Readings

• MDN - CSS Reference - Position
• MDN - CSS Reference - Display
• MDN - CSS Reference - Box-Sizing
• Learn CSS Layout - this is a really handy guide for getting your head around display and positioning, etc.
• Jon Duckett - HTML and CSS

CSS - Fonts

Google Fonts

• Go to Google Fonts] and add the fonts that you want to your Collection
• Once you have selected all your fonts, click Use (bottom right)
• Choose the styles that you would like, and the character set
• Choose the "@import" option and copy and paste the code into the top of your CSS file
• Reference the font with the code provided

Font Awesome

• Go here and either:
  • download the necessary files;
  • get the CDN link emailed to you; or
  • use this CDN link: http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css (current as at August 2016)
• Put a <link> to that the Font Awesome CSS in your document's <head>
• Go through the list of Font Awesome icons and click on the one you want
• Copy and paste the snippet into your HTML.

Custom Fonts

To reference custom fonts, you need to have the fonts saved in your project. Reference them in this way - make sure this is at the top of the CSS file! Reference this particular font by using the font-family name you referred to.

@font-face {
  font-family: 'GT Pressura';
  src:  url('GTPresurra.eot');
  src:  local('GT Pressura'),
        url('GTPressura.eot#iefix'),
        url('GTPressura.eot') format("truetype"),
        url("GTPressura.otf") format("opentype"),
        url("GTPressura.woff") format("woff"),
        url("GTPressura.woff2") format("woff2"),
        url("GTPressura.svg") format("svg");
}

To convert fonts, use this tool.

Fontello

This will generate a custom font for you, that you will then need to reference in your CSS. Once you have selected all the icons that you want, give it a family name (top right) and select download webfont. Make sure you have all the formats that you need (from the custom fonts section above), and reference each icon with the code that it gives you.

Atom Packages

Atom is really powerful, but one of the things that makes it great is the versatility provided by packages. To install packages, navigate to:

Atom > Preferences > Install

The first package that we need is called "Emmet", to find it, navigate to install and search for "emmet", it should be the top result with the most downloads.

From there, simply click Install and Atom should do the rest.

Recommended Atom Packages

• emmet
• atom-beautify
• open-in-browser
• open-recent
• jshint
• minimap
• linter
• linter-csslint
• color-picker

NOTE: If you find that, after installing Emmet, CSS (or another language's) abbreviations are (on tab) expanding to weird things (eg, mar, in CSS, expands to max-resolution: res; instead of the expected margin:, suggested in the autocomplete menu), add these lines to your keymap.cson file (Atom > Keymaps):

# Stop emmet from hijacking tab from snippets and autocomplete
'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'

Brief Intro to Emmet

Emmet is an Atom Package for speeding up the process of coding HTML and CSS using abbreviations and action shortcuts. It's particularly helpful when writing HTML. Check out:

• Emmet Cheat Sheet
• Emmet Syntax

Abbreviations

All of Emmet's abbreviations work by writing the abbreviation and pressing tab at the end of the abbreviation.

Tag Name

Whether it is a p, a div, or anything else. If you type the tag name, and then hit tab, it will create the element.

Classes and IDs ( # or . )

div.className
<!-- Makes: -->
< div class="className"></div>

div#tagName
<!-- Makes: -->
<div id="tagName"></div>

div.firstClassName.secondClassName
<!-- Makes: -->
<div class="firstClassName secondClassName"></div>

div.className#secondClassName
<!-- Makes: -->
<div class="className" id="secondClassName"></div>

Children ( > )

This is for nesting elements!

div>p
<!-- Makes: -->
<div>
    <p></p>
</div>

header>nav>p
<!-- Makes: -->
<header>
    <nav>
        <p></p>
    </nav>
</header>

Sibling ( + )

This is for creating elements next to each other.

header+div.container
<!-- Makes: -->
<header>
</header>
<div class="container">
</div>

Multiplication ( * )

This is for making multiple elements at once.

div>ul>li*3
<!-- Makes: -->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Climb Up ( ^ )

This is to climb out of a nesting.

header>p^div
<!-- Makes: -->
<header>
    <p></p>
</header>
<div></div>

Grouping ( () )

This is to group chunks of elements so you don't need to worry about climbing.

(header>h1)+(nav>a)
<!-- Makes: -->
<header>
    <h1></h1>
</header>
<nav><a href=""></a></nav>

Attributes ( [] )

This is to give custom attributes

img[src="" title="" alt=""]
<!-- Makes: -->
<img src="" alt="" title="">

Text ( {} )

This is to add text to things.

a{This is a link to something}
<!-- Makes: -->
<a href="">This is a link to something</a>

These things can all be used together!

div.container>(header>h1)+(ul>li{blergh}*5)
<!--  Makes: -->
<div class="container">
    <header>
        <h1></h1>
    </header>
    <ul>
        <li>blergh</li>
        <li>blergh</li>
        <li>blergh</li>
        <li>blergh</li>
        <li>blergh</li>
    </ul>
</div>

Action Shortcuts

There are a bunch of these, but some particularly handy ones are:

• cmd + up - remove tag (and its content)
• ctrl + alt + j - find matching tag for selected tag
• shift + cmd + m - merge lines
• cmd + shift + y - evaluate maths expression
• ctrl + d - balance tags (ie, select the tag boundaries from the current caret position)
• cmd + k + u - uppercase selected text
• cmd + k + l - lowercase selected text

Bonuses:

• Luke's power-user zone
• Atom Keyboard shortcuts

Homework

• Famous Scientist's Website