Skroutz redesign how to approach Card-based design &

SASS content-specific breakpoints

DEVit workshop - May 2016

Giorgos Katsiampas

■ g.katsiampas@skroutz.gr

■ twitter.com/katsampu

Front-End developer @Skroutz.gr

■ front-team@skroutz.gr

■ engineering.skroutz.gr

■ twitter.com/SkroutzDevs

■ github.com/skroutz

■ skroutz.workable.com

we will talk about:

at this workshop

■ Why we need to redesign a site

■ What Card-based design provides

■ What Media Queries and Element Queries are

■ How to create a list with items we can position as we want with SASS

1. Why redesign?

■ To make it responsive

■ To add new functionality

■ To improve User Experience

■ To improve code quality & performance

■ To rebrand the site

■ The purpose of your site has changed

1. Why redesign?

■ To make it responsive

■ To add new functionality

■ To improve User Experience

■ To improve code quality & performance

■ To rebrand the site

■ The purpose of your site has changed

1. Why redesign?

1. Why redesign?

1. Why redesign?

1. Why redesign?

1. Why redesign?

2. Why Card-based design

2. Why Card-based design

3. Media Queries vs Element Queries

Media Queries: apply styles based on the browser environment they are being viewed on (the most common thing: the browser's width).

Element Queries: a Media Query but for an element, rather than the environment. It naturally apply styles due to the width of the respective containers.

3. Media Queries vs Element Queries

Can you think of why there are no Element Queries?

Can you think of a tag where Element Queries apply now?

CSS was invented (1994) to style simple documents with high-quality typography, i.e. pages with a single column layout that contain a lot of text! For more complex layouts something else should have been invented, but since this didn’t happen, most started using CSS for other purposes!

CSS wasn’t designed to do what it does

Fact:

4. Exercise

Let’s create Skroutz.gr ’s recently viewed section

1. Fork codepen.io/katsampukas/pen/ZWNaWB

2. Add media queries for min-width: 500px min-width: 700px min-width: 1000px

4. Exercise

3. Make list items behave as follows: min-width: 500px : 2 items per rowmin-width: 700px : 3 items per rowmin-width: 1000px : 4 items per row, all in one row

4. Solution: codepen.io/katsampukas/pen/ONYqrP

4. Exercise

5. Write a SASS mixin to emulate the previous behavior with the following params:- Viewport- Items per line- If items will be shown in 1 row or in multiple rows

6. Solution: codepen.io/katsampukas/pen/JXqVXx

Questions / Follow-up

We hope you got some value from the workshop.Or maybe you have a question about it.

■ twitter.com/SkroutzDevs {#devit}

■ front-team@skroutz.gr

■ engineering.skroutz.gr

■ skroutz.gr/blog

■ github.com/skroutz

■ skroutz.workable.com