Cephalosporin and Carbapenem Inhibition Zone Breakpoints ...
Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints
-
Upload
skroutz-sa -
Category
Design
-
view
308 -
download
1
Transcript of Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints
![Page 1: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/1.jpg)
Skroutz redesign how to approach Card-based design &
SASS content-specific breakpoints
DEVit workshop - May 2016
![Page 2: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/2.jpg)
Giorgos Katsiampas
■ twitter.com/katsampu
Front-End developer @Skroutz.gr
■ engineering.skroutz.gr
■ twitter.com/SkroutzDevs
■ github.com/skroutz
■ skroutz.workable.com
![Page 3: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/3.jpg)
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
![Page 4: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/4.jpg)
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
![Page 5: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/5.jpg)
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
![Page 6: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/6.jpg)
1. Why redesign?
![Page 7: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/7.jpg)
1. Why redesign?
![Page 8: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/8.jpg)
1. Why redesign?
![Page 9: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/9.jpg)
1. Why redesign?
![Page 10: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/10.jpg)
1. Why redesign?
![Page 11: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/11.jpg)
2. Why Card-based design
![Page 12: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/12.jpg)
2. Why Card-based design
![Page 13: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/13.jpg)
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.
![Page 14: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/14.jpg)
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?
![Page 15: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/15.jpg)
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:
![Page 16: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/16.jpg)
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
![Page 17: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/17.jpg)
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
![Page 18: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/18.jpg)
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
![Page 19: Skroutz redesign - How to approach card-based design & SASS content - specific breakpoints](https://reader033.fdocuments.in/reader033/viewer/2022042722/588b1cf21a28ab78398b58bd/html5/thumbnails/19.jpg)
Questions / Follow-up
We hope you got some value from the workshop.Or maybe you have a question about it.
■ twitter.com/SkroutzDevs {#devit}
■ engineering.skroutz.gr
■ skroutz.gr/blog
■ github.com/skroutz
■ skroutz.workable.com