Intro to CSS for Geographers

Patrick Arlt | @patrickarlt

http://bit.ly/1Oh4BDd

Origin Story

Lots of tools. Very little fundamentals.

This talk is all fundamentals

First Some Notes

Lots of supplimental info in these slides. Designed to help you keep learning beyond this talk.

CSS is Hard

Closer to art then computer science

Lots of hard, unintuitive concepts

It has taken me years to amass this knowlage

Lets do stuff with CSS!

Customize Esri Apps

Use Frameworks

Build Web Pages

Make Apps

Basics

"rule"

html, body, #map {
  margin: 0;
  width: 100%;
  height: 100%;
}

"selector"

html, body, #map
 
 
 
 

"declaration"

html, body, #map {
 
 
 
}

"property"

html, body, #map {
  margin:
 
 
}

"value"

html, body, #map {
  margin: 0;
 
 
}

"property"

html, body, #map {
  margin: 0;
  width:
 
}

"value"

html, body, #map {
  margin: 0;
  width: 100%;
 
}

"property"

html, body, #map {
  margin: 0;
  width: 100%;
  height:
}

"value"

html, body, #map {
  margin: 0;
  width: 100%;
  height: 100%;
}

"rule"

html, body, #map {
  margin: 0;
  width: 100%;
  height: 100%;
}

How CSS Works

Cascading Style Sheets

Cascading Style Sheets

Styles from different sources cascade and coalesce into the final styles for an HTML tag.

A typical cascade

• Browser default stylesheet
• User defined stylesheets
• Stylesheets you include with <link>
• <style> tag
• Inline <style> attributes <div style="...">
• CSS values with !important

CSS Specificity

1. !important
2. Inline style <div style="...">
3. <style> and <link> tags
4. Selector determine specificity

Selector Specificity

1. id - #map
2. class - .container
3. tag - body

CSS Explain

In a specificity tie the last loaded rule wins.

Inspecting CSS

Right click on something you want to change click "Inspect Element"

Building our App

Block vs Inline

• The Difference Between “Block” and “Inline”
• Block-level elements
• Inline elements
• Learn CSS Layout: the "display" property

Units

• Full unit reference
• The Lengths of CSS
• Unit and Values - QuirksMode

Floats

• All About Floats
• CSS Floats 101
• Learn CSS Layout: float

Problems with Floats

Clearing Floats

• Learn CSS Layout: clear

Clearfix

• Learn CSS Layout: clearfix

The Box Model

• The CSS Box Model
• Introduction to the CSS box model
• Learn CSS Layout: the box model

Box Sizing

• Learn CSS Layout: box-sizing
• * { Box-sizing: Border-box } FTW
• Box Sizing
• box-sizing

Flexbox

• Flexbox Froggy
• A Visual Guide to CSS3 Flexbox Properties
• Learn CSS Layout: flexbox
• Can I Use: flexbox
• A Complete Guide to Flexbox
• Using CSS flexible boxes

Margin, Padding and Borders

• Mastering margin collapsing
• What You Should Know About Collapsing Margins
• Compare block elements to pictures hanging on a wall

Media Queries and Responsive Design

• Responsive design gallery
• Using media queries
• Media Queries for Standard Devices
• Learn CSS Layout: media queries

Positioning

• Learn CSS Layout: position
• position

Typography (Choosing Fonts)

• Google Fonts
• Google Web Fonts Typographic Project
• Font Pair
• Font tool roundup

Typography (Sizing Type)

• TypeScale
• A More Modern Scale for Web Typography

Adding Color

• Flat UI Colors
• Calcite Web Colors
• Color Pairing Matrix
• Adobe Kuler
• Color Lovers

Adding JavaScript

Browser Compatibility

Sometime browsers will add experimental or early support for a new standard. They will often add a prefix like -webkit-, -moz- or -ms- to a property or value.

Sites like Can I Use? or MDN to check if browsers support a specific property.

Tools like Autoprefixer to add prefixes automatically.

More Browser Compatibility

Remember Microsoft only supports IE 11 offically now. All other versions are not supported and might have security bugs.

Scary!

Keep Learning!

http://bit.ly/1Oh4BDd