A fast Introduction to the popular Layout Module

This introduction to CSS Flexbox, helps you to get a first impression. I will also show some examples to play around with. From here you will be able to integrate this powerful framework into your own projects.

The Flexible Box Model

CSS Flexbox is one way to design responsive layouts with CSS3. It is the first real possibility to create layouts with CSS. Floats were never meant for designing layouts and can only use it with workarounds.

It is also called the Flexible Box Model.

It is a layout mode or model, that make it easier to position elements vertical or horizontal in a…


What are Design Systems and who are Design Systems for

Photo by Bonneval Sebastien on Unsplash

Over the past few years, there has been quite a rise in the significance of Design Systems. This is the case for both small and large businesses. While many might find the whole process of understanding the development, implementation, and utilization of Design Systems to be complex and overwhelming, it is actually based on straightforward practices and fundamentals.

So, you might be wondering what is a Design System and why is it important? In this article, I will be talking all about what a Design System is and why we need them.

What is a Design System?

“Without a shared design language and practices, collaboration…


Photo by Julie Tupas on Unsplash

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers. In this article I will show how to build layouts in CSS Grids.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid.

Here is the markup for a container (parent) with six items (children) in it:

HTML

<div class="container">
<div class="item item1">1</div>
<div…

Jennifer Wjertzoch

Frontend Developer in love with CSS and JavaScript | Accessibility and Web Performance are not features

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store