Designing Websites for iPhone X

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners or the device’s sensor housing. The inset area is filled with the page’s background-color (as specified on the… continue reading



Learn by trying out CSS Grid Exercises

A lot of people are getting excited about CSS Grid, and want to learn it. A lot of people are also super busy. So let me teach you some very basic things about Grid, and get you started with a 5-minute taste. Unlike Bootstrap or any of the other layout frameworks we’ve been using for… continue reading



The invisible parts of CSS

If you use CSS in your daily work, your primary goal is probably focused around making things ‘look right’. How this is achieved is often far less important than the end result. This means we care less about how CSS works than the correct syntax and visual results. You may not have realised it, but… continue reading



Graaf: CSS grid overlays for designing

Graaf doesn't have any external dependency. To add it to your project, you only need to select the grid that fits for your design and link the stylesheet in your head HTML tag. For example, if you want to add graaf grid overlay, just copy the following code in your head tag: <link rel="stylesheet" href="//s3-eu-west-1.amazonaws.com/graaf/graaf.css">