feat: Implement enhancements for new design #192
Conversation
A line-clamp is more flexible for different device types and always clamps to three lines. This makes better use of the available space.
✅ Deploy Preview for fipguide ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| margin-bottom: 2rem; | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
What added value does it have compared to Bootstrap?
There was a problem hiding this comment.
I see a few advantages:
- Reduced bundle size when removing Bootstrap completely, initially discussed here: Check necessity of bootstrap #74 (comment). If we still want to get rid of Bootstrap, I'd slowly decrease the dependency and at least leave it out from newly introduced code.
- Native DevTools support. Chrome and Firefox have some neat development tools around grid layout. The devtools didn't work with the bootstrap grid layout.
- Less chance of breaking changes. Bootstrap is under active development and can introduce breaking changes. CSS itself is considered as rather stable.
assets/sass/styles.scss
Outdated
| .o-startpage__shortcut-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr 3fr; | ||
| gap: 2rem; | ||
| margin-bottom: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .o-startpage__search { | ||
| margin-bottom: 2rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .o-startpage__news-teaser-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr 1fr; | ||
| gap: 2rem; | ||
|
|
||
| @media (max-width: #{$breakpoint-md}) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
What added value does it have compared to Bootstrap?
There was a problem hiding this comment.
Some as here: #192 (comment)
| object-fit: cover; | ||
| height: 100%; |
There was a problem hiding this comment.
in my opinion, we should show the images always in aspect-ratio 16/9. Don't you think so?
There was a problem hiding this comment.
I disagree here :)
Let's have a look at the news list with a viewport that has a width of 850px.
This is the previous version:
I can see mainly two issues here:
- The images have a small white line at the bottom because they can't fit properly.
- The text preview is very limited.
Number 1 is probably easily fixable. Number 2 is more challenging: When I increase the preview lines, the height increases. When we would preserve the image ratio now, the width would also increase and takes away the space that I would use for the content preview.
In the updated version, I have three preview lines. The aspect ratio is not 16:9 anymore, but because of the CSS object-fitting, it just zooms in slightly. Still looks good in my opinion.
| } | ||
|
|
||
| .m-teaser__text { | ||
| line-clamp: 3; |
There was a problem hiding this comment.
in my option, three rows are too much
There was a problem hiding this comment.
I checked a few blogs and most of them have around 5 lines of preview. Also bahnhof.de has more than three lines in their news:
Since our case with "news" is pretty similar, I'd argue that three lines are still ok. Two lines often don't even let the user read the first sentence.
| @@ -22,7 +22,7 @@ <h3 class="m-teaser__headline">{{ $page.Title }}</h3> | |||
| </a> | |||
|
|
|||
| <div class="m-teaser__text"> | |||
| {{ $page.Summary | plainify | truncate 100 }} | |||
| {{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }} | |||
There was a problem hiding this comment.
Do we need truncate if we use a line clamp?
There was a problem hiding this comment.
Yes. Line clamp is just a CSS property and doesn't influence the size of the DOM. With truncate, only a part of the content is added to the DOM of the list view. If we don't use it, it would always add the full content, which increases the size of the page slightly.
I tried to split the different parts into different commits, so that we can easily take out some individual parts.