DEV Community

Cover image for 4 Fast and Easy CSS Tools to Help You Design Your Website
Nikki
Nikki

Posted on • Originally published at Medium on

4 Fast and Easy CSS Tools to Help You Design Your Website

I’ve spent about 9 years here at Hanley Wood and have watched as we’ve painstakingly managed the designs of 20+ different websites. We’ve reduced much of our workload by reducing the variance of our page templates and minimizing the amount of code needed to spin up a new website.

Below I’d like to share with you some of the things that have helped us over the years in hopes that they’ll help you too. ;)

Animate.css

View each animation the library has to offer.

Animate.css is a convenient little CSS library created by Daniel Eden that takes the hard work out of adding animations to your website. It’s cross-browser and easy to use, so give it a try!

Here’s an example, taken from the Github repo, demonstrating how easy it is to add an animation to a component:

<h1 class="animated infinite bounce delay-2s">Example</h1>
Enter fullscreen mode Exit fullscreen mode

Website : https://daneden.github.io/animate.css/

Font Awesome

Font Awesome is a personal fave of mine. Gone are the days where you need to buy or create an icon. Here, we have a useful font that contains most of the icons you’ll need for a project. We use them frequently on our Hanley Wood sites.


<span class="fa fa-search"></span>
Enter fullscreen mode Exit fullscreen mode

Website : https://fontawesome.com/

Hamburgers

This one is another easy library. Why spend your time trying to figure out how to animate that stupid hamburger? Thanks to Jonathan Suh, we now have a way to animate our hamburgers without having to try!

Example from the website:

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
Enter fullscreen mode Exit fullscreen mode

Website : https://jonsuh.com/hamburgers/

Tachyons

I recently learned about Tachyons from a colleague, and I only wished I had known about it sooner. Tachyons is a framework based on the principle of Atomic CSS by utilizing singe-use CSS classes to style components. We have slowly been incorporating this methodology into our websites so that we can focus more on new features as opposed to maintaining ridiculous amounts of CSS code. Spinning up new sites now takes less time and produces less design bugs as opposed to previous approaches. Why? Because the modularity of the CSS styles reduces complexity and increases reusability.

The example below styles the div as follows:

  • position: static
  • width: calc(33.33333333%)
  • display: flex
  • justify-content: flex-end
<div class=”static w-third-ns flex justify-end”>…</div>
Enter fullscreen mode Exit fullscreen mode

Website : http://tachyons.io/


Conclusion

These are the top 4 tools I’d love to bundle up and give to anyone starting a new web project. Focus your time on creating new and interesting web features and spend less time getting the blueprint of the site up and running.


Top comments (0)