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
Post on 01-Sep-2019
3 Views
Preview:
Transcript
CSS For GeographersPatrick Arlt | @patrickarlt
Slides: http://bit.ly/2le4IJe
This talk is all fundamentals.
First Some NotesLots of supplemental info in these slides.
Designed to help you keep learning beyond this talk.
CSS is HardCloser to art then computer science
Lots of hard, unintuitive concepts
It has taken me years to amass this knowledge
Lets do stuff with CSS!Customize Esri Apps
Use Frameworks
Build Web Pages
Make Apps
Basics
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">
What does CSS look like?
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%; }
A CSS Rule
html, body, #map { margin: 0; width: 100%; height: 100%; }
How does CSS work?The "C" is for Cascading
Cascading Style SheetsStyles from different sources cascade and coalesce into the �nal styles for
the HTML tags that match their selectors.
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
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
Selector Speci�city
1. #foo - <div id="foo">
2. .foo - <div class="foo">
3. tag - <div>
CSS Explain
In a speci�city tie the last loaded rule wins.
In PracticeRight click on something you want to change click "Inspect Element"
Explore a Storymap
Lets Build an App!
vs Block InlineThe Difference Between “Block” and “Inline”
Block-level elements
Inline elements
Learn CSS Layout: the "display" property
UnitsFull unit reference
The Lengths of CSS
Unit and Values - QuirksMode
FloatsAll About Floats
CSS Floats 101
Learn CSS Layout: �oat
Clearing FloatsLearn CSS Layout: clear
Clear�xLearn CSS Layout: clear�x
The Box ModelThe CSS Box Model
Introduction to the CSS box model
Learn CSS Layout: the box model
Box SizingLearn CSS Layout: box-sizing
* { Box-sizing: Border-box } FTW
Box Sizing
box-sizing
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
Margin, Padding and BordersMastering margin collapsing
What You Should Know About Collapsing Margins
Compare block elements to pictures hanging on a wall
Media Queries and Responsive DesignResponsive design gallery
Using media queries
Media Queries for Standard Devices
Learn CSS Layout: media queries
PositioningLearn 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 ColorFlat UI Colors
Calcite Web Colors
Color Pairing Matrix
Adobe Kuler
Color Lovers
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
More Browser CompatibilityRemember Microsoft only supports IE 11 of�cially now. All other versions
are not supported and might have security bugs.
Scary!
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
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
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!
top related