45
CSS for GeographersCSS for Geographers
This talk is all fundamentals.This talk is all fundamentals.
First Some NotesFirst Some NotesLots of supplemental info in these slides.
Designed to help you keep learning beyond this talk.
Pretty much everything is a link.
Slides http://bit.ly/2CF5kQw
CSS is HardCSS is HardCloser to art then computer scienceDesign AND developmentLots of unintuitive conceptsIt has taken me years to amass this knowledgeChanges somewhat frequentlyBest practices change
Lets do stuff with CSS!Lets do stuff with CSS!Customize Esri AppsUse FrameworksBuild Web PagesMake Apps
BasicsBasics
Where does CSS go?Where does CSS go?Inside a <style> tag.
Inside a .css file that is loaded with a <link> tag.
In the <head> tag of your .html files.
<style>/* Put CSS here*/</style>
<link href="my-css-file.css" rel="stylesheet" type="text/css"
What does CSS look like?What does CSS look like?html, body, #map {
margin: 0;width: 100%;height: 100%;
}
SelectorSelectorhtml, body, #map
DeclarationDeclarationhtml, body, #map { }
PropertyPropertyhtml, body, #map {
margin: }
ValueValuehtml, body, #map {
margin: 0; }
PropertyPropertyhtml, body, #map {
margin: 0;width:
}
ValueValuehtml, body, #map {
margin: 0;width: 100%;
}
PropertyPropertyhtml, body, #map {
margin: 0;width: 100%;height:
}
ValueValuehtml, body, #map {
margin: 0;width: 100%;height: 100%;
}
A CSS RuleA CSS Rulehtml, body, #map {
margin: 0;width: 100%;height: 100%;
}
How does CSS work?How does CSS work?
How does CSS work?How does CSS work?The "C" is for Cascading
CascadingCascading Style Sheets Style SheetsStyles from different sources cascade and coalesce into the final styles for the
HTML tags that match their selectors.
A Typical CascadeA Typical CascadeBrowser default stylesheetUser defined stylesheetsStylesheets you include with <link><style> tags
Inline <style> attributes <div style="...">CSS values with !important
CSS SpecificityCSS SpecificityWhen properties collide specificity determines which property wins.
Rules with !important1.
Inline styles <div style="...">2.
<style> and <link> tags3.
Selector specificity4.
Selector SpecificitySelector Specificity#foo - <div id="foo">1.
.foo - <div class="foo">2.
tag - <div>3.
CSS Explain
In a specificity tie the last loaded rule wins.
In PracticeIn PracticeRight click on something you want to change click "Inspect Element"
Explore a Storymap
Lets Build an App!Lets Build an App!
vs vs BlockBlock InlineInlineThe Difference Between “Block” and “Inline”Block-level elementsInline elementsLearn CSS Layout: the "display" property
UnitsUnitsFull unit referenceThe Lengths of CSSUnit and Values - QuirksMode
Bonus Demo:
Bonus Demo #2:
FloatsFloatsAll About FloatsCSS Floats 101Learn CSS Layout: float
Problems with Floats
Clearing Floats
The Box ModelThe Box ModelThe CSS Box ModelIntroduction to the CSS box modelLearn CSS Layout: the box model
Box SizingBox SizingLearn CSS Layout: box-sizing* { Box-sizing: Border-box } FTWBox Sizingbox-sizing
FlexboxFlexboxFlexbox FroggyA Visual Guide to CSS3 Flexbox PropertiesLearn CSS Layout: flexboxCan I Use: flexboxA Complete Guide to FlexboxUsing CSS flexible boxes
CSS GridCSS GridGrid GardenA Complete Guide to GridGrid by ExampleDebugging Grid LayoutsIntro to CSS Grid: Jen Simmons
Bonus Demo: CSS Grid Template Areas
Margin, Padding and BordersMargin, Padding and BordersMastering margin collapsingWhat You Should Know About Collapsing MarginsCompare block elements to pictures hanging on a wall
Media Queries and ResponsiveMedia Queries and ResponsiveDesignDesign
Responsive design galleryUsing media queriesMedia Queries for Standard DevicesLearn CSS Layout: media queries
PositioningPositioningLearn CSS Layout: positionposition
Typography (Choosing Fonts)Typography (Choosing Fonts)Google FontsGoogle Web Fonts Typographic ProjectFont PairFont tool roundup
Typography (Sizing Type)Typography (Sizing Type)TypeScaleA More Modern Scale for Web Typography
Adding ColorAdding ColorFlat UI ColorsCalcite Web ColorsColor Pairing MatrixAdobe KulerColor Lovers
~120 lines of CSS, ~30 lines of JS.
Adding JavaScriptAdding JavaScriptBonus Demo: w/ CSS Grid
Browser CompatibilityBrowser CompatibilitySites like or to check if browsers support a specific property.
Sometimes experimental or partially supports CSS properties will require a-webkit-, -moz- or -ms- prefix. Tools like to add prefixes
automatically.
was introduced with CSS grid to check for support of new features.
Can I Use? MDN
Autoprefixer
@supports
More Browser CompatibilityMore Browser CompatibilityRemember Microsoft only supports IE 11 officially now. All other versions are
not supported and might have security bugs.
Best PracticesBest PracticesKeep selectors as simple as possibleDon't use tools until you are familiar with the basicsAdd tools when you feel limited or want more productivityDon't worry so much about browser compatibilityWatch out for the size of web fontsAvoid floats for layout, try using Flexbox and GridYou can learn A LOT with inspector
Slides at http://bit.ly/2T4zaKJ
