css for geographers - esri › library › userconf › devsummit19 › pape… · google fonts...

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; }


margin: 0;width:

}


margin: 0;width: 100%;

}


margin: 0;width: 100%;height:

}



}

A CSS RuleA CSS Rulehtml, body, #map {


}

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

css for geographers - esri › library › userconf › devsummit19 › pape… · google fonts...

Documents