sps oslo - stop your sharepoint css becoming a di-sass-ter today!
TRANSCRIPT
![Page 1: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/1.jpg)
Stop your SharePoint CSS becoming a di-SASS-ter today!#SPSOslo
Stefan BauerOctober 17th, 2015
SharePoint SaturdayOslo 2015
![Page 2: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/2.jpg)
SharePoint SaturdayOslo 2015
SharePoint SaturdayOslo 2015
Thanks to our
Sponsors
![Page 3: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/3.jpg)
n8d.at/blog@StfBauer
Information ArchitectVienna / Austria
![Page 4: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/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: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/5.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 6: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/6.jpg)
2013 / 2016
Office 365
Changed SharePoint Branding
2003 2007 / 20102013
Inject CSS 154 files
Search & Destroy
Golden AgeOf
Master Page
CSS or JS
Cloud or On-
Premises
![Page 7: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/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: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/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: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/9.jpg)
Avoid Repeating Tasks
Reusable components
Better maintainable code
![Page 11: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/11.jpg)
CSS Spaghetti Code
![Page 12: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/12.jpg)
Håkon Wium LieFather of CSS
First CSS Proposal10th October 1994
![Page 13: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/13.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 14: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/14.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 15: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/15.jpg)
What is SASS
CSS Pre Processor
A layer between style sheets and CSS
faster, more efficient, and easier to maintain.
MyBranding.css
Layout
TypoColors
Sass (short for Syntactically Awesome Stylesheets)
![Page 16: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/16.jpg)
SASS – Choose your style
SASS – SyntaxRUBY based syntaxFile extension: .sass
SCSS – SyntaxLike you writing native CSSFile extension: .scss
![Page 17: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/17.jpg)
SASS – for developer
Hack 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 18: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/18.jpg)
SASS - Variables
![Page 19: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/19.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 20: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/20.jpg)
SASS – Nesting < Parent
![Page 21: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/21.jpg)
SASS – Variables - Data types
• Numbers1.2, 13, 10px
• Strings with or without quotes"foo", 'bar', baz
• Colors blue, #04a3f9, rgba(255, 0, 0, 0.5)
• Booleanstrue / false
• Nullsnull – 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 22: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/22.jpg)
SASS - @extend
Define element – reuse it with overrides
![Page 23: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/23.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 24: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/24.jpg)
SASS – Placeholder @extend
![Page 25: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/25.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 26: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/26.jpg)
SASS - @mixin
CSS 3 transition mixin and browser fallback definitions
![Page 27: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/27.jpg)
SASS - @include
![Page 28: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/28.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 29: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/29.jpg)
@import – CSS vs SASSFilename: _yourvariables.scss
Use in SASS File:@import ‘yourvariables’@import ‘core/mixins’
Don’t forget the underscore!
![Page 30: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/30.jpg)
![Page 31: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/31.jpg)
Why SASS?• CSS with superpower!• Clean structured code• Reusable components
• Consistency
• Many Extensions
Architecture your CSS: • OOCSS
Object oriented CSS
• SMACSSScalable and Modular Architecture for CSS
• BEMBlock Element Modifier
Blog post: Organizing CSS: OOCSS, SMACSS, and BEM
![Page 32: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/32.jpg)
gem install sassSASS in Visual StudioVS 2013 – Updated 2
Tryout & Learn
http://sassmeister.com
![Page 33: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/33.jpg)
Yeoman
Runs on all major platforms (Windows, Mac, Linux)
Web related template engine
![Page 34: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/34.jpg)
Yeoman – recommended templates
generator-webappbasic web application template
generator-angularangular web application template
Microsoft Office Project Generator - YO OFFICE!
![Page 35: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/35.jpg)
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
![Page 36: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/36.jpg)
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
![Page 37: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/37.jpg)
Work Locally
- Integrate Yeoman into SharePoint- Font reset in SharePoint- Rich Text Editor mixin
DEMO
![Page 38: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/38.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 39: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/39.jpg)
Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
![Page 40: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/40.jpg)
1. Define a Grid Layout
2. Define Media Breakpoints
3. Define how the content look and behave
Responsive Web Design
![Page 41: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/41.jpg)
![Page 42: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/42.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 43: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/43.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 44: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/44.jpg)
We’re not designing pages,we’re designing systems of components.
Stephen Hay
![Page 45: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/45.jpg)
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom
tailored for your clients’ needs. – Dave Rupert
![Page 46: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/46.jpg)
MICRO BRANDINGJSLink, Display Templates and Script Embed Web Parts allow you to add
additional styles to SharePoint
![Page 47: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/47.jpg)
Modern Design Style Guides
- HTML based- Dynamic Style Documentation- Allow to build new UI Components- Allows teams to work better together
![Page 48: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/48.jpg)
Atomic Web Design – Brad Frost
![Page 49: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/49.jpg)
![Page 50: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/50.jpg)
![Page 52: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/52.jpg)
Pattern Lab brought to SharePoint
DEMO
![Page 53: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/53.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 54: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/54.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 55: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/55.jpg)
Questions?
@StfBauer
https://at.linkedin.com/in/stfbauer
![Page 56: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/56.jpg)
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
![Page 57: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/57.jpg)
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
![Page 58: SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!](https://reader035.vdocuments.us/reader035/viewer/2022062823/5874cefd1a28ab8f508b8983/html5/thumbnails/58.jpg)
They help us improve for SharePoint Saturday 2016!
Remember to evaluate our sessions