10 lightweight CSS frameworks with no jQuery or additional JS dependencies

What I fancy about most of those is that all use the latest technologies, are straightforward to customize, are lightweight, and (the most powerful, I guess) are JS free — no need of jQuery or other JS Library.

Let's explore the list of 10 lightweight CSS Frameworks, and see the difference, strengths, and weaknesses of each one of them, as well as what project they meet and what technologies they use!

1. Bulma [Based on Flexbox]

Bulma is probably the most popular JS free CSS Framework. It's mobile-first, open-source and based on Flexbox – it gives all you need to build any projects, simple or complicated.

Because Bulma only contains CSS classes, it doesn't have any impact on the HTML code you write. So to style an <input /> tag, you must add .input class to it. It relies on 39 .sass files which you can import individually - to have just the styles you need, as well as a lighter and smaller styles file.

How to Install Bulma

There are 3 ways to install Bulma:

1. Via NPM npm install bulma or yarn add bulma.
2. Use the jsDelivr CDN to link to the Bulma stylesheet.
3. Use the GitHub repository to get the latest development version.

2. HiQ [A high-IQ CSS framework]

HiQ is developed utilizing PostCSS and gets the power of exciting new CSS features, like custom properties. If you use the source version, you can use custom selectors and mixins to make styling more comfortable. Jump-start your styling with a lightweight, merely customizable framework that made with CSS custom properties and latest best methods.

Drop HiQ into your project, adjust some CSS variables, and you're ready to go. Let HiQ take responsibility for the primary button, input, and another part of HTML styling so you can concentrate on what's essential.

How to Install HiQ

There are 3 ways to install HiQ:

1. Via NPM npm install hiq or yarn add hiq.
2. Use the jsDelivr CDN to link to the HiQ stylesheet.
3. Use the GitHub repository to get the latest development version.

3. Mini.css [Minimal and Responsive framework]

mini.css is one of the cleanest tools for creating websites that look attractive on any device and load fast on mobile connections. Its small size (below 10 KB gzipped), besides its responsive grid and modern elements, guarantees that all your users are happy and can reach your website anytime, anywhere.

Linking the gap among fully-featured frameworks (e.g., Bootstrap and Semantic UI) and micro frameworks (e.g., Milligram and Pure.CSS), mini.css bundles many points in a tiny package;

It relies only on CSS - suggesting you do not have to bother of any conflicts with other Javascript libraries you might be using.

Creating a CSS framework that feeds everyone's requirements is not a simple task, but mini.css succeeds to progress to the occasion by implementing far-reaching and consistent documentation in succession with templates, examples, and semantic HTML5 markup.

How to Install Mini.css

There are 3 ways to install Mini.css:

1. Via NPM npm install mini.css or yarn add mini.css.
2. Use the cdnjs to link to the mini.css stylesheet.
3. Use the GitHub repository to get the latest development version.

4. SPECTRE.CSS [Lightweight CSS Framework]

Spectre.css is a lightweight (~10KB gzipped), responsive, and modern CSS framework for faster and extensible development. A lightweight starting point for your projects. Flexbox-based, Elegantly designed, and advanced elements and components.

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components, and utilities with best practice coding and consistent design language.

How to Install Spectre.css

Here are 3 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers:

1. Via NPM npm install spectre.css or yarn add spectre.css.
2. Use the cdnjs to link to the spectre.css stylesheet.
3. Use the GitHub repository to get the latest development version.

5. Tachyons [CSS Toolkit]

Tachyons aren’t just a solid framework. It’s a bunch of tiny modules that can be combined and united or used separately. Use what you demand. Omit the rest. Everything should be 100% responsive. Your website should go despite a user’s device or screen size.

No matter the lighting, or the device, font-sizes, and contrast should be high enough for your users to comfortably read your content.

Clear documentation aids construct a shared perception of design models amongst your team. This helps promote reuse and decreases the amount of repetition in a codebase.

How to Install Tachyons

There are 3 ways to install Tachyons:

1. Via NPM npm install tachyons or yarn add tachyons.
2. Use the cdnjs to link to the tachyons.min.css stylesheet.
3. Use the GitHub repository to get the latest development version.

6. Turretcss [Responsive CSS Framework]

Turretcss is meant to make responsive, friendly, and scalable CSS development easy, and predictable. Write clean, simple, and modern HTML & CSS with intuitive size and style utilities with PostCSS and postcss-preset-env. Mobile-first block element styles and full viewport breakpoint coverage performs complex responsive web interface developing simple.

The low specificity and intuitive style inheritance let you use the cascade to style components with consistent advantages. Usability is at the nucleus, with large tap targets for buttons and links, clear indicator palettes for error handling, and a focus on semantic HTML development.

Develop custom designs and interfaces with a solid base of typography selections, color options, input types, and a full set of default HTML elements. Scale elements larger or smaller with flexible viewport-based measured variable values — the scale on the fly with regular measurement scales for HTML elements and viewports.

How to Install Turretcss

There are 2 ways to install Turretcss:

1. Via NPM npm install turretcss or yarn add turretcss.
2. Use the GitHub repository to get the latest development version.

7. Picnic CSS [Lightweight and beautiful library]

Picnic is an invasive CSS library to get your style started.

Its purpose is to be under 10kb of compressed CSS for more reliable and quicker mobile shots. It is written in SCSS with multiple variables and classes (placeholders) to make it straightforward to extend. It is entirely modular, so you can effortlessly adjust and test each element.

Get the best practice for your users with various complex and meticulously crafted CSS transitions. The native HTML elements get a boost, so you don't need to write presentation classes combined with your HTML.

How to Install Picnic CSS

There are 3 ways to install Picnic CSS:

1. Via NPM npm install picnic  or yarn add picnic.
2. Use the jsdelivr to link to the picnic.min.css stylesheet.
3. Use the GitHub repository to get the latest development version.

8. Milligram [A minimalist CSS Framework]

Milligram provides a minimal setup of styles for a swift and neat starting point. Just it! Barely 2kb gzipped! It's specially designed for more reliable performance and higher productivity, with more scattered assets to reset - resulting in cleaner code.

How to Install Milligram

There are 3 ways to install Milligram:

1. Via NPM npm install milligram  or yarn add milligram.
2. Use the jsdelivr to link to the milligram.min.css stylesheet.
3. Use the GitHub repository to get the latest development version.

9. Wing [A beautiful CSS framework]

Wing is a beautiful, lightweight CSS framework created for minimalists. It arrives stuffed with features, including styling for most utmost components, a grid, and some elements, all in just 5kb.

The styles that come with Wing are clean and modern, dropping it into your project will give you a headstart in design. All you ought to do is drop Wing into your project, and everything will be styled automatically. There is an insignificant quantity of classes to learn.

How to Install Wing

There are 3 ways to install Wing:

1. Via NPM npm install wingcss  or yarn add wingcss.
2. Use the jsdelivr to link to the wing.min.css stylesheet.
3. Use the GitHub repository to get the latest development version.

10. Chota [A micro CSS Framework]

Chota is a genuinely tiny lightweight CSS Framework, about 3Kb. It doesn't require any preprocessors, drop it within your project and play. Simple to extend thankfulness to CSS variables. It comes with a handful of components and utilities, like a magic 12 column grid.

It supports icons out-of-the-box as well.

How to Install Chota

There are 3 ways to install Chota:

1. Via NPM npm install chota  or yarn add chota.
2. Use the jsdelivr to link to the chota.min.css stylesheet.
3. Use the GitHub repository to get the latest development version.

Conclusion

That's it! Of course, there're tens of JS Free lightweight CSS Frameworks around there, but these are the most popular and good enough for any project.

As you might notice, I began with the most complicated CSS Frameworks to the minimal and micro! Whatever lightweight CSS Library you'll choose, I'm sure you'll be happy with it.