29 Jun

“Bootstrap” Responsive SharePoint, the RIGHT Way

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