Work on break points..
- .identify your key devices, then
- identify break points..then
- how to fix it.
Mobile first design!
- politically heavy decision use analytics to figure it out.
- what do we show?
responsive design
- media queries
- @media
SharePoint has two things
- publishing sites
- device channels (adaptive)
Bad things for designing:
- More than one master page
- device channels
- device channels for advertising..”You have an iphone!”
Bootstrap
- slim it down, because SharePoint is a cow
- Sass
View-port
meta view-port – gimme width, gimme device width not pixels
publishing site –> site settings search engine optimization settings..include the meta tag..don’t touch master-page.
css preprocessor–> sass
SaSS
background: $highLightColor
separate variables
- branding config file
- partials
- ascii font is pretty cool
- include underscore to make this file a variable file
- benefit of modularizing your code before it is run in the browser, less calls
Now, bootstrap
- terminal is cool
- lets get bootstrap
- less bad sass good
- bootstrap is a cow – 75000 lines of code (much smaller than SharePoint though
- 12 grid is the best
Now SharePoint
- everything gets box sizing border-box
- reset to fix box sizing (go back to
- resets
- % placeholder*
- Mozilla development network to get default values
- reset to block!!!* because of stupid tables in SharePoint
if statements (you can do this
+ adjacent sibling selector
Session materials will be posted here within a few days. Last checked Monday. No materials yet.
http://spexp.me/jun16
Code on git:
http://spexp.me/git