Home / CSS3 / 6 Extremely practical Web designer’s CSS tools

6 Extremely practical Web designer’s CSS tools

Wednesday August 11, 2021
7 minutes read
210 Views
css tools

Modern CSS development has gone a long way with tools that are more accessible to suggested practices.

Creating websites is simple thanks to a plethora of free CSS libraries, tools, web apps, and automated scripts.

Today’s CSS tooling has progressed to the point where the workflow can be not just tamed but also enjoyed. In this article, I’ll discuss five CSS tools that I’ve found to be really useful in my work. I’ve purposefully avoided “toy” tools like CSS generators, menu generators, and other similar tools because they cause more difficulties than they solve.

The CSS train is on its way! Let’s get started!😛 😀

1- PostCSS

The PostCSS utility is a CSS-JS library that sits in the middle. It functions as an automated grab bag of ready-to-use solutions for common problems such as grid creation and code linting.

post-css

PostCSS combines multiple excellent packages/features, resulting in a much more enjoyable and straightforward CSS process. Consider the following example:

  • Depending on the property you’re utilising, vendor prefixes are automatically appended.
  • The ability to determine whether CSS features are compatible with the current browser.
  • Using CSS’s future, yet-to-be-released, yet-to-be-released, but extremely powerful syntax improvements.
  • A dynamic grid that’s as adaptable as they come.

If I don’t include the grid example, I don’t think I’ll be doing PostCSS justice. So let’s get started. Something as straightforward as this:

div {
  lost-column: 1/3 
}

CSS system that takes care of practically all edge cases:

div {
  width: calc(99.9% * 1/3 -  
  (30px - 30px * 1/3)); 
}
div:nth-child(1n) {
  float: left; 
  margin-right: 30px; 
  clear: none; 
}
div:last-child {
  margin-right: 0; 
}
div:nth-child(3n) {
  margin-right: 0; 
  float: right; 
}
div:nth-child(3n + 1) {
  clear: both; 
}

PostCSS isn’t straightforward to set up because it’s JS-driven, especially if you’re a designer who hasn’t worked with modules, bundlers, or the npm world in general. However, PostCSS has a lot of promise in your work and shouldn’t be disregarded.

2- Keyframes.app

Nothing compares to Keyframes.app, as far as I’m concerned.

keyframe

You can use a free web app or a Chrome extension for your browser. It essentially functions as a visual timeline for viewing how animations loop, what they look like, and the critical portions of the animation sequence.

You can simply control the animation visually on the page, and this will spit out all the CSS you need after you’re done.

Playing around with the online editor to get a sense of how it works is highly recommended. This may appear clumsy at first, but you’ll get the hang of it quickly.

3- PurgeCSS

Do you enjoy working with current frontend frameworks but find that they come with too much baggage? If that’s the case, PurgeCSS is your best buddy, at least in terms of CSS.

purge-css

Here’s a quick overview for those who aren’t sure what the big deal is. You go through a “build process” while creating single-page applications with front-end frameworks like React, Angular, Vue, and others. In essence, you code all of your CSS, JS, SASS, and other assets in individual files (organized them however you see fit), but after you’re done, you tell the bundler to “create” the project. This reads all of your source code, applies different filters (minification, obfuscation/uglification, etc. ), and spits out the output into single files, commonly named “app.js” for JavaScript and “app.css” for CSS. All you need to operate the application’s front-end is these files and a little “index.html” file. Because everything is contained in these final files, their size typically exceeds what is allowed for rapid response time; for example, it’s not uncommon to encounter an “app.js” file that is over 500 KB!

PurgeCSS

is an add-on to your build workflow that avoids unneeded CSS from being included in the final output. A typical use case is Bootstrap, which is a medium-sized library containing multiple UI classes for various components. The remaining 90% of Bootstrap’s classes would be the only bloating in your final CSS file if your app only uses 10% of the classes. PurgeCSS, on the other hand, can identify and remove such unneeded CSS files from the build process, resulting in considerably smaller final CSS files (5-6 times size reduction is pretty normal).

So go ahead and use PurgeCSS to “purge” superfluous CSS!🙂

4- SlickMap CSS

Before going into a design, I recommend doing some basic wireframing and UI prototypes. It aids in the organization of a project and the development of a clear understanding of how the website should function.

slickmapcss

SlickMap CSS is a free prototype tool that allows you to visually sitemap every page in your design. This functions similarly to a flowchart, allowing you to see exactly where your connections point and how visitors would navigate through everything.

If this sounds like something you could use in your own projects, grab a copy from GitHub and get to work.

5- Saas

Despite the fact that Sass has been available for a long time, I’ve included it since developers are still unaware of its utility. SASS (Stylistically Awesome Style Sheets) is a CSS superset created to control the craziness that can seep into a project once CSS has grown beyond a few lines.

sass

Consider this: you’ve come a long way in developing your project’s CSS. You’ve chosen a few colors and determined appropriate margins for various divs, font styles, and so on. Except now you understand it’s not all that nicely put together. Larger margins for all sections, cards, and buttons could be a good idea. So, what’s next? The mere thought of having to search and replace your massive CSS file is enough to give anyone a headache. We’ve all done it, and we’re all aware of how prone to error it is. This difficulty is solved in Sass by introducing variables:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

We stack elements inside other elements when writing HTML. However, while developing CSS, we must construct a flat hierarchy of rules, which makes it difficult to cognitively “fit” the CSS onto the HTML. You can use Sass to mimic the page structure within your style files:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

All of this is just scratching the surface of what Sass has to offer: modular design, include files, mixins, inheritance, and the list goes on. Sure, you’ll have to learn a Sass compiler workflow and incorporate it into your own, but in my opinion, those few hours are an investment that will pay off big time!

6- CSS-Doodle

You can easily reproduce patterns and save bandwidth with SVG graphics.

css-doodles

However, did you know that SVG drawings may also be written in raw code? CSS-Doodle is a web component that allows you to rapidly and easily draw your own recurring patterns.

This CodePen collection, in my opinion, speaks for itself. If you spend some time knowing how this item works, you can do a lot with it.

Conclusion

I’m sure you’ve realized by now that modern CSS development is nothing like the herding-the-cats method of the past. 🙂

Now there are many other tools that I haven’t personally used that I think are worth trying. I didn’t want to exclude them from the list, but I also don’t have much to say about them.

To read more articles about web development and Languages visit our website The Beta Coders


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


All Comments (4)

Leave a Reply

Your email address will not be published. Required fields are marked *