loading...

4 Ways to Style your Apps

vishnumohanrk profile image Vishnumohan R K ・2 min read

Own Styles

Writing everything on your own. Layout, buttons, cards, media-queries etc... You write everything from scratch, either using just CSS or with some pre-processors like SASS, LESS.

Utility Libraries

You have lots of utility classes for Flex box, margin, padding, colors and also for media-queries all of which you can customize with your own values of course. With this you build components, layout for your pages. You have to write very less to no custom CSS.
Eg: Tailwind CSS

CSS Frameworks

Of course above category can also be considered CSS framework but in this case, you have little to no utility classes. But instead you have a lots of components (depending on the one you choose). The advantage is you have lots of ready-made, fully responsive components.
And even, in some cases, some cool things, like this by Semantic UI. You also may get access to a responsive grid system, so layout is also made easy.
But the disadvantage is though you can customize them, most of the times, it all looks the same. (Not all time but in most cases, you can easily guess a website, if it is using this or that framework.)
Eg: Bootstrap, Semantic UI ...

Component Libraries

You get fully responsive ready-made components, with great accessibility support,in most cases, as they necessarily give you your markup as well. You can customize the components look with config file, props. These are also in most cases built following an already popular design system. There are also component libraries based on #2 and #3 categories mentioned above. You also get form validations, transitions and animations built in.
Eg: Material UI, Vuetify ...

Posted on by:

vishnumohanrk profile

Vishnumohan R K

@vishnumohanrk

Love writing code with JavaScript . IOT Enthusiast.

Discussion

markdown guide