European SharePoint Webinar - Make SharePoint Sassy
-
Upload
stefan-bauer -
Category
Technology
-
view
1.169 -
download
1
Transcript of European SharePoint Webinar - Make SharePoint Sassy
![Page 1: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/1.jpg)
MakeSharePointSASSYWebinar
StefanBauer– n8d
![Page 2: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/2.jpg)
n8d.at/blog@StfBauer
Information ArchitectVienna / Austria
![Page 3: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/3.jpg)
Make SharePoint SASSY!
- IwillexplainwhatSASSisandhowyoucanuseit- HowtouseSASStobrandSharePointwithoutrequiringlengthydeployments.- HowtocreatesimpleRichTextEditorStylesusingmixins andincludes.- HowtoapplyaGridlayoutandmakeitResponsive.- Howtostructureyourbrandingcorrectlytomakeitmoremaintainable.- HowCSS4fitsintothepictureanddoesitmakeSASSobsolete?
![Page 4: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/4.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 5: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/5.jpg)
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
![Page 6: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/6.jpg)
Old Workflow1. Createafarmsolution2. AddMasterPage3. AddCSSFile4. Deploy5. CustomizeCSSFileonServer6. CopyfinalCSSFiletoFarm
Solution7. DeploySolution8. Repeatstep1- 8
PROS:- Workedprettywell- CentralizedDesignFiles- GhostingCONS:- DevelopmentontheServer- Legacyfarmsolution- OnesingleCSSFile- Notcloudready
![Page 7: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/7.jpg)
Modularize CSS
Find and identify UI elements faster
Divide complexity into smaller parts
Avoid developmentconflicts
Listingofalargecomputer program –Arnold Reinhold
![Page 8: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/8.jpg)
Avoid Repeating Tasks
Reusable components
More maintainable code
![Page 9: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/9.jpg)
On-premises Inthecloud
?Source:http://my.n8d.at/1MVjnEV
![Page 10: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/10.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 – A list apart
![Page 11: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/11.jpg)
CSS Spaghetti Code
![Page 12: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/12.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 13: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/13.jpg)
What is SASS
AlayerbetweenstylesheetsandCSS
faster,moreefficient,andeasiertomaintain.
MyBranding.css
Layout
TypoColors
Sass (short for Syntactically Awesome Style Sheets)
![Page 14: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/14.jpg)
SASS– Chooseyourstyle
SASS– SyntaxTheoldschoolRUBYbasedsyntaxFileextension: .sass
SCSS– SyntaxLikeyouwritingnativeCSSFileextension: .scss
![Page 15: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/15.jpg)
SASS – for developerHackCSS
Benefitofaprogramminglanguage
Calculatestheheadlinefontbasedonadynamicratio.Createafontshorthanddefinitionbymergingallthefontpropertieslikethis.
CSS:font:italicsmall-capsbold1em/140%Helvetica,sans-serif;
![Page 16: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/16.jpg)
SASS- Variables
![Page 17: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/17.jpg)
W3C- CSSVariables– Specification
:root{--main-color:#06c;--accent-color:#006;}/*make useofvariables.*/#foo h1{color:var(--main-color);}
CSS– Variables
PostCSS– JavaScript
![Page 18: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/18.jpg)
SASS– Nesting<Parent
![Page 19: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/19.jpg)
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))
![Page 20: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/20.jpg)
SASS- @extend
Defineelementonce– reuseitwithoverrides
![Page 21: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/21.jpg)
SASS– Placeholder@extend
“%”actslikeanewpseudoselectorinadditiontoclassandidcss selector
Extendelementtemplateswithoutextendingcompilingtheselectoritself
![Page 22: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/22.jpg)
SASS– Placeholder@extend
![Page 23: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/23.jpg)
SASS- @mixin /@include
@mixin
• Re-usebiggerchunksofCSS• Actslikefunctions• Passparameter• Defaultvaluesfor
parameter
@include
• ExtendaselectorwithCSS
![Page 24: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/24.jpg)
SASS- @mixin
CSS3transitionmixin andbrowserfallbackdefinitions
![Page 25: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/25.jpg)
SASS- @include
![Page 26: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/26.jpg)
@import– CSSvsSASS
CSS
• Eachfilewillberequestedseparately• SlowdownUI• Don’tuseit
SASS
• CompilespartialsitintoCSSfile• SupportsCSSimport• Allowstostructurethedesign
![Page 27: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/27.jpg)
@import– CSSvsSASS
Filename:_yourvariables.scss
UseinSASSFile:@import‘yourvariables’@import‘core/mixins’
Don’tforgettheunderscore!
![Page 28: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/28.jpg)
![Page 29: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/29.jpg)
WhySASS?
• CSSwithsuperpower!• Cleanstructuredcode• Reusablecomponents
• Consistency
•ManyExtensions
OrganizingCSS:• OOCSSObjectorientedCSS
• SMACSSScalableandModularArchitectureforCSS
• BEMBlockElementModifier
Blogpost:OrganizingCSS:OOCSS,SMACSS,andBEM
![Page 30: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/30.jpg)
geminstallsassSASSinVisualStudioVS2013– Updated2
Tryout&Learn
http://sassmeister.com
![Page 31: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/31.jpg)
Yeoman – yeoman.io
Runsonallmajorplatforms(Windows,Mac,Linux)
Webrelatedtemplateengine
Platform TaskRunnerLikeMSBuild
BowerLikeNuGet
![Page 32: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/32.jpg)
Yeoman – recommended templates
� generator-webapp – deprecatedTemplateforwebapplications– grunt gulp
� generator-gulp-webappTemplateforwebapplications– gulp
� generator-angularTemplateforangularjs
� YOOFFICE!- MicrosoftOfficeProjectGeneratorTemplateforwritingMicrosoftOfficeadd-ins(akaapps)
![Page 33: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/33.jpg)
Yeoman – generator-webapp
- Webserver(Node.js)- IntegratedSASSsupport- Auto-compileSASStoCSS- Autoreloadwebpage- CSScanbeintegratedintoSharePointon-premisesorOffice365
![Page 34: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/34.jpg)
Work LocallyInjectCSSandJS
Nodeploymentdowntime
UseJSOM/RestAPI
LikeanAdd-in(App)
FullSASSSupport
WorksforOffice365andon-premises
![Page 35: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/35.jpg)
Work Locally
- IntegrateYeomanintoSharePoint- FontresetinSharePoint- RichTextEditormixin
DEMO
![Page 36: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/36.jpg)
WorkLocally– moreinformation
Gettingstarted
HowIdevelopinSharePointandOffice365now
HowtouseCSSandJavaScriptfilesfromYeomandirectlyinSharePoint
![Page 37: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/37.jpg)
Make SharePoint Responsive
http://www.zeendo.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
![Page 38: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/38.jpg)
1. Defineandcreategridlayout
2. Definemediabreakpoints
3. Definehowthecontentlooks
ResponsiveWebDesign
![Page 39: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/39.jpg)
![Page 40: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/40.jpg)
Susy GridYourLayout- ourmath- Calculategrid- Easytouse- BuiltonSASS- EasySharePointintegration
- SusyGrid /Tutorials
- SASSMediaqueriesProjectongithub
![Page 41: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/41.jpg)
DEMO
![Page 42: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/42.jpg)
BRANDING CHALLENGES
INTRODUCTION TO SASS
STRUCTURE YOUR BRANDING
![Page 43: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/43.jpg)
We’re not designing pages,we’re designing systems of components. Stephen Hay
![Page 44: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/44.jpg)
Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. –Dave Rupert
![Page 45: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/45.jpg)
Beware of MICRO BRANDINGJSLink, Display Templates and Script Embed Web Parts allow you to add additional styles to SharePointThe problem is how the styles.
![Page 46: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/46.jpg)
Modern Style Guides
- HTMLbasedstyledocumentation- Dynamicandextendable- AllowtobuildnewUIComponents- Allowsteamstoworkbettertogether
![Page 47: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/47.jpg)
Modern Design Style Guides
- HTMLbased- DynamicStyleDocumentation- AllowtobuildnewUIComponents- Allowsteamstoworkbettertogether
![Page 48: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/48.jpg)
Atomic Web Design – Brad Frost
![Page 49: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/49.jpg)
![Page 50: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/50.jpg)
![Page 51: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/51.jpg)
http://patternlab.io
![Page 52: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/52.jpg)
Recap– SASS•SASS helpsyoutowritebetterCSS•Keepaneyeonthesourcecode•Wellstructured
•SupportsDRY (Don’trepeatyourself)yourdevelopment
![Page 53: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/53.jpg)
Recap- Createyourownstyleguide
•SketchinHTMLfirst•Createreusablecomponents•Documentalldesignassets•Addthingsyouneedratherthanuseafullversionofframework
![Page 54: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/54.jpg)
Resourcesusedindemo
•HowIdevelopinSharePointandOffice365now•ApplygridsystemtoSharePointusingSusy•PureCSSBurger•SharePointFontReset•ResponsiveSharePointProjectonGitHub
![Page 55: European SharePoint Webinar - Make SharePoint Sassy](https://reader031.fdocuments.net/reader031/viewer/2022021815/5874cefd1a28ab8f508b897b/html5/thumbnails/55.jpg)
HavefunmakingSharePoint