JavaScript CSS

Open-source JavaScript projects categorized as CSS | Edit details

Top 23 JavaScript CSS Projects

  • GitHub repo Bootstrap

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

    Project mention: Bootstrap UI Components | | 2021-10-15

    Built-with Bootstrap 5 most popular front-end framework in developer community. So, you will have more flexibility and freedom while using these components or developing a site.

  • GitHub repo Font-Awesome

    The iconic SVG, font, and CSS toolkit

    Project mention: React Authentication with Twitter, Google, Facebook and Github | | 2021-10-11

    The state of the user is used to selectively render either their social profile if it exists or the appropriate login button so the user can login. Using font awesome and some CSS we create authentic buttons using the provider prop as a className.

  • Syncfusion

    Syncfusion - See why our products are consistently getting 4.6 out of 5 stars by your peers.. Syncfusion Essential Studio for JavaScript is a modern UI control library built from the ground up to be lightweight, responsive, modular, and touch-friendly.

  • GitHub repo html5-boilerplate

    A professional front-end template for building fast, robust, and adaptable web apps or sites.

    Project mention: 10 GitHub Repository every Web Developer should Know | | 2021-09-29

    Link to the Repo

  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Project mention: Melhor forma de deixar o site responsivo? | | 2021-10-16

    Eu gosto muito do TailwindCSS.

  • GitHub repo prettier

    Prettier is an opinionated code formatter.

    Project mention: Refactoring and Git Rebase | | 2021-10-15

    To practice, I worked on refactoring my dodo-SSG project in a new branch that I called refactoring. I started by fixing the code format from previous contributions using prettier. I then changed the code to get rid of global variables. To do that, I had to split up some code into separate smaller functions. At each of these steps, I created a new commit to make sure I could easily go back to the previous version if anything broke (And things broke a lot while doing this!).

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: How to make a button transform to a heart shape on hovering | | 2021-09-12

    You can use SVG Morphing to do that. There are many libraries that offer that feature, one of them is ( [anime js].

  • GitHub repo parcel

    The zero configuration build tool for the web. 📦🚀

    Project mention: Parcel.js v2 Bundler, is an excellent web development build tool. | | 2021-10-16

    I went on the Parcel website and read the get started guide for web apps which took 1 minute. Then in my project, I deleted my node_modules folder and every dev dependencies I had related to Webpack in my package.json file. Then I installed Parcel as stated in the guide, setup the scripts in package.json. Executed npm start a few times to see console error messages which were super easy to understand.

  • Scout APM

    Scout APM: A developer's best friend. Try free for 14-days. 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.

  • GitHub repo Materialize

    Materialize, a CSS Framework based on Material Design

    Project mention: Code-in-Public: discussion of business reasons to enter saturated market | | 2021-10-13

  • GitHub repo front-end-interview-handbook

    ⚡️ Front End interview preparation materials for busy engineers

    Project mention: Is there a cracking the coding interview book but solely for front end stuff? | | 2021-10-05
  • GitHub repo Pure

    A set of small, responsive CSS modules that you can use in every web project.

    Project mention: 3 Sites that make CSS easy! | | 2021-10-08

  • GitHub repo mdb-ui-kit

    Bootstrap 5 & Material Design 2.0 UI KIT

    Project mention: What is this layout called? | | 2021-08-03

    It seems "Chips" usually come with icons/images whereas "Tags" are simply made of text, according to Material Design Bootstrap | Github here

  • GitHub repo scrollreveal

    Animate elements as they scroll into view.

    Project mention: Site que desenvolvi, o que acham? | | 2021-07-17
  • GitHub repo autoprefixer

    Parse CSS and add vendor prefixes to rules by Can I Use

    Project mention: automated way to add compatibility to css | | 2021-10-16

    Autoprefixer is probably what you're looking for?

  • GitHub repo less.js

    Less. The dynamic stylesheet language.

    Project mention: Bootstrap and Css | | 2021-10-15

    Have you played around with SASS? Or LESS? Or Stylus?

  • GitHub repo front-end-guide

    📚 Study guide and introduction to the modern front end stack.

    Project mention: Front-end guide from Grab | | 2021-03-02
  • GitHub repo emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    Project mention: A 55% Performance Improvement Upgrading Material-UI from v4 to v5 | | 2021-10-14

    This was the biggest chunk of work for us. We've gone through a styling change before with Material-UI when they moved from inline styles to JSS, but this time Material-UI 5 moves away from JSS as the default styling solution to emotion. We've been relying heavily on JSS for the majority of our components, so lots of them looked something like this...

  • GitHub repo bootswatch

    Themes for Bootstrap

    Project mention: What am I learning? | | 2021-10-08

    As a piece of concrete advise, you can use something like Bootstrap, which is already highly theme-able (almost all React component frameworks are highly theme-able, but Bootstrap can be themed with a simple link tag in your HTML),, so that you can have a consistent UI, while you focus on learning the ropes of React. Just becareful that some bootstrap elements might need jquery, which is why reactstrap or react-bootstrap exist.

  • GitHub repo stylus

    Expressive, robust, feature-rich CSS language built for nodejs

    Project mention: Experiment Rule | | 2021-10-15

    Okay. First, you should install Stylus or Reddit Enhancement Suite. Both of these are free, open-source extensions that can inject CSS stylesheets into webpages.

  • GitHub repo tabler-icons

    A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.

    Project mention: What's your current favorite icon library in late 2021? | | 2021-10-04

    Seconding this. The site you've linked is not made by Tabler Icons' author, though. This one is:

  • GitHub repo material-design-for-bootstrap

    Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

    Project mention: React for Bootstrap 5 - useful kit, #1 on ProductHunt | | 2021-05-11

    Also you claim on your homepage it is used by 2,000,000 developers which is a blatant lie. On github the material-design-for-bootstrap repo is used by 9,000 other repos, the React version will be significantly less.

  • GitHub repo critical

    Extract & Inline Critical-path CSS in HTML pages

    Project mention: 3 tips that improve landing page speed | | 2021-05-28

    Defer or async css/js files — Don’t make leads wait for unnecessary files to download before showing something. In the case of CSS, there are a few tools for in-lining only what’s above-the-fold into your html.

  • GitHub repo 30-seconds-of-interviews

    A curated collection of common interview questions to help you prepare for your next interview.

    Project mention: Frontend Developer Interview @Zalando | | 2021-03-31

    I can't give you Zalando specific prep tips, but general prep tips from my experience with bigger companies that still have this startup-ish mentality. Make sure that you understand the details of JS (event loop, promises, etc.) and if they mentioned the tech-stack (vue, react, whatever) make sure you thoroughly understand them as well. And expect questions about your cultural fit, so have a genuine interest in the company (google it) and in a good work environment (knowledge sharing, pair programming, mentoring). For system design, be sure to think of CI/CD, testing and monitoring. And if you don't know something, be open about it and mention that you are willing to learn, don't make something up or try to cheat, it will be noticed. And remember its a two way street, ask questions. i like this resource for interview preparations a lot: 30-seconds-of-interview

  • GitHub repo uncss

    Remove unused styles from CSS

    Project mention: Lessons learned from building landing pages | | 2021-06-08

    In the process of trying to figure out how to remove the unused code, I found out about UnCSS, a tool that removes unused CSS from your stylesheets. It can be installed by running:

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-10-16.


What are some of the best open-source CSS projects in JavaScript? This list will help you:

Project Stars
1 Bootstrap 153,311
2 Font-Awesome 66,240
3 html5-boilerplate 51,700
4 Tailwind CSS 47,938
5 prettier 40,743
6 anime.js 40,570
7 parcel 39,028
8 Materialize 38,601
9 front-end-interview-handbook 31,839
10 Pure 21,933
11 mdb-ui-kit 21,646
12 scrollreveal 20,081
13 autoprefixer 19,860
14 less.js 16,668
15 front-end-guide 13,965
16 emotion 13,755
17 bootswatch 13,189
18 stylus 10,780
19 tabler-icons 10,712
20 material-design-for-bootstrap 9,463
21 critical 9,302
22 30-seconds-of-interviews 9,286
23 uncss 9,140
Find remote CSS jobs at our new job board There is 1 new remote job listed recently.
Are you hiring? Post a new remote job listing for free.