Stop your sharepoint css becoming a disasster today spsbe2015
Download as PPTX, PDF1 like758 views
- 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.
Stop your sharepoint css becoming a disasster today spsbe2015
- 1. Stop your SharePoint CSS becoming a di-SASS-ter today! #SPSBE12 Stefan Bauer April 18th, 2015
- 2. PlatinumGoldSilver 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?
- 6. SharePoint 2007 Customizing SharePoint Themes with SharePoint Designer 2007 and IE8 – Kris Evans
- 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
- 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
- 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
- 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/
- 49. Thank you!