Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Stop your SharePoint CSS becoming a di-SASS-ter today!
Stefan Bauer
#SPSMUC18, October 10th, 2015
n8d.at/blog
@StfBauer
Information Architect
Vienna / Austria
Stop your SharePoint CSS becoming a
di-SASS-ter today!
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
2013 / 2016
Office 365
Changed SharePoint Branding
2003 2003 / 2010
2013
Inject CSS
154 files
Search & Destroy
Golden Age
...
Old workflow
PROS
CONS
Modularize CSS
Find and identify UI Elements
faster
Divide complexity into smaller
parts
Avoid development
conflicts
Listi...
Avoid Repeating Tasks
Reusable components
Better maintainable
code
On-premises In the cloud
urce: http://my.n8d.at/1MVjnEV
CSS Spaghetti Code
Why is CSS the way it is?
of even more that
programmers use in their macros,
variables, symbolic constants, conditionals, ...
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
What is SASS
MyBranding.cs
s
Layout
Typo
Colors
Sass (short for Syntactically Awesome Stylesheets)
SASS – Choose your style
SASS – Syntax
RUBY based syntax
File extension: .sass
SCSS – Syntax
Like you writing native CSS
F...
SASS – for developer
Benefit of a programming language
Calculates the headline font based on a
dynamic ratio. Create a fon...
SASS - Variables
W3C - CSS Variables – Specification
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#fo...
SASS – Nesting < Parent
SASS – Variables - Data types
• Numbers
• Strings
• Colors
• Booleans
• Nulls
• List of values
separated by spaces or comm...
SASS - @extend
Define element – reuse it with overrides
SASS – Placeholder @extend
“%” acts like a new pseudo selector in addition to class
and id css selector
Extend element tem...
SASS – Placeholder @extend
SASS - @mixin / @include
@mixin
• Re-use whole chunk of CSS
• Acts like functions
• Pass parameter
• Default values for pa...
SASS - @mixin
CSS 3 transition mixin and browser fallback definitions
SASS - @include
@import – CSS vs SASS
CSS SASS
@import – CSS vs SASS
Filename:
Use in SASS File:
Don’t forget the underscore!
Why SASS?
• Consistency
Architecture your CSS:
Organizing CSS: OOCSS, SMACSS, and BEM
gem install sassSASS in Visual Studio
VS 2013 – Updated 2
Tryout & Learn
http://sassmeister.com
Yeoman
Runs on all major platforms (Windows, Mac, Linux)
Web related template engine
Yeoman – recommended templates
 generator-webapp
 generator-angular
 Microsoft Office Project Generator - YO OFFICE!
Yeoman – generator-webapp
Work Locally
Inject CSS and JS
No deployment downtime
Use JSOM / Rest API
Like an Add-in (App)
Full SASS Support
Works for...
Work Locally
- Integrate Yeoman into SharePoint
- Font reset in SharePoint
- Rich Text Editor mixin
DEMO
Work Locally – more information
Getting started
How I develop in SharePoint
and Office 365 now
How to use CSS and
JavaScri...
Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
1. Define a Grid Layout
2. Define Media Breakpoints
3. Define how the content look and behave
Responsive Web Design
Susy Grid
Your Layout - our math
- Calculate grid
- Easy to use
- Built on SASS
- Easy SharePoint
integration
- Susy Grid ...
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
We’re not designing pages,
we’re designing systems of
components.
Stephen Hay
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...
MICRO BRANDING
JSLink, Display Templates and Script Embed Web
Parts allow you to add additional styles to SharePoint
Modern Design Style Guides
Atomic Web Design – Brad Frost
http://patternlab.io
Pattern Lab brought to SharePoint
DEMO
Recap – SASS
Recap - Create your own style guide
Thank you!
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Upcoming SlideShare
Loading in …5
×

Stop your share point css become a di-sass-ter today - SPS Munich

2,021 views

Published on

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?

Published in: Technology
  • Be the first to comment

Stop your share point css become a di-sass-ter today - SPS Munich

  1. 1. Stop your SharePoint CSS becoming a di-SASS-ter today! Stefan Bauer #SPSMUC18, October 10th, 2015
  2. 2. n8d.at/blog @StfBauer Information Architect Vienna / Austria
  3. 3. Stop your SharePoint CSS becoming a di-SASS-ter today!
  4. 4. BRANDING CHALLENGES INTRODUCTION TO SASS STRUCTURE YOUR BRANDING
  5. 5. 2013 / 2016 Office 365 Changed SharePoint Branding 2003 2003 / 2010 2013 Inject CSS 154 files Search & Destroy Golden Age Of Master Page CSS or JS Cloud or On- Premises
  6. 6. Old workflow PROS CONS
  7. 7. Modularize CSS Find and identify UI Elements faster Divide complexity into smaller parts Avoid development conflicts Listing of a large computer program – Arnold Reinhold
  8. 8. Avoid Repeating Tasks Reusable components Better maintainable code
  9. 9. On-premises In the cloud urce: http://my.n8d.at/1MVjnEV
  10. 10. CSS Spaghetti Code
  11. 11. Why is CSS the way it is? of even more that programmers use in their macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things but 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
  12. 12. BRANDING CHALLENGES INTRODUCTION TO SASS STRUCTURE YOUR BRANDING
  13. 13. What is SASS MyBranding.cs s Layout Typo Colors Sass (short for Syntactically Awesome Stylesheets)
  14. 14. SASS – Choose your style SASS – Syntax RUBY based syntax File extension: .sass SCSS – Syntax Like you writing native CSS File extension: .scss
  15. 15. SASS – for developer Benefit of a programming language Calculates the headline font based on a dynamic ratio. Create a font shorthand definition by merging all the font properties like this. CSS: font: italic small-caps bold 1em/140% Helvetica, sans-serif;
  16. 16. SASS - Variables
  17. 17. 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
  18. 18. SASS – Nesting < Parent
  19. 19. SASS – Variables - Data types • Numbers • Strings • Colors • Booleans • Nulls • 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))
  20. 20. SASS - @extend Define element – reuse it with overrides
  21. 21. 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
  22. 22. SASS – Placeholder @extend
  23. 23. 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
  24. 24. SASS - @mixin CSS 3 transition mixin and browser fallback definitions
  25. 25. SASS - @include
  26. 26. @import – CSS vs SASS CSS SASS
  27. 27. @import – CSS vs SASS Filename: Use in SASS File: Don’t forget the underscore!
  28. 28. Why SASS? • Consistency Architecture your CSS: Organizing CSS: OOCSS, SMACSS, and BEM
  29. 29. gem install sassSASS in Visual Studio VS 2013 – Updated 2 Tryout & Learn http://sassmeister.com
  30. 30. Yeoman Runs on all major platforms (Windows, Mac, Linux) Web related template engine
  31. 31. Yeoman – recommended templates  generator-webapp  generator-angular  Microsoft Office Project Generator - YO OFFICE!
  32. 32. Yeoman – generator-webapp
  33. 33. 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
  34. 34. Work Locally - Integrate Yeoman into SharePoint - Font reset in SharePoint - Rich Text Editor mixin DEMO
  35. 35. 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
  36. 36. Make SharePoint Responsive http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
  37. 37. 1. Define a Grid Layout 2. Define Media Breakpoints 3. Define how the content look and behave Responsive Web Design
  38. 38. 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
  39. 39. BRANDING CHALLENGES INTRODUCTION TO SASS STRUCTURE YOUR BRANDING
  40. 40. We’re not designing pages, we’re designing systems of components. Stephen Hay
  41. 41. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. – Dave Rupert
  42. 42. MICRO BRANDING JSLink, Display Templates and Script Embed Web Parts allow you to add additional styles to SharePoint
  43. 43. Modern Design Style Guides
  44. 44. Atomic Web Design – Brad Frost
  45. 45. http://patternlab.io
  46. 46. Pattern Lab brought to SharePoint DEMO
  47. 47. Recap – SASS
  48. 48. Recap - Create your own style guide
  49. 49. Thank you!

×