Stop your SharePoint CSS becoming a di-SASS-ter today!

#SPSBE12

Stefan Bauer

April 18th, 2015

Pla

tin

um

Go

ldSilver

Thanks to our sponsors!

stefan.bauer@n8d.at

@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 2003

SharePoint 2007

Customizing SharePoint Themes with SharePoint Designer 2007

and IE8 – Kris Evans

SharePoint 2010

SharePoint 2013

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

- Better structured CSS

- Avoid Repeating Tasks

Sass is the most mature, stable, and powerful professional

grade CSS extension language in the world.

What is SASS

CSS Pre-processor Engine

- Built on RUBY

MyBranding.css

Layout

TypoColors

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

CSS Spaghetti Code

SASS – for developer

Hack CSS

font: italic small-caps bold 1em/140%

Helvetica, sans-serif;

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

SASS – Nesting - Compiled

SASS – Nesting < Parent

SASS - Variables

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 – Maps

SASS - @extend

Define element – reuse it with overrides

SASS – Placeholder @extend

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

SASS - @mixin

SASS - @include

http://yeoman.io

Development

stack to quickly

build high quality

web applications

VS 2013 – Updated 2

Yeoman

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

- Define and create Grid Layout

- Define Media Breakpoints

Responsive Web Design

Susy GridYour Layout - our math

Susy Grid

Tutorials

Structure your CSSand 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

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/

http://patternlab.io

Thank you!