Don’t go psycho nesting those SASS selectors


Nesting in SASS is wonderful, but also can become a NIGHTMARE! “Simple pictures are best” as one of my kids books always reminds the subjects. As a super simple idea.. Make sure your top level selectors are set before you zero in on specifics.

is an easy way to make sure all those links are white, however, making the “a” selector color at the parent level white would be better and simple to maintain.

Layout your project with the most generic selectors solidified at a parent level and then only overwrite what is necessary, when it is necessary.

SharePoint 2013 Bootstrap Carousel Photo App Library and SPServices


Recently I have been working with quite a few different SharePoint 2013 sites. A few of these have had requests for image sliders. My go to framework for SharePoint 2013 has been the Bootstrap 3 responsive framework, so using the flexible Bootstrap 3 Carousel is a logical choice.

Note! This will only work if you are using the Bootstrap Framework already. If you are not, and would like a content slider check out some other options from Mark Rackley, Ben Tedder or Google.

The Carousel html is simple to setup in a static environment, but when it comes to loading data from a SharePoint 2013 library into the carousel we need to call upon the wonderful SPServices jQuery Library! There is a great youtube video by Mark Rackley showing how to use the Unslider in SharePoint with a different type of library that helped in the creation of this Bootstrap carousel.

There are four parts to this setup. Note! #2 is not a requirement.

  1. Create an App, a Photo Library app and call it HomepagePhotos and add some optimized (I used 970×400 jpg’s) images to it.
  2. Create an Image Rendition (If you can. Read Prerequisites on the MS page.) called HomepagePhotos and give it the dimensions you would like your slider image to be. I have mine set to 970×400 for example. Note the Image Rendition ID. It will probably be 5 if you add a new one.
  3. Create a single JavaScript file in your SiteAssets folder called slider.js and paste the code below into your slider.js file.
  4. Add a Content Editor WebPart to your page and load the ../SiteAssets/slider.js file.

After you have added your CEW and linked to your slider.js file, save your page, check it in and publish it.

If all went well, you will see your Carousel begin. Hopefully this worked well for you. If you ran into issues, maybe I can help! Leave a comment below.

*BONUS! There is a wonderful set of Bootstrap Carousel’s by Rico Loschke on