Maintainable rwd with

Sass 3.2 & Zen-grids

- Liv Madsen / Frontend-udvikler hos Creuna / @livmadsen

Good old media queries

						
.example-element-1 {
	background: salmon;
}

.example-element-2 {
	background: rosybrown;
}

@media all and (min-width: 300px) {
	.example-element-1 {
		background: PaleGoldenRod ;
	}
	.example-element-2 {
		background:SeaGreen ;
	}
}

@media all and (min-width: 600px) {
	.example-element-1 {
		background:Turquoise ;
	}
	.example-element-2 {
		background: SteelBlue ;
	}
}

Overblik?

Nemt at læse?

Nemt at vedligeholde?


I think not

Enter Sass

Mmm... nesting

					
.example-element-1 {
	background: Salmon;

	@media all and (min-width: 300px) {
		background: PaleGoldenRod ;
	}

	@media all and (min-width: 600px) {
		background: Turquoise ;
	}
}

.example-element-2 {
	background: RosyBrown;

	@media all and (min-width: 300px) {
		background: SeaGreen ;
	}

	@media all and (min-width: 600px) {
		background: SteelBlue ;
	}
}
					
					Tjoe. Det er da bedre.

Mmm... mixin content blocks

						
$medium: 300px;
$large: 600px;

@mixin mq ($min-width){
	@media all and (min-width: $min-width) {
		@content;
	}
}

.example-element-1 {
	background: Salmon;

	@include mq ($medium) {
		background: PaleGoldenRod ;
	}

	@include mq ($large) {
		background: Turquoise ;
	}
}

.example-element-2 {
	background: RosyBrown;

	@include mq ($medium) {
		background: SeaGreen ;
	}

	@include mq ($large) {
		background: SteelBlue ;
	}
}

Men...



MOAR mixins!


@mixin small{
	@include mq ($small) {
		@content;
	}
}

@mixin medium{
	@include mq ($medium) {
		@content;
	}
}

@mixin large{
	@include mq ($large) {
		@content;
	}
}
						

.example-element-1 {
	@include small {
		background: Salmon ;
	}

	@include medium {
		background: PaleGoldenRod ;
	}

	@include large {
		background: Turquoise ;
	}
}

.example-element-2 {
	@include small {
		background: Rosybrown;
	}

	@include medium {
		background: SeaGreen ;
	}

	@include large {
		background: SteelBlue ;
	}
}
						
-> ie.css:
							
.example-element-1 {
  background: paleGoldenRod; }

.example-element-2 {
  background: seaGreen; }

Happy days =]

For eksempel... https://github.com/livmadsen/zen-grids-example/

Så er basen vist klar.


Let's grid it on!

Sig pænt goddag til

  • Bygger på Sass/Compass
  • Fluid eller fast bredde
  • Anvender container-relative floats

Container-relative floats?

http://palantir.net/blog/responsive-design-s-dirty-little-secret

  • "nulstiller" horisontalt flow offset
  • minimerer risiko for rounding errors
  • en smule uafhængighed af source order

Og så kiiigger vi på eksemplerne

https://github.com/livmadsen/zen-grids-example/

Pit falls?

  • Vertikalt flow kan brydes
  • Komplekse grids kan blive uoverskuelige
  • Hold øje med bloat i output

Links