- The document discusses how to use SASS (Syntactically Awesome StyleSheets) to structure CSS for SharePoint branding in a more maintainable way. It explains what SASS is, how to use variables, nesting, mixins and includes in SASS to organize CSS. It also discusses how to create a responsive grid layout and modular components using SASS and tools like Susy grid.

1. Stop your SharePoint CSS becoming a
di-SASS-ter today!
#SPSBE12
Stefan Bauer
April 18th, 2015

2. PlatinumGoldSilver
Thanks to our sponsors!

3. stefan.bauer@n8d.at
@StfBauer
www.n8d.at
Blog

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. SharePoint 2003

6. SharePoint 2007
Customizing SharePoint Themes with SharePoint Designer 2007
and IE8 – Kris Evans

7. SharePoint 2010

8. SharePoint 2013

9. SharePoint 2013 – The other options
 Design Manager
 Map a network drive
 Map a network drive in Office 365 - fails
 Support Windows 10  but still slow
 Apps
 Themes and Theme Manager
 SharePoint Color Palette Tool

10. On-premises
https://www.flickr.com/photos/torkildr/3462606643/t
In the cloud

11. Brand Faster
http://media.giphy.com/media/11M1k4fIwVqPF6/giphy.gif

12. Modularize CSS
Especially for SharePoint:
Define CSS  Reuse it for
different purposes
e.g. SharePoint Branding and Apps
Listing of a large computer program – Arnold Reinhold

13. - Better structured CSS
- Avoid Repeating Tasks

14. Sass is the most mature, stable, and powerful professional
grade CSS extension language in the world.

15. What is SASS
CSS Pre-processor Engine
- Built on RUBY
MyBranding.css
Layout
Typo
Colors

16. VS 2013 – Updated 2
http://sassmeister.com

17. Why SASS?
 Feels like writing native CSS
 Structure the code
 Support to define reusable components
DON’T repeat yourself
 Reduce complexity of CSS

18. CSS Spaghetti Code

19. SASS – for developer
Hack CSS
font: italic small-caps bold 1em/140%
Helvetica, sans-serif;

20. SASS – Choose your style
SASS – Syntax
The old school RUBY based syntax
File extension: .sass
SCSS – Syntax
Do it like you write CSS
File extension: .scss

21. SASS – Nesting - Compiled

22. SASS – Nesting < Parent

23. SASS - Variables

24. W3C - CSS Variables – Specification
element {
--main-bg-color: brown;
}
element {
background-color: var(--main-bg-color);
}
CSS – Variables

25. 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

26. SASS – Variables - Datatypes
• 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))

27. SASS – Maps

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

29. SASS – Placeholder @extend

30. SASS – Placeholder @extend
“%” functions as a pseudo selector in addition to class
and id css selector
Extend element templates without extending
compiling the selector itself

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

32. SASS - @mixin

33. SASS - @include

34. http://yeoman.io
Development
stack to quickly
build high quality
web applications
VS 2013 – Updated 2

35. Yeoman

36. Yeoman
Webserver (Node.js)
- Integrated SASS support
- Auto-compile SASS to CSS
- Auto reload web page
- CSS is integrated into SharePoint or Office 365

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

38. - Define and create Grid Layout
- Define Media Breakpoints
Responsive Web Design

40. Susy Grid
Your Layout - our math
Susy Grid
Tutorials

41. Structure your CSS
and branding

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

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

44. Modern Style Guides
- HTML based
- Dynamic Style Documentation
- Allow to build and document new UI Components
- Allow teams to build new components

45. Atomic Web Design – Brad Frost
http://bradfrost.com/blog/post/atomic-web-design/

48. http://patternlab.io

49. Thank you!