Top 23 CSS Open-Source Projects
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Project mention: Best way of implementing 12 col grid system that drops to 8 col on tablet and 4 col on mobile? | reddit.com/r/webdev | 2021-03-03My first thought is use Bootstrap. All the media queries are already setup, the grid system is already setup, and there is a lot of help out there.
-
Electron
:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
Electron 12 was just released with initial wayland support, does anyone have any kind of rough estimate on when Signal desktop will start using it?
-
Scout
Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
animate.css
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. (by animate-css)
Project mention: Pre-made 2D Animation library like animate.css for Unity2d? | reddit.com/r/Unity2D | 2021-03-01I am looking for a generic 2d animation library for static sprites in Unity2d like animate.css (https://animate.style/) is to HTML. Does this exist?
-
Font-Awesome
The iconic SVG, font, and CSS toolkit
For the header let us first define the HTML structure. Our heading will be the first and last name in an H1 element. Next we want to put some links to important websites, like our LinkedIn or GitHub Profile. That these links look nice you can include FontAwesome and add a small icon in front of every link. Last we should put more information about ourselves, like the birthdate, phone number and address.
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
example: HTML5 boilerplate & source code on GitHub
-
Front-End-Checklist
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
3. Front-End Checklist
-
Bulma
Modern CSS framework based on Flexbox
-
normalize.css
A modern alternative to CSS resets
necolas/normalize.css - A collection of HTML element and attribute style-normalizations
-
prettier
Prettier is an opinionated code formatter.
A lot of people recommend Prettier as an auto-formatter. I use Eslint and StandardJS. There's an option in VS Code that's "format on save" that will correct your formatting automatically. Then I also use Eslint as a pre-commit check with Husky to make sure nothing gets committed without the check.
-
anime.js
JavaScript animation engine
Anime.js - JavaScript animation engine.
-
Materialize
Materialize, a CSS Framework based on Material Design
Dogfalo/materialize - Materialize, a CSS Framework based on Material Design
-
parcel
📦🚀 Blazing fast, zero configuration web application bundler
The reason I’ve just walked you through the generic Vue 2 TSX setup isn’t really to showcase “how to” do it. It’s to show you “how flawed” the whole process is. Sure, it might be useful when converting an existing project or boilerplate, but most of the time, you’ll do just fine with Vue CLI and a proper set of plugins or a no-config bundler like Parcel or Poi. However, this won’t fix the plethora of potential setup issues or lack of in-depth documentation. More than that, none of these ways will grant you proper TSX experience, as you might know it from React.
-
Tailwind CSS
A utility-first CSS framework for rapid UI development.
Credit: tailwindcss.com
-
hyperterm
A terminal built on web technologies
Looks like it may be Hyper. The shell is probably ZSH or Fish - I know there are plugins for both shells to give that kind of autocomplete.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
front-end-interview-handbook
🕸 No-bullshit answers to the famous h5bp "Front-end Job Interview Questions"
11. Front End Interview Handbook
-
PostCSS
Transforming styles with JS plugins
I used to use Sass or Less in my previous projects but this time I wanted to try something new so I went with PostCSS which basically adds a bit of magic to normal CSS.
-
Hover
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
IanLunn/Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
-
iview
A high quality UI Toolkit built on Vue.js 2.0
Website: https://iviewui.com/ GitHub: https://github.com/iview/iview GitHub Stars: 22.8k
-
Pure
A set of small, responsive CSS modules that you can use in every web project. (by yahoo)
-
NativeScript
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.
Project mention: Yet another components library recommendation thread... | reddit.com/r/Angular2 | 2021-02-28It's worth mentioning that I eventually hope to use NativeScript to convert my Angular web application to a native mobile application (though I've yet to test this out).
-
scrollreveal
Animate elements as they scroll into view.
It is an open source library that helps create full-screen scrolling websites. It is designed to be easy to use and customize, it also has a great documentation on how to get started. It is designed for mobiles and tablets and it is completely responsive. Read more about it 👉 HERE 06- Scroll Reveal
-
autoprefixer
Parse CSS and add vendor prefixes to rules by Can I Use
Autoprefixer - so I don't have to add -moz or -webkit vendor prefixes to some CSS properties.
Index
What are some of the best open-source CSS projects? This list will help you:
Project | Stars | |
---|---|---|
1 | Bootstrap | 148,506 |
2 | Electron | 90,415 |
3 | animate.css | 69,292 |
4 | Font-Awesome | 65,094 |
5 | html5-boilerplate | 49,162 |
6 | Front-End-Checklist | 48,052 |
7 | Bulma | 42,799 |
8 | normalize.css | 42,742 |
9 | prettier | 39,032 |
10 | anime.js | 38,422 |
11 | Materialize | 38,382 |
12 | parcel | 37,732 |
13 | Tailwind CSS | 37,643 |
14 | hyperterm | 35,329 |
15 | styled-components | 32,787 |
16 | front-end-interview-handbook | 27,674 |
17 | PostCSS | 24,115 |
18 | Hover | 23,843 |
19 | iview | 23,718 |
20 | Pure | 21,547 |
21 | NativeScript | 19,784 |
22 | scrollreveal | 19,476 |
23 | autoprefixer | 19,256 |