Are you working on a website design and don’t know which logo it will be using? Creating website templates for an online marketplace? You want to make sure the design is suitable for different logo shapes.
Nothing is more frustrating for clients having a logo that is to small or to big on your beautiful crafted website design.
Define a logo window for your website design. A logo window has a maximum width and height. It’s a container in which most different logo shapes fits. A logo window helps making your website design beter.
I’ve been there myself.
The hero module is widely used for websites. It usely consists of a large background image and a title. For this example I’ve also added a header with logo and menu button and two buttons for some call to action.
With Flexbox and the
vh unit you can create a flexible hero module with efficient coding.
Browser support for Flexbox and the
vh unit is great. You can read about browser support (and fallbacks) at the end of this article.
Let’s first start with the HTML. If this is overwhelming, don’t fear, I’ll go through it step by step.
Since the cool boys and girls are talking a lot about the new CSS Grid specification lately, it’s time to dig into this subject myself. For me, the best way by learning this, is: 1. choose a real world problem and 2. write about it in a post. The first is done and the second are you reading right now.
Please note, this is not a complete guide to CSS Grid. Others have already written about it. I’ve included references after this post. Please, also check the browser support of CSS Grid. …
These new attributes are available for some time now. However, I didn’t manage to understand it fully. There are great articles explaining this new syntax. But I couldn’t wrap my head around it. And especially, I missed in those articles how one could apply
sizes to real world problems.
So, that’s why I wrote this article about
sizes. It comes with an example of a common website layout: a page with sidebar. I hope it will help you better understand
sizes and how to apply it to your website projects.
Let’s start with the…