stop your share point css become a di-sass-ter today - sps munich
TRANSCRIPT
![Page 1: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/1.jpg)
Stop your SharePoint CSS becoming a di-SASS-ter today!Stefan Bauer#SPSMUC18, October 10th, 2015
![Page 2: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/2.jpg)
Thank you sponsors!
![Page 3: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/3.jpg)
n8d.at/blog@StfBauer
Information ArchitectVienna / Austria
![Page 4: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/4.jpg)
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?
![Page 5: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/5.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 6: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/6.jpg)
2013 / 2016
Office 365
Changed SharePoint Branding
2003 2003 / 20102013
Inject CSS 154 files
Search & Destroy
Golden AgeOf
Master Page
CSS or JS
Cloud or On-
Premises
![Page 7: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/7.jpg)
Old workflow1. Create a farm solution2. Add Master Page3. Add CSS File4. Deploy5. Customized CSS File on
Server6. Copy final CSS File to Farm
Solution7. Deploy Solution8. Repeat step 1 - 8
PROS:- Worked pretty well- Centralized Design Files- GhostingCONS:- Development on the Server- Farm solution- One single CSS File- Not cloud ready
![Page 8: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/8.jpg)
Modularize CSS
Find and identify UI Elements faster
Divide complexity into smaller parts
Avoid developmentconflicts
Listing of a large computer program – Arnold Reinhold
![Page 9: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/9.jpg)
Avoid Repeating Tasks
Reusable components
Better maintainable code
![Page 11: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/11.jpg)
CSS Spaghetti Code
![Page 12: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/12.jpg)
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
![Page 13: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/13.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 14: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/14.jpg)
What is SASS
CSS Pre Processor
A layer between style sheets and CSS
faster, more efficient, and easier to maintain.
MyBranding.css
Layout
Typo
ColorsSass (short for Syntactically Awesome Stylesheets)
![Page 15: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/15.jpg)
SASS – Choose your style
SASS – SyntaxRUBY based syntaxFile extension: .sass
SCSS – SyntaxLike you writing native CSSFile extension: .scss
![Page 16: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/16.jpg)
SASS – for developerHack CSS
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;
![Page 17: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/17.jpg)
SASS - Variables
![Page 18: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/18.jpg)
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
![Page 19: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/19.jpg)
SASS – Nesting < Parent
![Page 20: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/20.jpg)
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 valuesseparated by spaces or commas 1.5em 1em 0 2emHelvetica, Arial, sans-serif
• Maps from one value to another (key1: value1, key2: value2))
![Page 21: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/21.jpg)
SASS - @extendDefine element – reuse it with overrides
![Page 22: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/22.jpg)
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
![Page 23: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/23.jpg)
SASS – Placeholder @extend
![Page 24: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/24.jpg)
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
![Page 25: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/25.jpg)
SASS - @mixinCSS 3 transition mixin and browser fallback definitions
![Page 26: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/26.jpg)
SASS - @include
![Page 27: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/27.jpg)
@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
![Page 28: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/28.jpg)
@import – CSS vs SASSFilename: _yourvariables.scss
Use in SASS File:@import ‘yourvariables’@import ‘core/mixins’
Don’t forget the underscore!
![Page 29: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/29.jpg)
![Page 30: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/30.jpg)
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
![Page 31: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/31.jpg)
gem install sassSASS in Visual StudioVS 2013 – Updated 2
Tryout & Learn
http://sassmeister.com
![Page 32: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/32.jpg)
Yeoman
Runs on all major platforms (Windows, Mac, Linux)
Web related template engine
![Page 33: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/33.jpg)
Yeoman – recommended templates generator-webapp
basic web application template
generator-angularangular web application template
Microsoft Office Project Generator - YO OFFICE!
![Page 34: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/34.jpg)
Yeoman – generator-webappWebserver (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
![Page 35: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/35.jpg)
Work LocallyInject CSS and JSNo deployment downtimeUse JSOM / Rest APILike an Add-in (App)
Full SASS SupportWorks for Office 365 and on-premises
![Page 36: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/36.jpg)
Work Locally
- Integrate Yeoman into SharePoint- Font reset in SharePoint- Rich Text Editor mixin
DEMO
![Page 37: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/37.jpg)
Work Locally – more informationGetting started
How I develop in SharePoint and Office 365 now
How to use CSS and JavaScript files from Yeoman directly in SharePoint
![Page 38: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/38.jpg)
Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
![Page 39: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/39.jpg)
1. Define a Grid Layout2. Define Media Breakpoints3. Define how the content look and behave
Responsive Web Design
![Page 40: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/40.jpg)
![Page 41: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/41.jpg)
Susy GridYour Layout - our math- Calculate grid- Easy to use- Built on SASS- Easy SharePoint
integration
- Susy Grid / Tutorials
- SASS MediaqueriesProject on github
![Page 42: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/42.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 43: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/43.jpg)
We’re not designing pages,we’re designing systems of components.Stephen Hay
![Page 44: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/44.jpg)
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. – Dave Rupert
![Page 45: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/45.jpg)
MICRO BRANDINGJSLink, Display Templates and Script Embed Web Parts allow you to add additional styles to SharePoint
![Page 46: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/46.jpg)
Modern Design Style Guides- HTML based- Dynamic Style Documentation- Allow to build new UI Components- Allows teams to work better together
![Page 47: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/47.jpg)
Atomic Web Design – Brad Frost
![Page 48: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/48.jpg)
![Page 49: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/49.jpg)
![Page 51: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/51.jpg)
Pattern Lab brought to SharePoint
DEMO
![Page 52: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/52.jpg)
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
![Page 53: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/53.jpg)
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
![Page 54: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/54.jpg)
Querstions ?
![Page 55: Stop your share point css become a di-sass-ter today - SPS Munich](https://reader033.vdocuments.site/reader033/viewer/2022051709/5874cf0b1a28ab8f508b89d5/html5/thumbnails/55.jpg)
Please visit our sponsors who made this day possible!
Thank you!Rate this session with the event app (and win a Lego VW Bully)
http://app.spsmuc.com