How to style modern applications in a simple way?
It doesn’t matter what product you are building, one thing is certain — changes are coming. When you are trying to build useful products you should be ready for constant evolution, so in the back of our mind, we always need to have two simple words — “be agile”.
To better understand where I’m coming, I would like to tell more about the problems I have encountered problems and how I troubleshoot them. Therefore, let’s explore some easy examples.
Non-linear transitions
The first solution to try when attempting to avoid any inconsistencies in projects is to create at the file with sets of classes describing fonts sizes standards.
In the result, thanks to the above approach we are now able to prepare files with all typography rules in the project with behavior like this:
Linear transitions
This second type of transition is more innovative, but also more complicated to deliver than non-linear transitions. To achieve smooth transitions across breakpoints, use the linear interpolation function with viewport calculations.
In the above example, an external mixin performing linear magic has been used. More pieces of information on how linear interpolation works can be found in the great article “CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations” posted by @jakobud.
Sets of sizes and dimensions
Preparing files with all styles is always good practice. It is like having a database of dimensions and sizes used within the whole application. An excellent example of the utils file can be style kit with typographies:
However, be aware that the number of utility files scales progressively larger alongside the complexity of the application, meaning that they can become more and more difficult to maintain. In fact, it is worth remembering that in utility classes, the only information that is really relevant concerns names, breakpoints, and values. Needless to say, additional automatic generation shouldn’t cause problems here.
Style encapsulation
The term “style encapsulation” is mainly associated with shadow DOM. This means we can encapsulate some styles to the existing node on the DOM tree. The idea behind encapsulation involves defining private bits of code — so that styles don’t leak outside of elements. The magic of encapsulation allows for the creation of reusable web components. Yeah, we ❤️ it!
How we can manage our global styles and keep consistency in the application using “shadow DOM” encapsulation?
The solution is the app configuration imported into all components with variables, breakpoints, colors, and dimensions.
Accordingly in the single page application like Angular, React or Vue with the Sass combination, to resolve this problem in the pretty cool way you can use @include or @extend. Both ways allow achieving inherits but only one of them provide the code automation because the dynamic declaration of functions is not supported by Sass. In consequence, It means that the generation of the sets of RWD styles is possible only thanks to the @extend method.
Where are we heading?
On the whole, products have various assumptions and requirements which sometimes could have changed. We can’t predict everything that may have happened, but we can be ready in expecting some typical cases. Imagine that all of the solutions from the above examples are in one place, ready for deployment:
- non-linear transitions
- linear transitions
- sets of all sizes and dimensions
- style encapsulation
All you need to do is prepare settings like below and the whole style kit will be generated automatically 💪
All things considered, changes associated with app consistency into responsive web design projects are easier than we ever thought because we combine behaviors and approaches together in one settings file. Moreover, we can say that any modification for fonts, sizes, dimensions are no longer a source of big challenge for developers.
It’s easy, right? And it’s all possible thanks to the light SSCSS open source library.
Let’s me know if you like it and don’t forget about ⭐ on the GitHub!