Frictionless Front Ends for Back End Developers

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

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

Be explicit ABOUT THE SHAPE OF THE CONTENT. @MANDY_KERR

<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

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

<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

SECTIONING ELEMENTS.
<section> <article> <nav> <aside> @MANDY_KERR

CLEAR STRUCTURE AND HEIRARCHY.
<header> <footer> <h1> <h2> <h3> @MANDY_KERR

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

Understanding CSS, SCSS, CSS in JS @MANDY_KERR

Simple tricks for LAYOUTS WITH CSS GRID @MANDY_KERR

Header Navigation Main Content Sidebar Footer @MANDY_KERR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 Columns 3 Rows Span full width @MANDY_KERR

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

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

Some ways to ALIGN WITH FLEXBOX @MANDY_KERR

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

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

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

<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

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

ROW COLUMN JUSTIFY ALIGN JUSTIFY ALIGN @MANDY_KERR

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

WITHOUT FLEXBOX WITH FLEXBOX @MANDY_KERR

Working with VARIABLES IN CSS @MANDY_KERR

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

Margins & Padding Colours Fonts @MANDY_KERR

Setting up CONSISTENT SPACING @MANDY_KERR

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

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

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

Adding in COLOURS & FONT SIZE @MANDY_KERR

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

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

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

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

FIREFOX: CONTEXTUAL INFORMATION @MANDY_KERR

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

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

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

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

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

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

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

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

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

Mandy Michael
@mandy

1 / 104

For your users and customers, your frontend is your product. And if you are interested in learning how to build better frontends for them, Mandy has you covered. No matter your skill level and familiarity with HTML/CSS or JavaScript.

She will be walking you through some easy to use, but very powerful, techniques to put together simple layouts, and interactions. As we will be using straight HTML & CSS, it doesn’t matter if you use a front-end framework like React or Vue or write your HTML and CSS by hand.

By the end of the talk, you’ll see what a few practical tips can do to bring your frontend to the next level.

Buzz and feedback

Here’s what was said about this presentation on social media.

Next up at #ndclondon I’ll be learning how to front-end with @Mandy_Kerr. I’ve been looking forward to this one. pic.twitter.com/Xd22GVBSxq
— Rob Crowley (@robdcrowley) January 29, 2020
“I’m not a sword fighter, I am a front-end developer” - @Mandy_Kerr 😂
— Rob Crowley (@robdcrowley) January 29, 2020

Frictionless Front Ends for Back End Developers

Link for this presentation:

HTML code for embedding:

Share on social media:

Buzz and feedback