css for geographers - recent...
TRANSCRIPT
![Page 1: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/1.jpg)
CSS For GeographersPatrick Arlt | @patrickarlt
Slides: http://bit.ly/2le4IJe
![Page 2: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/2.jpg)
This talk is all fundamentals.
![Page 3: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/3.jpg)
First Some NotesLots of supplemental info in these slides.
Designed to help you keep learning beyond this talk.
![Page 4: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/4.jpg)
CSS is HardCloser to art then computer science
Lots of hard, unintuitive concepts
It has taken me years to amass this knowledge
![Page 5: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/5.jpg)
Lets do stuff with CSS!Customize Esri Apps
Use Frameworks
Build Web Pages
Make Apps
![Page 6: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/6.jpg)
Basics
![Page 7: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/7.jpg)
Where does CSS go?
Inside a <style> tag.
Inside a .css �le that is loaded with a <link> tag.
In the <head> tag of your .html �les.
<link href="file.css" rel="stylesheet" type="text/css">
![Page 8: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/8.jpg)
What does CSS look like?
html, body, #map { margin: 0; width: 100%; height: 100%; }
![Page 9: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/9.jpg)
Selector
html, body, #map
![Page 10: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/10.jpg)
Declaration
html, body, #map { }
![Page 11: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/11.jpg)
Property
html, body, #map { margin: }
![Page 12: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/12.jpg)
Value
html, body, #map { margin: 0; }
![Page 13: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/13.jpg)
Property
html, body, #map { margin: 0; width: }
![Page 14: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/14.jpg)
Value
html, body, #map { margin: 0; width: 100%; }
![Page 15: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/15.jpg)
Property
html, body, #map { margin: 0; width: 100%; height: }
![Page 16: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/16.jpg)
Value
html, body, #map { margin: 0; width: 100%; height: 100%; }
![Page 17: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/17.jpg)
A CSS Rule
html, body, #map { margin: 0; width: 100%; height: 100%; }
![Page 18: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/18.jpg)
How does CSS work?The "C" is for Cascading
![Page 19: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/19.jpg)
Cascading Style SheetsStyles from different sources cascade and coalesce into the �nal styles for
the HTML tags that match their selectors.
![Page 20: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/20.jpg)
A Typical Cascade
Browser default stylesheet
User de�ned stylesheets
Stylesheets you include with <link>
<style> tags
Inline <style> attributes <div style="...">
CSS values with !important
![Page 21: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/21.jpg)
CSS Speci�cityWhen properties collide speci�city determines which property wins.
1. Rules with !important
2. Inline styles <div style="...">
3. <style> and <link> tags
4. Selector speci�city
![Page 22: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/22.jpg)
Selector Speci�city
1. #foo - <div id="foo">
2. .foo - <div class="foo">
3. tag - <div>
CSS Explain
![Page 23: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/23.jpg)
In a speci�city tie the last loaded rule wins.
![Page 24: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/24.jpg)
In PracticeRight click on something you want to change click "Inspect Element"
Explore a Storymap
![Page 25: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/25.jpg)
Lets Build an App!
![Page 26: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/26.jpg)
vs Block InlineThe Difference Between “Block” and “Inline”
Block-level elements
Inline elements
Learn CSS Layout: the "display" property
![Page 27: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/27.jpg)
UnitsFull unit reference
The Lengths of CSS
Unit and Values - QuirksMode
![Page 28: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/28.jpg)
FloatsAll About Floats
CSS Floats 101
Learn CSS Layout: �oat
![Page 30: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/30.jpg)
Clearing FloatsLearn CSS Layout: clear
![Page 31: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/31.jpg)
Clear�xLearn CSS Layout: clear�x
![Page 32: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/32.jpg)
The Box ModelThe CSS Box Model
Introduction to the CSS box model
Learn CSS Layout: the box model
![Page 33: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/33.jpg)
Box SizingLearn CSS Layout: box-sizing
* { Box-sizing: Border-box } FTW
Box Sizing
box-sizing
![Page 34: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/34.jpg)
FlexboxFlexbox Froggy
A Visual Guide to CSS3 Flexbox Properties
Learn CSS Layout: �exbox
Can I Use: �exbox
A Complete Guide to Flexbox
Using CSS �exible boxes
![Page 35: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/35.jpg)
Margin, Padding and BordersMastering margin collapsing
What You Should Know About Collapsing Margins
Compare block elements to pictures hanging on a wall
![Page 36: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/36.jpg)
Media Queries and Responsive DesignResponsive design gallery
Using media queries
Media Queries for Standard Devices
Learn CSS Layout: media queries
![Page 37: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/37.jpg)
PositioningLearn CSS Layout: position
position
![Page 38: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/38.jpg)
Typography (Choosing Fonts)Google Fonts
Google Web Fonts Typographic Project
Font Pair
Font tool roundup
![Page 39: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/39.jpg)
Typography (Sizing Type)TypeScale
A More Modern Scale for Web Typography
![Page 40: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/40.jpg)
Adding ColorFlat UI Colors
Calcite Web Colors
Color Pairing Matrix
Adobe Kuler
Color Lovers
![Page 42: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/42.jpg)
Browser CompatibilitySometime browsers will add experimental or early support for a new
standard. They will often add a pre�x like -webkit- , -moz- or -ms-to a property or value.
Sites like or to check if browsers support a speci�cproperty.
Can I Use? MDN
Tools like to add pre�xes automatically.Autopre�xer
![Page 43: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/43.jpg)
More Browser CompatibilityRemember Microsoft only supports IE 11 of�cially now. All other versions
are not supported and might have security bugs.
Scary!
![Page 44: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/44.jpg)
Best PracticesKeep selectors as simple as possible
Don't use tools until you are familiar with the basics
Watch out for the size of web fonts
![Page 45: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/45.jpg)
More _______ for GeographersGit/Github for Geographers
Wednesday 5:30pm, Santa Rosa
JavaScript for Geographers
Thursday 9am, Demo Theater 1 - Oasis 1
CSS for Geographers
Friday 1pm, Pasadena-Sierra-Ventura
![Page 46: CSS for Geographers - Recent Proceedingsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int_36.pdf · CSS is Hard Closer to art then computer science Lots of hard, unintuitive](https://reader031.vdocument.in/reader031/viewer/2022011810/5e01697bcc50cb7ab46c64cd/html5/thumbnails/46.jpg)
Thank You!Slides - http://bit.ly/2le4IJe
Leave Feedback
Download the Esri Events App
Go to Dev Summit
Select "CSS for Geographers"
Leave a Review!