web publishing magazine

CSS Grid —
More flexibility with minmax()

CSS Grid is a great way to create complex layouts. But sometimes you need a little more flexibility to set the width of the columns. This is where the CSS function minmax() comes in. Here you will find a very good description of how to use this CSS function.

minmax() is a function that can be used in your grid-template-columns or grid-template-rows property to size your grid tracks. It takes (you guessed it) a minimum value and a maximum value, which can be a length (pixels, ems, etc.), a percentage, a flexible fr unit or a keyword.

Experimental layouts with CSS Shapes and clip-path

In the last article we already mentioned the future of CSS. Also today we would like to draw your attention to a CSS feature, which is still not used very often. This is probably due to the still somewhat incomplete support on the part of the current browsers, on the one hand, but also to several problems when it is used on responsive websites. We are talking about CSS shapes. In the article “Experimental layouts with CSS Shapes and clip-path” you will find a lot of practical information and of course some examples.

September 19, 2018 — Dirk Einecke

On switching from HEX & RGB to HSL

Most of us web developers still use the Hexadecimal and RGB(A) color formats to specify color values. However, there are signs of a turnaround towards the HSL format. Why you should change and how this could happen can be read in the article “On Switching from HEX & RGB to HSL” by Sara Soueidan (Freelance Front-End Web UI/UX Developer from Lebanon).

August 20, 2018 — Dirk Einecke

The Ultimate Guide to Learning CSS

From the basics to detailed expert knowledge. “The Ultimate Guide to Learning CSS” offers something for everyone.

How do you learn CSS? CSS is a vast subject, with many different layers to learn about covering all different aspects of manipulating the display of elements on a page.

August 8, 2018 — Dirk Einecke

CSS Grid —
what is behind this concept and what are the basics

In times of responsive web design, everyone of us has surely already used the grid of some CSS framework (for example bootstrap). But what is behind this concept and what are the basics? One of the best and most detailed articles is certainly “CSS Grid – The Swiss Army Knife For Website and Application Layouts” by Greg Sidelnikov.

During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.

August 7, 2018 — Dirk Einecke

How to maintain CSS of big projects

When beginning a project, all is working fine. You have a few CSS selectors : .title input #app, easy peasy. But when your app gets bigger and bigger, it starts to look awful. You’re confused about your CSS selectors.

… but how to maintain CSS of big projects? There is an awesome article on freeCodeCamp. Recommended reading!

Photo by Jantine Doornbos on Unsplash

July 19, 2018 — Dirk Einecke