Intro to CSS for Geographers

View Github Repository Open presentation in a new window

patrickarlt

See all presentation from patrickarlt

Intro to CSS for Geographers

1 2

intro-to-css-dev-summit-2016

CSS Frameworks like Bootstrap are great but knowing some basic modern CSS techniques can you be successful in debugging and customizing your applications. Learn the basics of floats, positions, media queries and more to really take control of your applica

On Github patrickarlt / intro-to-css-dev-summit-2016

Intro to CSS for Geographers

Patrick Arlt | @patrickarlt

http://bit.ly/1Oh4BDd

Origin Story

Talk with John last year…

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

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

Selector Specificity

id - #map class - .container 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"

Explore a storymap

Building our App

Block vs Inline

Units

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

Floats

Problems with Floats

Clearing Floats

Clearfix

The Box Model

Box Sizing

Flexbox

Margin, Padding and Borders

Media Queries and Responsive Design

Positioning

Typography (Choosing Fonts)

Typography (Sizing Type)

Adding Color

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

Intro to CSS for Geographers Patrick Arlt | @patrickarlt http://bit.ly/1Oh4BDd