MakeSharePointSASSYWebinar

StefanBauer– n8d

n8d.at/blog@StfBauer

Information ArchitectVienna / Austria

Make SharePoint SASSY!

- IwillexplainwhatSASSisandhowyoucanuseit- HowtouseSASStobrandSharePointwithoutrequiringlengthydeployments.- HowtocreatesimpleRichTextEditorStylesusingmixins andincludes.- HowtoapplyaGridlayoutandmakeitResponsive.- Howtostructureyourbrandingcorrectlytomakeitmoremaintainable.- HowCSS4fitsintothepictureanddoesitmakeSASSobsolete?

BRANDING CHALLENGES

INTRODUCTION TO SASS

STRUCTURE YOUR BRANDING

2013 / 2016 Office 365

Changed SharePoint Development

2003 2007 / 20102013

Inject CSS154 files

Search & Destroy

Golden AgeOf

Master Page

CSS or JS

Cloud or On-Premises

Old Workflow1. Createafarmsolution2. AddMasterPage3. AddCSSFile4. Deploy5. CustomizeCSSFileonServer6. CopyfinalCSSFiletoFarm

Solution7. DeploySolution8. Repeatstep1- 8

PROS:- Workedprettywell- CentralizedDesignFiles- GhostingCONS:- DevelopmentontheServer- Legacyfarmsolution- OnesingleCSSFile- Notcloudready

Modularize CSS

Find and identify UI elements faster

Divide complexity into smaller parts

Avoid developmentconflicts

Listingofalargecomputer program –Arnold Reinhold

Avoid Repeating Tasks

Reusable components

More maintainable code

On-premises Inthecloud

?Source:http://my.n8d.at/1MVjnEV

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 – A list apart

CSS Spaghetti Code

BRANDING CHALLENGES

INTRODUCTION TO SASS

STRUCTURE YOUR BRANDING

What is SASS

AlayerbetweenstylesheetsandCSS

faster,moreefficient,andeasiertomaintain.

MyBranding.css

Layout

TypoColors

Sass (short for Syntactically Awesome Style Sheets)

SASS– Chooseyourstyle

SASS– SyntaxTheoldschoolRUBYbasedsyntaxFileextension: .sass

SCSS– SyntaxLikeyouwritingnativeCSSFileextension: .scss

SASS – for developerHackCSS

Benefitofaprogramminglanguage

Calculatestheheadlinefontbasedonadynamicratio.Createafontshorthanddefinitionbymergingallthefontpropertieslikethis.

CSS:font:italicsmall-capsbold1em/140%Helvetica,sans-serif;

SASS- Variables

W3C- CSSVariables– Specification

:root{--main-color:#06c;--accent-color:#006;}/*make useofvariables.*/#foo h1{color:var(--main-color);}

CSS– Variables

PostCSS– JavaScript

SASS– Nesting<Parent

SASS – Variables - Data types

• Numbers1.2,13,10px

• Strings withorwithoutquotes"foo",'bar',baz

• Colorsblue,#04a3f9,rgba(255,0,0,0.5)

• Booleanstrue /false

• Nullsnull – what else

• Listofvaluesseparated byspaces orcommas1.5em1em02emHelvetica,Arial,sans-serif

• Maps from onevaluetoanother(key1:value1,key2:value2))

SASS- @extend

Defineelementonce– reuseitwithoverrides

SASS– Placeholder@extend

“%”actslikeanewpseudoselectorinadditiontoclassandidcss selector

Extendelementtemplateswithoutextendingcompilingtheselectoritself

SASS– Placeholder@extend

SASS- @mixin /@include

@mixin

• Re-usebiggerchunksofCSS• Actslikefunctions• Passparameter• Defaultvaluesfor

parameter

@include

• ExtendaselectorwithCSS

SASS- @mixin

CSS3transitionmixin andbrowserfallbackdefinitions

SASS- @include

@import– CSSvsSASS

CSS

• Eachfilewillberequestedseparately• SlowdownUI• Don’tuseit

SASS

• CompilespartialsitintoCSSfile• SupportsCSSimport• Allowstostructurethedesign

@import– CSSvsSASS

Filename:_yourvariables.scss

UseinSASSFile:@import‘yourvariables’@import‘core/mixins’

Don’tforgettheunderscore!

WhySASS?

• CSSwithsuperpower!• Cleanstructuredcode• Reusablecomponents

• Consistency

•ManyExtensions

OrganizingCSS:• OOCSSObjectorientedCSS

• SMACSSScalableandModularArchitectureforCSS

• BEMBlockElementModifier

Blogpost:OrganizingCSS:OOCSS,SMACSS,andBEM

geminstallsassSASSinVisualStudioVS2013– Updated2

Tryout&Learn

http://sassmeister.com

Yeoman – yeoman.io

Runsonallmajorplatforms(Windows,Mac,Linux)

Webrelatedtemplateengine

Platform TaskRunnerLikeMSBuild

BowerLikeNuGet

Yeoman – recommended templates

� generator-webapp – deprecatedTemplateforwebapplications– grunt gulp

� generator-gulp-webappTemplateforwebapplications– gulp

� generator-angularTemplateforangularjs

� YOOFFICE!- MicrosoftOfficeProjectGeneratorTemplateforwritingMicrosoftOfficeadd-ins(akaapps)

Yeoman – generator-webapp

- Webserver(Node.js)- IntegratedSASSsupport- Auto-compileSASStoCSS- Autoreloadwebpage- CSScanbeintegratedintoSharePointon-premisesorOffice365

Work LocallyInjectCSSandJS

Nodeploymentdowntime

UseJSOM/RestAPI

LikeanAdd-in(App)

FullSASSSupport

WorksforOffice365andon-premises

Work Locally

- IntegrateYeomanintoSharePoint- FontresetinSharePoint- RichTextEditormixin

DEMO

WorkLocally– moreinformation

Gettingstarted

HowIdevelopinSharePointandOffice365now

HowtouseCSSandJavaScriptfilesfromYeomandirectlyinSharePoint

Make SharePoint Responsive

http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg

1. Defineandcreategridlayout

2. Definemediabreakpoints

3. Definehowthecontentlooks

ResponsiveWebDesign

Susy GridYourLayout- ourmath- Calculategrid- Easytouse- BuiltonSASS- EasySharePointintegration

- SusyGrid /Tutorials

- SASSMediaqueriesProjectongithub

DEMO

BRANDING CHALLENGES

INTRODUCTION TO SASS

STRUCTURE YOUR 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

Beware of MICRO BRANDINGJSLink, Display Templates and Script Embed Web Parts allow you to add additional styles to SharePointThe problem is how the styles.

Modern Style Guides

- HTMLbasedstyledocumentation- Dynamicandextendable- AllowtobuildnewUIComponents- Allowsteamstoworkbettertogether

Modern Design Style Guides

- HTMLbased- DynamicStyleDocumentation- AllowtobuildnewUIComponents- Allowsteamstoworkbettertogether

Atomic Web Design – Brad Frost

http://patternlab.io

Recap– SASS•SASS helpsyoutowritebetterCSS•Keepaneyeonthesourcecode•Wellstructured

•SupportsDRY (Don’trepeatyourself)yourdevelopment

Recap- Createyourownstyleguide

•SketchinHTMLfirst•Createreusablecomponents•Documentalldesignassets•Addthingsyouneedratherthanuseafullversionofframework

Resourcesusedindemo

•HowIdevelopinSharePointandOffice365now•ApplygridsystemtoSharePointusingSusy•PureCSSBurger•SharePointFontReset•ResponsiveSharePointProjectonGitHub

HavefunmakingSharePoint