inc rem ental ly Responsive


Simon Knox
Frontend Enthusiast, Kogan.com
@psimyn

k3

## Take 1 m.kogan
# Responsive Goals 1. Feature parity 1. Responsive design 1. Speed
## Take 2 - F5
# Responsive Goals Redux 1. Responsive ~~design~~ 2. Consistent style 3. Don't break stuff

homepage.css

checkout.css

src: github.com:chandlerprall/Physijs.git

take 3 - incremental

  1. Small - now
  2. Hacks - soon
  3. Components - later
### chapter 1 # small

						.page-content {
							width: 1000px;
						}
					

						.page-content {
							width: 100%;
							max-width: 1000px;
						}
					
*not actually **also not a real thing

						.page-content {
							min-width: 1000px; // todo: delete when responsive
							width: 100%;
							max-width: 1000px;
						}
					
## Good breakpoints? - 320px - 375px - 768px Note: - doesn't matter what they are really. try changing them in early days, test stuff is still ok
## Not really - ~~320px~~ - ~~375px~~ - ~~768px~~ Note: - don't let device widths determine breakpoints. you may as well be making mobile apps because you hate your users

just pick something

it will probably change anyway
  • 400px
  • 620px
  • 800px
(don't use px though)

Media query longhand


					$small-max: 399px;
					$medium-min: 400px;

					@media (max-width: $small-max) {
						display: none;
					}

					@media (min-width: $medium-min) {
						display: block;
					}

				

Media query shorthand


					$small: 400px;

					@include media('<​small') {
						display: none;
					}

					@include media('>=small') {
						display: block;
					}


	     kogan.com?somewhat-responsive=go

A small meeting

dank basement optional

src: https://unsplash.com/photos/BuMVDXZTGn0

chapter 2

hacks and bad advice

Float Layouts

Using float for layouts is a hack

internet

Flex Layouts

Column flex items set to
align-items: center;
overflow their container

flexbugs

Layouts

CSS is a hack

probably somebody

Nesting


	.k4 p {
		line-height: 1.5;
	}
					

	.legacy p {
		line-height: 1.2;
	}
					

seriously, don't nest


<​body class="k4">
	...
			

The gratest of all time

<​/body>

	.product-description {
		color: $red;
	}

	.k4 p {
		color: $black;
	}
					

Chaining beats nesting. sometimes


	.product-description.product-description.product-description {
		color: $red;
	}
					
NB: please don't use this as a pattern

Variablise

Start near to usages

// page-content.css

	.page-content {
		min-width: 1000px; // todo: delete
		width: 100%;
		max-width: 1000px;
	}
					
// not far away
	$content-width: 1000px;

	.page-content {
		min-width: $content-width;
		width: 100%;
		max-width: $content-width;
	}
					

Incrementally Atomic

src: http://patternlab.io/

Incrementally Atomic

src: http://patternlab.io/

Incrementally Atomic

src: http://patternlab.io/

Mixinify


		@mixin constrain($width) {
			min-width: $width;
			width: 100%;
			max-width: $width;
		}

		.page-content {
			@include constrain(1000px);
		}
						

		.nav-content {
			@include constrain(1000px);
		}
						

But know when to steal


			@mixin invisible() {
			  border: 0;
			  clip: rect(0 0 0 0);
			  height: 1px;
			  margin: -1px;
			  overflow: hidden;
			  padding: 0;
			  position: fixed;
			  width: 1px;
			}
					
src: snook.ca

bonus hack: checkbox

src: http://codepen.io/THISISAGOODNAME/pen/pgRVvR

	
	
				

	.menu {
		transform: translate(-100%);
	}
					

	#toggle:checked + .menu {
		transform: translate(0);
	}
					

	#toggle:checked + .menu-wrap > * .menu__link:nth-child(2n) {
		opacity: 1;
	}
					

		
		
						

Selector perf


	.make_it_work:before + .you > .worry-about-speed {

		animation: spin;

	}
					

Viewports - The Responsive Switch


	
					

	
					

chapter 3

compartmentalise

1. Lock up old CSS, hide the key


						unresponsive.css

						do-notAdd_to-this.css

					  ͝ .css
					

2. Inverted Nesting


	

	.product {
		color: $black;

		.sale & {
			color: $red;
		}
	}
					

2a. Component Media Queries

and simple defaults


	.product {
		font-size: 1em;

		@include media('>=large') {
			font-size: 3em;
		}
	}
					

3. Namespace without Nesting


	.product-tile__price { }

	.product-tile-price__currency { }
					

	.product-tile__price {
		&--big {
			// you can't search for this now :(
			// you can put name in a comment
		}
	}
					

epilogue

Thank you!


Simon Knox

@psimyn