SlideShare a Scribd company logo

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

•Download as PPTX, PDF•
•
Stefan Bauer
Stefan Bauer

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?

Related slideshows

European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint Sassy
 
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFx
 
[Bauer] SASSy web parts with SPFX
[Bauer] SASSy web parts with SPFX[Bauer] SASSy web parts with SPFX
[Bauer] SASSy web parts with SPFX
 
1 of 58
Stop your SharePoint CSS becoming a di-SASS-ter today! #SPSOslo Stefan Bauer October 17th, 2015 SharePoint Saturday Oslo 2015
SharePoint Saturday Oslo 2015 SharePoint Saturday Oslo 2015 Thanks to our Sponsors
n8d.at/blog @StfBauer Information Architect Vienna / Austria
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?
BRANDING CHALLENGES INTRODUCTION TO SASS STRUCTURE YOUR BRANDING
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
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
Modularize CSS Find and identify UI Elements faster Divide complexity into smaller parts Avoid development conflicts Listingofalargecomputerprogram –ArnoldReinhold
Avoid Repeating Tasks Reusable components Better maintainable code
On-premises In the cloud urce: http://my.n8d.at/1MVjnEV
CSS Spaghetti Code
Håkon Wium Lie Father of CSS First CSS Proposal 10th October 1994
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
BRANDING CHALLENGES INTRODUCTION TO SASS STRUCTURE YOUR BRANDING
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)
SASS – Choose your style SASS – Syntax RUBY based syntax File extension: .sass SCSS – Syntax Like you writing native CSS Fileextension:.scss
SASS – for developer Hack CSS Benefitof a programminglanguage Calculatestheheadlinefontbasedona dynamicratio.Createafontshorthand definitionbymergingallthefontpropertieslike this. CSS: font: italic small-caps bold 1em/140% Helvetica, sans-serif;
SASS - Variables
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
SASS – Nesting < Parent
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))
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 templates without extending compiling the selector itself
SASS – Placeholder @extend
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
SASS - @mixin CSS 3 transition mixin and browser fallback definitions
SASS - @include
@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
@import – CSS vs SASS Filename: _yourvariables.scss Use in SASS File: @import ‘yourvariables’ @import ‘core/mixins’ Don’t forget the underscore!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
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
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 basic web application template  generator-angular angular web application template  Microsoft Office Project Generator - YO OFFICE!
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
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
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 JavaScript files from Yeoman directly in SharePoint
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
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
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
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 clients’ needs. – Dave Rupert
MICRO BRANDING JSLink, Display Templates and Script Embed Web Parts allow you to add additional styles to SharePoint
Modern Design Style Guides - HTML based - Dynamic Style Documentation - Allow to build new UI Components - Allows teams to work better together
Atomic Web Design – Brad Frost
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
http://patternlab.io
Pattern Lab brought to SharePoint DEMO
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
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
Questions? @StfBauer https://at.linkedin.com/in/stfbauer
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
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
They help us improve for SharePoint Saturday 2016! Remember to evaluate our sessions

More Related Content

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

  • 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
  • 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
  • 10. On-premises In the cloud urce: http://my.n8d.at/1MVjnEV
  • 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;
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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

Editor's Notes

  1. Template may not be modified Twitter hashtag: #spsoslo for all sessions
  2. http://www.tibco.com/blog/2013/08/22/esb-does-not-equal-soa-learn-the-real-equation/
  3. Classical