CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way… SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more. Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint. Key Takeaways : - I will explain what SASS is and where you would use it. - How to use SASS to brand SharePoint without requiring lengthy deployments. - How to create simple Rich Text Editor Styles using mixins and includes. - How to apply a Grid layout and make it Responsive. - How to structure your branding correctly to make it more maintainable. - How CSS 4 fits into the picture and does it make SASS obsolete?

1. Stop your SharePoint CSS becoming a
di-SASS-ter today!
#SPSOslo
Stefan Bauer
October 17th, 2015
SharePoint Saturday
Oslo 2015

2. SharePoint Saturday
Oslo 2015
SharePoint Saturday
Oslo 2015
Thanks to our
Sponsors

3. n8d.at/blog
@StfBauer
Information Architect
Vienna / Austria

4. Stop your SharePoint CSS becoming a
di-SASS-ter today!
- I will explain what SASS is and how you can use it
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?

5. BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING

6. 2013 / 2016
Office 365
Changed SharePoint Branding
2003 2007 / 2010
2013
Inject CSS
154 files
Search & Destroy
Golden Age
Of
Master Page
CSS or JS
Cloud or On-
Premises

7. Old workflow
1. Create a farm solution
2. Add Master Page
3. Add CSS File
4. Deploy
5. Customized CSS File on Server
6. Copy final CSS File to Farm
Solution
7. Deploy Solution
8. Repeat step 1 - 8
PROS:
- Worked pretty well
- Centralized Design Files
- Ghosting
CONS:
- Development on the Server
- Farm solution
- One single CSS File
- Not cloud ready

8. Modularize CSS
Find and identify UI
Elements faster
Divide complexity into
smaller parts
Avoid development
conflicts
Listingofalargecomputerprogram –ArnoldReinhold

9. Avoid Repeating
Tasks
Reusable
components
Better maintainable
code

10. On-premises In the cloud
urce: http://my.n8d.at/1MVjnEV

11. CSS Spaghetti Code

12. Håkon Wium Lie
Father of CSS
First CSS Proposal
10th October 1994

13. Why is CSS the way it is?
CSS stops short of even more powerful features that
programmers use in their programming languages:
macros, variables, symbolic constants, conditionals,
expressions over variables, etc. That is because these
things give power-users a lot of rope, but less
experienced users will unwittingly hang themselves; or,
more likely, be so scared that they won’t even touch CSS.
It’s a balance. And for CSS the balance is different than for
some other things.
– Bert Bos

14. BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING

15. What is SASS
CSS Pre Processor
A layer between style sheets and CSS
faster, more efficient, and easier to
maintain.
MyBranding
.css
Layout
Typo
Colors
Sass (short for Syntactically Awesome Stylesheets)

16. SASS – Choose your style
SASS – Syntax
RUBY based syntax
File extension: .sass
SCSS – Syntax
Like you writing native CSS
Fileextension:.scss

17. SASS – for developer
Hack CSS
Benefitof a programminglanguage
Calculatestheheadlinefontbasedona
dynamicratio.Createafontshorthand
definitionbymergingallthefontpropertieslike
this.
CSS:
font: italic small-caps bold 1em/140%
Helvetica, sans-serif;

18. SASS - Variables

19. W3C - CSS Variables – Specification
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
CSS – Variables
Post CSS – JavaScript

20. SASS – Nesting < Parent

21. SASS – Variables - Data types
• Numbers
1.2, 13, 10px
• Strings with or without quotes
"foo", 'bar', baz
• Colors
blue, #04a3f9, rgba(255, 0, 0, 0.5)
• Booleans
true / false
• Nulls
null – what else
• List of values
separated by spaces or commas
1.5em 1em 0 2em
Helvetica, Arial, sans-serif
• Maps from one value to
another
(key1: value1, key2: value2))

22. SASS - @extend
Define element – reuse it with overrides

23. SASS – Placeholder @extend
“%” acts like a new pseudo selector in addition to
class and id css selector
Extend element templates without extending
compiling the selector itself

24. SASS – Placeholder @extend

25. SASS - @mixin / @include
@mixin
• Re-use whole chunk of CSS
• Acts like functions
• Pass parameter
• Default values for
parameter
@include
• Extend a selector with
CSS

26. SASS - @mixin
CSS 3 transition mixin and browser fallback definitions

27. SASS - @include

28. @import – CSS vs SASS
CSS
• Each file will be
requested separately
• Slow down UI
• Don’t use it
SASS
• Compiles partials it into
CSS file
• Supports CSS import
• Allows to structure the
design

29. @import – CSS vs SASS
Filename: _yourvariables.scss
Use in SASS File:
@import ‘yourvariables’
@import ‘core/mixins’
Don’t forget the underscore!

31. Why SASS?
• CSS with superpower!
• Clean structured code
• Reusable components
• Consistency
• Many Extensions
Architecture your CSS:
• OOCSS
Object oriented CSS
• SMACSS
Scalable and Modular Architecture for CSS
• BEM
Block Element Modifier
Blog post:
Organizing CSS: OOCSS, SMACSS, and BEM

32. gem install sassSASS in Visual Studio
VS 2013 – Updated 2
Tryout & Learn
http://sassmeister.com

33. Yeoman
Runs on all major platforms (Windows, Mac, Linux)
Web related template engine

34. Yeoman – recommended templates
 generator-webapp
basic web application template
 generator-angular
angular web application template
 Microsoft Office Project Generator - YO OFFICE!

35. Yeoman – generator-webapp
Webserver (Node.js)
- Integrated SASS support
- Auto-compile SASS to CSS
- Auto reload web page
- CSS can be integrated into SharePoint
on-premise or Office 365

36. Work Locally
Inject CSS and JS
No deployment
downtime
Use JSOM / Rest API
Like an Add-in (App)
Full SASS Support
Works for Office 365 and
on-premises

37. Work Locally
- Integrate Yeoman into SharePoint
- Font reset in SharePoint
- Rich Text Editor mixin
DEMO

38. Work Locally – more information
Getting started
How I develop in SharePoint
and Office 365 now
How to use CSS and
JavaScript files from Yeoman
directly in SharePoint

39. Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg

40. 1. Define a Grid Layout
2. Define Media Breakpoints
3. Define how the content look and behave
Responsive Web Design

42. Susy Grid
Your Layout - our math
- Calculate grid
- Easy to use
- Built on SASS
- Easy SharePoint integration
- Susy Grid / Tutorials
- SASS Mediaqueries
Project on github

43. BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING

44. We’re not designing pages,
we’re designing systems of
components.
Stephen Hay

45. Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your clients’ needs. –
Dave Rupert

46. MICRO BRANDING
JSLink, Display Templates and Script Embed
Web Parts allow you to add additional styles to
SharePoint

47. Modern Design Style Guides
- HTML based
- Dynamic Style Documentation
- Allow to build new UI Components
- Allows teams to work better together

48. Atomic Web Design – Brad Frost

51. http://patternlab.io

52. Pattern Lab brought to SharePoint
DEMO

53. Recap – SASS
• SASS helps you to write better CSS
– Keep an eye on the source code
– Well structured
• Supports DRY (Don’t repeat yourself) your
development

54. Recap - Create your own style guide
• Sketch in HTML first
• Create reusable components
• Document all design assets
• Add things you need rather than use a framework

55. Questions?
@StfBauer
https://at.linkedin.com/in/stfbauer

56. Get stamps from all the sponsors,
so make sure to visit them
Deposit the passport to enter the
prize raffle
Good luck!
The SPSOslo Passport

57. FREE BEER!
Make sure to get your voucher
Network and have fun with your
colleagues and mingle with our
great speaker lineup.
SharePint sponsored by

58. They help us improve for SharePoint Saturday 2016!
Remember to evaluate our sessions