This repository stores examples that allow identifying how various CSS design patterns are constructed. Below is a brief description of the included patterns:
CSS Grid is a two-dimensional layout system that allows creating complex layouts easily. It uses a grid of rows and columns to organize content.
Flexbox is a one-dimensional layout model that facilitates the alignment and distribution of elements within a container. It is ideal for creating flexible and responsive layouts.
The Sidebar pattern refers to a side panel that contains navigation or other secondary content. It is common in web applications and content-heavy sites.
Layout Shifter is a pattern that adapts the page layout according to the screen size. It allows content to reorganize to provide a better experience on both mobile and desktop devices.
Tiny Tweaks are small adjustments made to the design to improve usability and appearance. These can include changes in spacing, colors, typography, among others.
Mostly Fluid is a design pattern that uses fluid units (like percentages) for most elements, allowing the layout to adapt to different screen sizes, while some elements may have fixed sizes.
This repository is a collection of practical examples that illustrate how these design patterns are constructed.