CREATE SASSY WEB PARTS. Developer Guide to SASS usage in SPFx

Size: px

Start display at page:

Download "CREATE SASSY WEB PARTS. Developer Guide to SASS usage in SPFx"

Caroline Townsend
6 years ago
Views:

1 CREATE SASSY WEB PARTS Developer Guide to SASS usage in SPFx

5 !!! WARNING!!! YOU WILL SEE SOURCE CODE!!! WARNING!!!

6 OUR GOALS Sketch and develop web parts Create your own reusable CSS Handle external CSS properly in SPFx Apply themes to your web parts

7 TYPESCRIPT is a typed superset of JavaScript that compiles to JavaScript

8 SASS SYNTACTICAL AWESOME STYLE SHEETS is a superset and programming language of CSS that compiles to CSS

9 PROGRAMMING LANGUAGE? VARIABLES $brand-color-main: #DD304D $default-padding: TYPES numbers: 1.2, 13, 10px strings: "foo", 'bar', baz colors: blue, #04a3f9, rgba(255, 0, 0, 0.5) boolean, null, lists of values, maps

10 MORE FEATURES? -- addition($a, $b) $a+$b; // Function a { padding: addition(10px, 30px); // Result a { padding: 40px;

11 MORE FEATURES? -- headline ($color, $size) { color: $color; font-size: $size; h1 headline(green, 12px); // Result h1 { color: green; font-size: 12px;

12 MORE FEATURES? PLACEHOLDER EXTEND // Template Definition %box{ display: block; width: 300px; height: 150px;

13 MORE FEATURES? PLACEHOLDER EXTEND // Red %box; background-color: red; // Green %box; background-color: green;

14 MORE FEATURES? PLACEHOLDER EXTEND.red-box,.green-box { display: block; width: 300px; height: 150px;.red-box { background-color: red;.green-box { background-color: green;

15 MORE FEATURES? PLACEHOLDER EXTEND.red-box,.green-box { display: block; width: 300px; height: 150px;.red-box { background-color: red;.green-box { background-color: green;

16 NESTING - PARENT SELECTOR - & a{ color: teal; &:hover{ color: pink; &:visited{ color: teal;

17 NESTING a{ color: teal; a:hover{ color: pink; a:visited{ color: teal;

18 NESTING PARENT SELECTOR - &.box{ display: inline-block; width: 300px; height: 200px; color: black; &-label{ height: 50px; background-color: black; color: white;

19 NESTING PARENT SELECTOR - &.box{ display: inline-block; width: 300px; height: 200px; color: black;.box-label{ height: 50px; background-color: black; color: white;

21 LEAST IMPORTANT FEATURE IN url url("fineprint.css") url("bluish.css") projection, "common.css" screen, url('landscape.css') screen and (orientation:landscape);

22 HOW BROWSER HANDLE 1. Load CSS HTTP Request Load CSS HTTP Request 4. parse both CSS 5. Render page

23 MOST IMPORTANT FEATURE IN <file url>; Works same as in HTML but url( ) HTML somefile.css Merges file directly into CSS

24 MOST IMPORTANT FEATURE IN _custom.scss custom ; Partial file through the _ File won t be converted.css file Import Reusable components Helps you strucuture your CSS Better

25 IMPORT IN _custom.scss custom node_modules/office-ui-fabric/dist/fabric.css Import CSS from any npm package Import CSS from bower components

26 CONGRATULATION SASS Certified

27 HOW I WORK

31 MY WORKFLOW SKETCH AND DESIGN DOCUMENT STYLES MOVE IT TO SPFx

32 DOCUMENT STYLES Style Guide Pattern Library Simple Style for SP/O365 and SPFx React Components

33 DEMO

35 BENEFITS - Focus on code design - Reusable components - Cross browser testing - No documentation effort - Refactor components Common Tool in Web Design

36 BRING IT TO SPFX

37 SASS COMPILATION IN SPFX COMPILE SASS AUTOPREFIX POSTFIX / TS Class Compilation

38 AUTOPREFIXING WHAT IS IT?.round { /* Safari 3-4, ios 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, ios 4, Android 2.1+ */ border-radius: 12px;

39 AUTOPREFIXING WHAT IS IT?.round { border-radius: 12px;

40 AUTOPREFIXING WHAT IS IT?.round { /* Safari 3-4, ios 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, ios 4, Android 2.1+ */ border-radius: 12px;

41 HOW DOES AUTOPREFIXING WORK? 1. Lookup attributes on caniuse.com 2. Checks prefixes needed 3. Adds it to CSS

42 BENEFIT AUTOPREFIXING Cleaner CSS / Less Headache Configured to support Office 365 / SharePoint optimal No legacy code removal

43 SASS COMPILATION IN SPFX COMPILE SASS AUTOPREFIX POSTFIX / TS Class Compilation

44 POSTFIXING.round {....round_f6d5fd65{... BEFORE AFTER

45 POSTFIXING.round {....round_f6d5fd65{... BEFORE AFTER Make class name unique

46 POSTFIXING Web Part cannot effect the overall experience Different web parts same classes not possible Makes it hard to share code across web parts even in same project

47 TYPESCRIPT CLASS COMPILATION Each CSS class à style.yourclassname CSS becomes somewhat type safe LIMITATION: invalid class name.card-hover JS doesn t allow dashes in variable names

48 TYPESCRIPT CLASS COMPILATION Typescript class = JSON Object var styles = { 'my-class': 'my-class_2023f0bf style.my-class style[ my-class ] //Fails // CORRECT but not type safe

49 A CLOSER LOOK IN SPFX

50 RESULT OF SASS IN SPFX 1. /src/**/mysass.module.scss source file 2. /lib/**/mysass.module.css compiled CSS /lib/**/mysass.module.scss.d.ts type definition /lib/**/mysass.module.scss.js style object /lib/**/mysass.module.scss.js.map debug map

51 AVOID CSS CLASS NAME RENAME :global pseudo selector.spsmilan { :global { // Everything in here won t be card-hoverup("green", green, white, 0.6);

52 WHEN TO USE GLOBAL? Good option for external CSS Use it wisely Use it inside the container only

53 THEMED WEB PARTS "[theme:themeprimary, default:#0078d7]" Office UI Fabric supports theming Use variable colors User color variables

55 Information Architect Vienna / Austria

IBM Forms V8.0 Custom Themes IBM Corporation

IBM Forms V8.0 Custom Themes IBM Corporation IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept