Learning backwards with the aid of visual and feedback-driven CSS style generators is a great way to help you sift through the litany of repetitive parameters and quickly get to the parts you actually want to use.
There are many helper web apps out there to design certain style aspects for your pages and get rendered for you some boilerplate syntax that you can add to your own code. Below, I’ll briefly describe a few useful helpers that I like, as well as compare them to working with CSS frameworks like Bootstrap,
- CSSmatic
CSSmatic is a very user-friendly to design a few essential styling elements quickly and easily. The ‘few essential’ being gradients, borders, and box shadows, with a cool little background pattern creator using pixel noise. The workflow of the site is easy, you use their options and sliders to set up what you want and then it gives you the relevant line of code to pop into your .css files.
It provides a great way to start up your page fast without having to guess how on all your ##px sizing, and also can help show you WHICH parameters for you divs and containers actually matter for you. The code is also output live to you, so you can watch which parameters are changing which parts of your style as you edit in the web app.
2. CSS Grid Generator
CSS Grid Generator is another one that can help get the foundations of your pages up and running quickly. It provides a quick and easy way to see and understand how to setup your page using the grid system of CSS and HTML. If you aren’t using a framework like Bootstrap (which comes with its own built in classes for rows and columns and what not), setting this up can be confusing and a little hard to translate the code to what it looks like in your head. The grid generator here is a good way to get that going, and in the process understand how grid styling works, which using a framework can slightly circumvent.
3. The Ultimate CSS Generator
Webcode.tools hosts a number of different code generators, including one for CSS (which is titled as above). It is like a catch-all for generating style code. It has simple parameter control and selection for everything from animations, to image filters, to text layout. While a little less in-depth in regards to the four specific things that CSSmatic does, in my opinion, it certainly has more robust features and a clean interface. It can help you cut through the fat quickly to get to what you actually need.
4. PurgeCSS
Lastly, I’ll quickly talk about a tool for the opposite direction. PurgeCSS is a tool that, when added to the end of your workflow, will remove unused CSS from your files. When making complex websites file sizes can potentially start to bloat, especially when using large framework like Bootstrap which you might barely use 5% of in your website. PurgeCSS will scrap the remaining library you imported while keeping what you used, resulting in a much snappier application.
These are just a few of a vast number of these CSS code generators out their on the web. You can find many similar ones for designing text styles, borders, or whatever else you’re looking for. Linked here is a HUGE list of other options (https://cssauthor.com/css-generators/) that I could not begin to parse through.
The one problem with using these, I found, is more so a problem with using a more robust framework like, as I’ve mentioned a few times in this post, Bootstrap. By the nature and necessity of Bootstrap having so many features, it becomes opinionated. The basic design aesthetics of anything made with Bootstrap tend to all look the same, because the basic design parameters are hard to change with a LOT of extra effort. To give a quick example, the padding of container/row/column classes in bootstrap aren’t directly accessible without overwriting their classes. This also makes it hard to incorporate code you have generated through one of these helpers, so weigh the pros and cons whether getting the foundations for your styling done with a framework or with these helpers might be more beneficial to you.
