email@encode8.com
CollectionCSS

13 Barebones CSS Libraries Ready for Any Project

While working on side-projects, often times I felt I needed the simplest of CSS libraries that do not force me to remember too many class-names. A CSS library that beautifies the semantic HTML5 markup. It may not be one of the tiniest CSS frameworks but a simple enough to drop into any project without having to make substantial changes to the markup. In this post I am going to list a few such examples.

1. awsm.css

awsm css library
awsm.css is a very lightweight CSS library that only takes care of the semantic HTML5 elements. You can use it on any existing project by just linking to the stylesheet. It assumes almost nothing on the part of the developer — you have to add the viewport meta tag, too.

2. Tufte CSS


Tufte CSS is yet another barebones CSS library that focuses mainly on typography. You can get started by just dropping the stylesheet into your project. The documentation page gives an in-depth analysis of the principles on which the library is based.

3. Hyper Reset CSS


Hyper Reset CSS is another CSS library that you can use to reset any branded website. It is mostly aimed towards statically generated websites like documentation and demos. But you can use it as a standalone reset library.

4. Gutenberg


Gutenberg is more geared towards print styles. It comes six different themes that you can optionally use to quickly beautify websites.

5. github-markdown-css


A very basic set of styles that are aimed to replicate Github‘s Markdown style. However, it does force you to use a specific class in order to use the styles. It is very useful if you are writing documentation for a project.

6. ReMarkdown


ReMarkdown can be useful while writing documentation. It is only 4Kb in size and can be customized further to suit your needs.

7. Marx


Marx is a minimal CSS library that resets HTML5 elements without forcing you to use any classname. If you don’t need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you.

8. Typography.js


Typography.js is a set of CSS styles that you can use to enhance the visuals of typographic elements. It comes with a multitude of different themes. You can use the customizer to generate stylesheets that meet your requirements.

9. Sakura


Sakura is a minimal classless css framework. You can kick-start your project by just dropping the stylesheet into your project. There are four different themes available. There is even a bookmark available to see how a website looks like if styled with Sakura.

10. Wing


Wing is a beautiful CSS library that can enhance most of the semantic HTML5 elements. The styles that come with Wing are clean and modern, dropping it into your project will give you a headstart in design. It is extremely lightweight in size — only 5 Kb.

11. Tacit


Tacit is a CSS framework that can be used by anyone — whether you know HTML and CSS or not. You don’t need to use any class. Besides the typographic elements, Tacit offers styles for form and table elements, too.

12. Typebase


Typebase is minimal CSS library for typographic elements. It provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css

13. Suprstylin


Suprstylin is a CSS library that not only offers default styles for HTML5 elements but also offers a host of colors and a spinner, as well. You can use Suprstylin just by adding the stylesheet to your project.

Conclusion

All these libraries are very useful if you are prototyping or creating static websites. You can start by just adding the stylsheet inside head tag. No need to remember tons of class-names. You can concentrate more on coding than overriding default styles.