Upload
biwug
View
167
Download
0
Tags:
Embed Size (px)
Citation preview
@StfBauer
www.n8d.at
Blog
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?
SharePoint 2007
Customizing SharePoint Themes with SharePoint Designer 2007
and IE8 – Kris Evans
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
On-premises
https://www.flickr.com/photos/torkildr/3462606643/t
In the cloud
Brand Faster
http://media.giphy.com/media/11M1k4fIwVqPF6/giphy.gif
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
Sass is the most mature, stable, and powerful professional
grade CSS extension language in the world.
VS 2013 – Updated 2
http://sassmeister.com
Why SASS?
Feels like writing native CSS
Structure the code
Support to define reusable components
DON’T repeat yourself
Reduce complexity of CSS
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
W3C - CSS Variables – Specification
element {
--main-bg-color: brown;
}
element {
background-color: var(--main-bg-color);
}
CSS – Variables
SASS – Variables - Data types
• Numbers1.2, 13, 10px
• Strings with or without quotes"foo", 'bar', baz
• Colorsblue, #04a3f9, rgba(255, 0, 0, 0.5)
• Booleanstrue / false
• Nullsnull – what else
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))
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
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
http://yeoman.io
Development
stack to quickly
build high quality
web applications
VS 2013 – Updated 2
Yeoman
Webserver (Node.js)
- Integrated SASS support
- Auto-compile SASS to CSS
- Auto reload web page
- CSS is integrated into SharePoint or Office 365
Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
Susy GridYour Layout - our math
Susy Grid
Tutorials
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. - Dave Rupert
Modern Style Guides
- HTML based
- Dynamic Style Documentation
- Allow to build and document new UI Components
- Allow teams to build new components
Atomic Web Design – Brad Frost
http://bradfrost.com/blog/post/atomic-web-design/