JavaScript CSS

Open-source JavaScript projects categorized as CSS

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: [AskJS] How do you compress js files? | reddit.com/r/javascript | 2021-02-23

    Bootstrap does this. Unfortunately seems like mousetrap does not expose its minification (the author minifies and commits right before release)

  • GitHub repo Font-Awesome

    The iconic SVG, font, and CSS toolkit

    Project mention: How do I take my xubuntu further | reddit.com/r/xubuntu | 2021-02-20

    Go to r/unixporn, r/UsabilityPorn and maybe even r/unixart... Take a look at what the cool kids and their Incredible Customized Desktops are ricing right now ;) IMHO, you don't need an icon pack, take a look at Font Awesome and the Panel's Genmon Plugin. There is a lot of fun you can have using those two, if you ask me.

  • 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.

  • GitHub repo html5-boilerplate

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

    Project mention: Commenting code | reddit.com/r/learnprogramming | 2021-02-09

    example: HTML5 boilerplate & source code on GitHub

  • GitHub repo prettier

    Prettier is an opinionated code formatter.

    Project mention: The frontend tooling guide to improve Developer Experience | dev.to | 2021-02-22

    Prettier: An opinionated code formatter. Works with .css files too! 🎉

  • GitHub repo Materialize

    Materialize, a CSS Framework based on Material Design

    Project mention: What can you build after 2 months of learning web? | dev.to | 2021-02-09

    This app uses materialize css library and edmam recipe search API so users can search recipes with dietary options.

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: Question about an animated 3D render moving on scroll + click | reddit.com/r/webflow | 2021-02-21

    I feel what you want because I want things like that too. However this cannot be done in Webflow. I'm sure this requires more than some Webflow and casual web knowledge. Recently I found this website that can help creating complex animations, but for me this seems too complicated. 3D is a cool thing, but making it interactive and working on a website is less cool:D Some more resources in connection with 3D: Spline and Vectary.

  • GitHub repo parcel

    📦🚀 Blazing fast, zero configuration web application bundler

    Project mention: Learn Next.js in 10 Tweets – React Based Web Framework | news.ycombinator.com | 2021-02-18
  • GitHub repo styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: React - Bora estilizar? | dev.to | 2021-02-19
  • GitHub repo front-end-interview-handbook

    🕸 No-bullshit answers to the famous h5bp "Front-end Job Interview Questions"

    Project mention: Useful GitHub repositories for learning Web Development | dev.to | 2021-02-17

    11. Front End Interview Handbook

  • GitHub repo Pure

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

  • GitHub repo scrollreveal

    Animate elements as they scroll into view.

    Project mention: Using ScrollReveal.js with React Hooks | dev.to | 2021-01-18

    Today, I decided to improve my website by adding scroll reveal to it. For that, I chose jlmakes' ScrollReveal.js which solved my problem in a snap, the biggest problem was integrating it with React (Turns out, it was also a piece of cake).

  • GitHub repo autoprefixer

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

    Project mention: Setting Up a JavaScript Build Process using Rollup | dev.to | 2021-02-17

    One of the most interesting features of PostCSS is Autoprefixer. Much like Babel, it checks our browserslist requirement to add prefixes to CSS rules, ensuring cross-browser compatibilities. We can add it to the project with the following command:

  • GitHub repo bootswatch

    Themes for Bootstrap

    Project mention: 10 Retro CSS frameworks to relive your childhood | dev.to | 2021-02-22

    To customize Geo edit /swatch/variables.less and /swatch/bootswatch.less. Refer to the Swatchmaker README for instructions to regenerate the Bootstrap stylesheet.

  • GitHub repo emotion

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

    Project mention: The tiniest CSS-in-JS solution for your open-source React components | dev.to | 2021-02-18

    It seemed like a good solution, but we've started receiving complaints from many developers that were unable to use the styles. It is quite common in the React ecosystem to use libraries like Emotion, Styled-Components, or other CSS-in-JS libraries exclusively and to entirely forgo the inclusion of a style loader. As such, usage of react-colorful would necessitate the alteration of build configurations for these users to be able to access the default styling.

  • GitHub repo stylus

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

    Project mention: I don't want to do front-end anymore | reddit.com/r/programming | 2021-02-14

    Stylus. I like it more than Sass and Less, but it isn't as popular.

  • GitHub repo uncss

    Remove unused styles from CSS

    Project mention: Any tool the will scan HTML and css and show unused css rules? | reddit.com/r/css | 2021-02-15

    Also UnCSS.

  • GitHub repo critical

    Extract & Inline Critical-path CSS in HTML pages

    Project mention: Force include classes in critical CSS | dev.to | 2021-01-21

    Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.

  • GitHub repo stylelint

    Project mention: Desktop developer new to web development, are there any tools (like sass) that I should know about? | reddit.com/r/webdev | 2021-02-11

    For making your DX better, use a linter! Check out eslint and stylelint. And stop bike shedding about code formatting, get Prettier into your projects.

  • GitHub repo Habitica

    A habit tracker app which treats your goals like a Role Playing Game.

    Project mention: Best free Habit Tracking app? | reddit.com/r/androidapps | 2021-02-24

    I have used Loop Habit Tracker in the past - it's free and gets the job done. Main con (which is common to all free habit tracking apps I've checked) is that you can't automatically sync to the cloud. I played a bit around with different apps and saw there is wide choice (and very interesting designs/approaches like Habitica, which probably isn't for me) but couldn't settle on one. So before going back to Loop I'd like to hear what others use.

  • GitHub repo JS-Beautifier

    Beautifier for javascript

  • GitHub repo rebass

    :atom_symbol: React primitive UI components built with styled-system.

  • GitHub repo dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Building a local running tracker | dev.to | 2021-01-27

    Something I thought would be pretty cool is the ability to generate (and download) an image of one's progress. I've dabbled a bit with generating images with Java on the server side, but never in a client-side app. My searching led me to find dom-to-image, which has options for exporting to a JPEG, a PNG, or even a blob (not the killer kind; a "blob" is raw file data, which can be read or processed as you wish). Combined with another library to make saving files easier, exporting the image is done easily:

  • GitHub repo JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.

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-02-24.

Index

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

Project Stars
1 Bootstrap 148,365
2 Font-Awesome 65,062
3 html5-boilerplate 49,120
4 prettier 38,975
5 Materialize 38,369
6 anime.js 38,342
7 parcel 37,696
8 styled-components 32,717
9 front-end-interview-handbook 27,561
10 Pure 21,532
11 scrollreveal 19,453
12 autoprefixer 19,256
13 bootswatch 12,709
14 emotion 12,532
15 stylus 10,585
16 uncss 9,022
17 critical 8,913
18 stylelint 8,509
19 Habitica 8,167
20 JS-Beautifier 7,163
21 rebass 7,145
22 dom-to-image 7,045
23 JSS 6,195