Motivation
From the perspective of a backend developer who is not a CSS wizard, lay outing is often one of my most challenging and time-consuming aspects of web development. It can be frustrating to spend hours trying to get the layout just right. That's where the Solid Layout Library comes in. The goal of this library is to provide a solution to this pain point by offering minimal, lightweight, and highly customizable layout components. These components are designed to simplify the process of creating basic layouts and user interfaces, allowing backend developers like me to focus on the core functionality of their applications when they need to do some Frontend stuff ore just like to tinker around.
Styling Convention
Solid-Layout doesnt follow any specific styling convention. It is designed to be used with any styling convention you like. You can override the default styling by overwriting the css classes or by using the css prop. However,
Breakpoints
need to be overwritten by using css.
Overwriting CSS Variables
If you like to overwrite defualt variables make sure to look up the hash in the dist directory and copy it.They can change from version to version
Why does this layout library only use standard breakpoints?
This layout library is designed to use standard breakpoints to ensure the best compatibility and performance across a wide range of devices. By sticking to these standard breakpoints, we can ensure that the layout will work well on the majority of devices that users are likely to be using.
Why can't these breakpoints be dynamically modified?
The reason these breakpoints can't be dynamically modified is due to the nature of CSS. CSS, or Cascading Style Sheets, is a static language, not a dynamic one. This means that once the CSS is loaded by the browser, it can't be changed until the page is reloaded or a new CSS is applied.
In particular, CSS media queries, which are used to apply different styles for different devices based on characteristics like screen size, can't be dynamically modified with JavaScript or any other means. They are set when the CSS is loaded and remain the same until the CSS is reloaded.
Specifically, CSS variables cannot be used within media queries. Media queries are fixed and cannot be dynamically adjusted to respond to changes in CSS variables. Therefore, the breakpoints, which are based on media queries, cannot be dynamically modified to respond to changes in CSS variables. This is a limitation of the CSS language itself, and not specific to this layout library.