Frictionless Front Ends for Back End Developers

A presentation at NDC London in January 2020 in London, UK by Mandy Michael

Slide 1

Frictionless FRONT-ENDS FOR BACKEND DEVELOPERS.

Slide 2

MANDY MICHAEL @MANDY_KERR

Slide 3

HTML CSS JS.

Slide 4

Slide 5

Slide 6

Choosing THE RIGHT TYPE.

Slide 7

interface dog { name: string age: number isFluffy: boolean }

Slide 8

Be explicit ABOUT THE SHAPE OF THE CONTENT. @MANDY_KERR

Slide 9

<html> <body> <header> <h1>Jello”</h1> “</header> <main> <h2>Is he a fluffy fellow?”</h2> <p>Jello is indeed a fluffy fellow.”</p> <figure> <img href=“jello.png” alt=”A golden retriever” “/> <figcaption>Jello eating a marshmallow.”</figcaption> “</figure> “</main> “</body> “</html> @MANDY_KERR

Slide 10

interface dog { name: any age: any isFluffy: any } @MANDY_KERR

Slide 11

<html> <body> <div> <div>Jello”</div> “</div> <div> <div>Is he a fluffy fellow?”</div> <div>Jello is indeed a fluffy fellow.”</div> <div> <img href=“jello.png” alt=”A golden retriever” “/> <div>Jello eating a marshmallow.”</div> “</div> “</div> “</body> “</html> @MANDY_KERR

Slide 12

SECTIONING ELEMENTS.

<section> <article> <nav> <aside> @MANDY_KERR

Slide 13

CLEAR STRUCTURE AND HEIRARCHY.

<header> <footer> <h1> <h2> <h3> @MANDY_KERR

Slide 14

MAKE THE MOST OF HTML’S BUILT IN FUNCTIONALITY. @MANDY_KERR

Slide 15

DIVS. SPECIFIC HTML. @MANDY_KERR

Slide 16

LIGHTHOUSE @MANDY_KERR

Slide 17

@MANDY_KERR

Slide 18

Understanding CSS, SCSS, CSS in JS @MANDY_KERR

Slide 19

Simple tricks for LAYOUTS WITH CSS GRID @MANDY_KERR

Slide 20

Header Navigation Main Content Sidebar Footer @MANDY_KERR

Slide 21

3 COLUMNS Header Navigation Main Content Sidebar Footer FIXED FLUID FIXED @MANDY_KERR

Slide 22

FIXED AT 200PX FIXED AT 250PX .page { display: grid; grid-template-columns: 200px 1fr 250px; } @MANDY_KERR

Slide 23

.page { display: grid; grid-template-columns: 200px 1fr 250px; } FLUID FRACTION UNIT @MANDY_KERR

Slide 24

HEADER SPANS TWO COLUMNS Header Navigation Main Content Sidebar Footer @MANDY_KERR

Slide 25

SPAN FOR 2 header { grid-column: 2 / span 2; } START AT 2 (THE INDEX STARTS AT 1 NOT 0) @MANDY_KERR

Slide 26

FIREFOX: CSS GRID INSPECTOR grid-column: 2 / span 2; @MANDY_KERR

Slide 27

3 ROWS FIXED Header Navigation Main Content Footer Sidebar FLUID FIXED @MANDY_KERR

Slide 28

.page { display: grid; grid-template-columns: 200px 1fr 250px; grid-template-rows: 60px 1fr 60px; } @MANDY_KERR

Slide 29

3 ROWS Header SPANS ALL ROWS Navigation Main Content Sidebar SPANS TWO ROWS Footer @MANDY_KERR

Slide 30

.navigation { grid-row: 1 / span 3; } aside { grid-row: span 2; } @MANDY_KERR

Slide 31

@MANDY_KERR

Slide 32

@MANDY_KERR

Slide 33

MARSHMALLOW @MANDY_KERR

Slide 34

.block-group { display: grid; grid-gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } @MANDY_KERR

Slide 35

grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); @MANDY_KERR

Slide 36

@MANDY_KERR

Slide 37

.block-group:first-child { grid-column: 1 / -1; } @MANDY_KERR

Slide 38

@MANDY_KERR

Slide 39

@MANDY_KERR

Slide 40

YOU CAN USE CSS GRID FOR ALL SORTS OF LAYOUTS LIKE FORMS OR CARDS. @MANDY_KERR

Slide 41

2 Columns 3 Rows Span full width @MANDY_KERR

Slide 42

EVERY-LAYOUT.DEV GRIDBYEXAMPLE.COM @rachelandrew @MANDY_KERR

Slide 43

@MANDY_KERR

Slide 44

Making the page FULL HEIGHT @MANDY_KERR

Slide 45

A percentage of the full viewport height or width 10vh 10vw VIEWPORT HEIGHT VIEWPORT WIDTH @MANDY_KERR

Slide 46

.page { height: 100vh; } @MANDY_KERR

Slide 47

@MANDY_KERR

Slide 48

Some ways to ALIGN WITH FLEXBOX @MANDY_KERR

Slide 49

@MANDY_KERR

Slide 50

<div> <p>Jello is a fluffy fellow”</p> “</div> div { display: flex; align-items: center; text-align: center; } @MANDY_KERR

Slide 51

<div> <p>Jello is a fluffy fellow”</p> “</div> div { display: flex; align-items: center; justify-content: center; } @MANDY_KERR

Slide 52

<div> <p>Jello”</p> <p>Marshmallow”</p> “</div> @MANDY_KERR

Slide 53

<div> <p>Jello is a fluffy fellow”</p> “</div> A ROW!! div { display: flex; flex-direction: row; align-items: center; justify-content: center; } @MANDY_KERR

Slide 54

<div> <p>Jello”</p> <p>Marshmallow”</p> “</div> A COLUMN!! div { display: flex; flex-direction: column; align-items: center; justify-content: center; } @MANDY_KERR

Slide 55

<div> <p>Jello”</p> <p>Marshmallow”</p> “</div> @MANDY_KERR

Slide 56

ROW COLUMN JUSTIFY ALIGN JUSTIFY ALIGN @MANDY_KERR

Slide 57

.section-header { display: flex; justify-content: space-between; align-items: center; } @MANDY_KERR

Slide 58

WITHOUT FLEXBOX WITH FLEXBOX @MANDY_KERR

Slide 59

@MANDY_KERR

Slide 60

Working with VARIABLES IN CSS @MANDY_KERR

Slide 61

”// CSS “—primaryColor: #6c4bdf; color: var(“—primaryColor); “// scss $primaryColor: #6c4bdf; color: $primaryColor; “// JavaScript const primaryColor: ‘#6c4bdf’; color: primaryColor; @MANDY_KERR

Slide 62

Margins & Padding Colours Fonts @MANDY_KERR

Slide 63

Setting up CONSISTENT SPACING @MANDY_KERR

Slide 64

spacing-1: spacing-2: spacing-3: spacing-4: 9px; 18px; 27px; 36px; @MANDY_KERR

Slide 65

@MANDY_KERR

Slide 66

@MANDY_KERR

Slide 67

36px 9px 18px 27px spacing-1: spacing-2: spacing-3: spacing-4: 9px; 18px; 27px; 36px; @MANDY_KERR

Slide 68

TIPS Have a consistent set of spacing values Use a larger value between sections Use a medium value between boxes Use smaller values for content in tight spaces @MANDY_KERR

Slide 69

Adding in COLOURS & FONT SIZE @MANDY_KERR

Slide 70

@MANDY_KERR

Slide 71

TIPS Draw attention with a large font size Use a smaller font size for supplementary information Link colours should generally be consistent Have a colour palette @MANDY_KERR

Slide 72

coolors.co @MANDY_KERR

Slide 73

Styling THE MAIN NAVIGATION @MANDY_KERR

Slide 74

NAVIGATION @MANDY_KERR

Slide 75

nav a { display: block; color: white; text-decoration: none; padding: 18px; } BLOCK ELEMENT nav a:hover, nav a:focus { background: pink; color: white; } @MANDY_KERR

Slide 76

DISPLAY: INLINE Only take as much space as they need Displayed side by side You cannot set width, height or top & bottom margin Cannot contain block elements @MANDY_KERR

Slide 77

DISPLAY: BLOCK Take full-width by default (100% width of space) Displayed on a new line You can set a width and height Can contain other block elements @MANDY_KERR

Slide 78

INLINE BLOCK @MANDY_KERR

Slide 79

FIREFOX: CONTEXTUAL INFORMATION @MANDY_KERR

Slide 80

.navigation a { display: block; color: white; padding: 18px; } SET THE COLOUR INCREASE CLICK AREA @MANDY_KERR

Slide 81

MARGIN PADDING @MANDY_KERR

Slide 82

.navigation a:hover { background: pink; color: white; } MAKE REACT TO INTERACTION .navigation a:focus { background: blue; color: white; } @MANDY_KERR

Slide 83

@MANDY_KERR

Slide 84

.navigation a { display: block; color: white; text-decoration: none; padding: 18px; transition: background 250ms ease; } ANIMATE BETWEEN THE COLOURS @MANDY_KERR

Slide 85

@MANDY_KERR

Slide 86

Making PERFORMANT IMAGES @MANDY_KERR

Slide 87

@MANDY_KERR

Slide 88

<img src=”jello.png” width=”476” height=“479” “/> img { width: 300px; height: 300px; } @MANDY_KERR

Slide 89

@MANDY_KERR

Slide 90

<img src=”jello.png” width=”476” height=“479” “/> img { width: 100%; height: auto; } @MANDY_KERR

Slide 91

@MANDY_KERR

Slide 92

@MANDY_KERR

Slide 93

Aside.. STICKING THINGS @MANDY_KERR

Slide 94

nav { position: sticky; top: 0; } @MANDY_KERR

Slide 95

@MANDY_KERR

Slide 96

@MANDY_KERR

Slide 97

@MANDY_KERR

Slide 98

Slide 99

h1 { } margin: 0 0 18px 0; font-family: “IBM Plex Serif”, “Times New Roman”, serif; p { } margin: 0 0 9px 0; line-height: 1.3; a { color: #ce69ea; } a:hover, a:focus { color: #0e9dba; } img { width: 100%; height: auto; margin-bottom: 18px; border: 1px solid #59576d; } ol { } margin: 0; padding-left: 18px; 174 LINES OF CSS. ol li { margin: 0 0 18px 0; font-size: 0.9rem; } ol li span { font-weight: bold; display: block; color: #444051; font-size: 0.7rem; margin: 9px 0; } @MANDY_KERR

Slide 100

@MANDY_KERR

Slide 101

@MANDY_KERR

Slide 102

@MANDY_KERR

Slide 103

START WITH A STRONG FOUNDATION& BUILD UPON IT. @MANDY_KERR

Slide 104

THANK YOU MDN developer.mozilla.org/docs/Web Every Layout every-layout.dev Grid by Example gridbyexample.com CSS Tricks Flexbox Guide css-tricks.com/snippets/css/a-guide-to-flexbox CSS Tricks Grid Guide css-tricks.com/snippets/css/complete-guide-grid adognamedjello @MANDY_KERR