SPTechCon Boston June 2016 Bootstrap Session Recap

“Bootstrap” Responsive SharePoint, the RIGHT Way

Let’s face it, SharePoint isn’t very responsive. However you can make it responsive using popular tools that all the cool kids are talking about.

An Intro to Responsive Design

This SPTechCon Boston 2016 session started off with a discussion about what is responsive design and the differences between liquid
, static
, adaptive
and responsive design
. Key takeaways:

SharePoint is a liquid design up to a point. There are several min-width properties in the CSS that prevents SharePoint from condensing past a certain point.

Most people switch to a static (fixed-width) design because it plays well with larger displays but the downside is that it isn’t mobile friendly.

Adaptive design relies on different sets of HTML and CSS to reconfigure the web site layout based on the device width. This is all handled server-side and can be done in SharePoint using Device Channels.

Responsive design has one set of HTML and then variations of the CSS that reflows the web site layout based on the device width.

Resources:

SASS

Next we dove into an intro for SASS
(Syntactically Awesome Style Sheets), a CSS preprocessor that introduces things like variables, nesting, mixins, inheritance and other tricks that make writing CSS easier and more efficient. Key takeaways:

You can use SASS with SharePoint.

You can use SASS with Bootstrap.

SASS will streamline your code and help you avoid repetition and tedious updates in the future.

Can use a tool like Prepros
to compile SASS.

Resources:

Bootstrap

Once you have SASS installed and are ready to go, you can tackle Bootstrap, the most popular kid on the playground. The key to using Bootstrap with SharePoint is to not think like you would for a regular web site. With that approach, integrating Bootstrap is a tedious and nearly impossible task with SharePoint.

But if you remember this key point, you can marry Bootstrap with SharePoint with lot of success…. just take the CSS from Bootstrap and apply to existing markup in SharePoint.
Yup, that’s it!

Just use your already well-honed copy/paste skills and treat Bootstrap like other code bits that you come across and want to implement into SharePoint.

Resources

Where to Go Next

If you want to take this approach to the next level, we spend three whole days making SharePoint responsive in our SharePoint 2013 Responsive Design Experience course
. This is an online course and in addition to being taught live, all sessions are recorded and provided to you after class. Go ahead and check out ourcourse schedule for the next delivery dates.