All pre-settings such as breakpoints, font size scale, etc., can be easily configured. Furthermore, TailwindCSS can be fully adapted to the respective needs of a project. The project continues to be actively developed and supports many popular systems for front-end development.
TailwindCSS has several advantages over Tachyons. These are example elements that are fully defined using utility classes.Ī successor to Tachyons is TailwindCSS. The simplest way to understand the approach is to look at the Tachyons components. However, because of its simplicity, Tachyons is still a great way to learn responsive web design. The Tachyons framework is now a few years old and is no longer actively being developed. By combining several classes, almost any responsive elements can be put together. For each atomic property, a CSS utility framework contains classes for each defined breakpoint. In addition to the dimensions of an element, this includes information on typography, colour, and all other conceivable properties. Furthermore, within the already introduced breakpoints ‘medium’ and ‘large’, we define corresponding CSS classes whose names contain the abbreviated breakpoints:ĬSS utility frameworks define many atomic classes, with each class specifying only one CSS property. First, we define the classes ‘mw1’ to ‘mw3’, which limit the maximum width of any element to values between ‘1rem’ and ‘3rem’. Let’s consider another example borrowed from Tachyon's CSS utility framework. Therefore, CSS utility frameworks are often used in conjunction with component-oriented technologies such as React and Vue. The use of a CSS utility framework allows rapid prototyping and is ideal for developing components. This makes it possible to define responsive layouts and components in HTML only, without having to write CSS code.
The resulting CSS classes can be assigned to any element in HTML. This is where the CSS utility frameworks come in.Ī CSS utility framework links atomic CSS properties with breakpoints. They also need to assign unique class names to the elements in HTML. First, we define the container and the elements it contains in HTML:Įncapsulating CSS Media Queries within the style rules of an element and processing them using a CSS processor works, but it forces the developer to switch back and forth between HTML and CSS. With the Flexbox Layout module and a CSS Media Query, which asks for the alignment of the device, the layout can be implemented with a few lines of HTML and CSS. When tilting the device to landscape format, the layout should switch so that the elements are displayed side by side. The elements should be displayed one below the other on the screen of a mobile device when the device is held upright. Imagine we want to display three elements in a container. Usually, you define the basic properties of the elements and then selectively overwrite properties under certain conditions. In ‘CSS’, the mixing of existing and newly defined style rules is expressed by the word ‘cascading’: an element inherits style rules from parent elements or general rules that have been pre-defined.
On screens with a width of 1,024 pixels or more the line spacing is proportionally 36px * 1.25 = 45px. In this example, the line spacing of the h1 element in the basic state is 24px * 1.25 = 30px. The line spacing is defined as a relative unit using the ‘line-height’ property and is – as it is not explicitly overwritten – inherited. Note that we are only adjusting the ‘font-size’ property of the h1 heading.
0 kommentar(er)
