ESPC15 - Make SharePoint Sassy€¦ · Make SharePoint SASSY! - I will explain what SASS is and how...
Transcript of ESPC15 - Make SharePoint Sassy€¦ · Make SharePoint SASSY! - I will explain what SASS is and how...
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