CategoryCSS

July 23, 2020 — Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS. Read more…

July 22, 2020 — Which aspects should we take into consideration when designing and developing for reading? How can we create accessible, comfortable, inclusive experiences for all readers, including the most challenged and those affected by dyslexia? In this article, Edoardo Cavazza will cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and putting into practise what we learned from doing scientific researches. Read more…

July 21, 2020 — The most efficient way to build accessible websites and apps is to “shift left” by incorporating accessibility testing into the earliest stages of your development and design process. In this article, Harris Schneiderman will walk you through the process of analyzing a wireframe from an accessibility perspective and making coding decisions to optimize for accessibility in both design and development phases. Read more…

July 10, 2020 — Transitions are a nice way to remove, change, or update data in an application because their occurrence adds a nice effect and is good for the user experience. In this tutorial, Timi Omoyeni will look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Using these transitions in your applications and websites create a better visual experience and sometimes draws and holds the user’s attention while a piece of information is being introduced to or leaving the screen. Read more…

July 7, 2020 — If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now. Read more…

June 30, 2020 — We’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out. Read more…

June 26, 2020 — In the tenth issue of Inspired Design Decisions, Andy Clarke will explain how Giovanni Pintori — the Italian graphic designer best known for his work with Olivetti — can inspire design for the web with his distinctive use of color and shape. Andy will teach you how to use color to attract attention and then to lead someone’s eye around a design. He’ll discuss how a minimal color palette can act as a guide, helping people through a design, and how lines and shapes add structure and style. Read more…

May 25, 2020 — Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. It does not have any JavaScript and works well with existing frameworks such as React, Vue, Angular, Ember, and others. Whilst this is positive, it can be confusing for new developers to understand how to integrate Tailwind in their applications. In this article, Tilo Mitra will explore ways to build reusable React components using Tailwind. Read more…

May 22, 2020 — These days, product companies seem more interested in refining interfaces and simplifying user experiences. In this ninth issue of Inspired Design Decisions, Andy Clarke will explain how studying the work of Max Huber — one of the less well known but most distinguished Swiss designers — will teach you how to turn mundane subjects into exciting visual communication. Read more…

May 12, 2020 — For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be. Read more…