Category Archives: User Interface

Using SASS with SharePoint

If you do any kind of development and haven’t heard of SASS, you must be living under a rock! SASS has taken the CSS world by storm (which I use the SCSS syntax but for familiarity I’ll reference SASS, and this solution should work with either syntax). It has brought us variables, functions with logic (mixins), selector inheritance, breaking up your CSS files (partials) and a whole lot more.  If you work with SharePoint you’re probably feel like you’re the guy at the party who doesn’t get to hang out with the cool kids because you don’t get to use these technologies. Well, no more!

I was determined to find a way to use the power of SASS with SharePoint. It took a little experimentation, but the process is actually pretty easy. It even works with SharePoint 2010 and 2013 and even Office 365! Here is how I got it to work in each environment.

SharePoint 2013: On-Prem and Office 365

My astute readers are probably thinking: “I bet he’s using design manager.” You’d be right. The process is pretty simple. We are going to use an application called Prepos that handles all the compilation of the SASS files (and if you’re adventurous other compiled languages like CoffeeScript). The app is free to use with pro features for a purchase, but we won’t need the pro features for this post.

  1. Map a network drive to your /_catalogs folder. Design manager will give you that URL if you go to Site Settings » Design Manager » Upload Design Files (if you don’t see a Design Manager link you either don’t have the permissions or publishing is not enabled). If you don’t know how to mount a network drive see these instructions from Microsoft. (As a note, I’m also an avid Mac fan, but I doubt many people would even want to do this on their Macs.)
  2. Download and install Prepos.
  3. Create a folder locally for your project, and create a file inside of it. You can name it whatever you want, but be sure it has a .scss extension is using SCSS or .sass if using the original SASS syntax (if you don’t see extensions you can enable them in Windows Explorer).
  4. Open Prepos and drag your project folder into the left hand side of the application. You should see your folder name listed (in my case it’s “sp-sass”).
Prepos Folder Listing

Prepos Folder Listing

  1. If you do it correctly Prepos will recognize your SASS file and list it in the center column. Hover over the output link to change the output path. Here you will browse to your network drive and place it where you want it. Name the file as well (in my case it’s “sp-sass.css”)
Change Prepos Output Path

Change Prepos Output Path

  1. Now we need to set the project URL for live refresh to work. Live refresh does what it sounds like: after you save your SASS file, Prepos will automatically compile and refresh your browser. Note that live refresh only works in Chrome for the free version using a Chrome browser extension. The pro version is supposed to allow it to work in other browsers, but it seemed to work with my default browser. Your mileage may vary. To set the project URL click the cog in the lower left of the folder listing.
Project Options

Project Options

  1. You will then be presented with a modal dialog where you can check “Live Refresh” and “Use Custom server.” Put in the URL for your SharePoint server. Then click “Close.”
Custom Server URL

Custom Server URL

  1. We need to compile our SASS file for the first time. To do this, right click on your SASS file in the file listing and click “Compile File.” Now you can open up your server through Prepos by clicking the globe icon next to the project options icon we clicked earlier.  Be sure to check your file in Windows Explorer that it compiled correctly. Also, from now on just make changes to your SASS file in your favorite editor, save it, and Prepos will automatically compile it and refresh your browser! If you have any SASS syntax errors Prepos will alert you, and you can look at the output log.
Compiling for the First Time

Compiling for the First Time

As a final note, I had a problem getting live refresh to work with Office 365 but none for on-prem. Prepos needs to be able to send HTTP notification headers and perhaps Office 365 doesn’t allow this? Regardless, it still compiles just fine.

SharePoint 2010

SharePoint 2010 will use all the same steps as above, but instead of using Design Manager to mount access to all your design assets, you can mount any library. In this case we will use the Style Library. When you go into the library you will be presented with an option underneath the “Library” tab in the ribbon called “Open with Explorer.” Use that URL to mount a network drive.

Open with Explorer

Open with Explorer

You could also use this methodology for either 2013 or 2010 and publish files locally to the /_layouts folders if you so desired. In that case you would simply change the output path to the right folder on the server.

Conclusion

To me this is very exciting, and it really opens up a whole new world of CSS usage with SharePoint. I look forward to using this going forward and contributing to the larger SASS community. I will also be posting more of what I learn about SASS practices and usage on this blog in the future.

5 Replies

Understanding Hardware and CSS Pixels

Many people are confused on why the stated resolution for a device like the iPhone doesn’t match to a viewport size reported by the browser for media queries. The difference is between hardware pixels and CSS (reference) pixels reported by the browser.

It has to do ultimately with pixel density, so even though the iPhone has a portrait reported width of 640 pixels by Apple (for iPhones greater than the iPhone 4), your media query will only respond to 320 pixels (although remember to use relative media queries and only around content not devices).

Here are some articles to help you understand the topic. The first is the most important, and the other two just elaborate on the issues.

Here are two references on popular device reported resolutions and viewports.

Targeting viewport widths and targeting high-resolution displays are also two different issues. There are ways to determine high-resolution (HiDPI/“retina”) displays in case you want to add high-resolution imagery, and here is a good media query to use.

Leave a reply

Distinguishing Between Ornamental and Functional Skeuomorphism

By the amount of times I’ve read the word “skeuomorphism” in the last year, it’s easy to assume the world has taken an internet in rather ethereal UX language. But of course that’s not the case. I think more tech journalists use it because they feel it gives them a sense of authority. In fact, the only thing it does is to perpetuate a common misunderstanding of the benefits of skeuomorphism, and that happens when you only focus on one implementation of this concept.

Most of the conversation has been around skeuomorphism in iOS. You can even see the Google search trends for “skeumorphism,” and it’s directly tied to the uptick in the iOS conversation. However, when most people used that term it is used to mean “ornamental skeuomorphism.” Let’s distinguish between the two for some much needed clarity.

Ornamental Skeuomorphism

Ornamental skeuomorphism is the use of real world textures and designs to mimic a physical interface. It is done purely for ornamentation and not functional. Here are a couple of examples.

< iOS 6 Calendar: Here you see the appearance of a physical calendar that adds nothing to the experience. (The page flipping animation in this app and iBooks serves more as a functional role, albeit a poor one.)

iPad Calendar in < iOS 6

iPad Calendar in < iOS 6

Same with an iOS app called iStudiez Pro.

iStudiez Pro (iOS App)

iStudiez Pro (iOS App)

You can see there is nothing functional about the look. It’s only made to imitate its real-life counterpart.

Functional Skeuomorphism

Functional skeuomorphism is the use of real world analogies and behaviors to help the user match a physical appearance with a digital one. The thought was that skeuomorphic functions can assist in the transition from physical to digital.

The most obvious and well used is the folder paradigm introduced way back in the early GUI days. The analogy was used to help transfer people’s thinking of storing objects in a container (the file folders). This comes from the filing cabinet in the physical world. Here is one example of this in Windows (and it’s similar in OS X).

Folders in Windows

Folders in Windows

Here is an example of “folders” in iOS that have no ornamental skeuomorphism to match the functional use. (As as side note, I wish they would’ve called these “stacks” from OS X, but you can see now why they kept the name.)

Folders in iOS

Folders in iOS

Functional skeuomorphism has other application outside of digital interfaces. Does your car really need to beep when you lock/unlock it? Of course not, but it fits our mental model of a confirmation noise, and it is, I think, appropriate (think of the noise that bolt locks made when locking and unlocking).

Skeuomorphic Iconography

An interesting application is in the realm of iconography. It’s has been an area ripe to marry functional and ornamental skeuomorphism although it probably leans more heavy on the ornamental side. There have been good critiques against using dated analogies such as the next example.

Here is the often debated floppy disk save icon in the very recent Word 2013.

Save Icon in Word 2013

Save Icon in Word 2013

I read a usability report recently on how quickly users still identified the floppy disk as a “save action.” What was supposed to only have a temporary significance has now crossed over into becoming a convention despite the fact a large majority of people using computers today have never had to use a floppy disk. When designing these icons you have ask if the relationship between the signifier and the signified is still appropriate. For more details see this Boxes and Arrows post: Optimizing UI icons for faster recognition.

Conclusion

So let’s remember there are more uses for skeuomorphism beyond green felt in an iOS app, and to write off the approach entirely is foolish. Through good user research there maybe value to be found in it to ensure we match mental models. Just remember to constantly evaluate your use of skeuomorphism to ensure its relevancy.

Leave a reply
  1. Pages:
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. ...
  10. 16