JavaScript CSS

Open-source JavaScript projects categorized as CSS

Top 23 JavaScript CSS Projects

  • Font-Awesome

    The iconic SVG, font, and CSS toolkit

    Latest mention: Having trouble with font awesome icons in Windows 10 browsers - can you help? | reddit.com/r/rails | 2021-01-12

    Did you read troubleshooting guides? https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

  • html5-boilerplate

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

    Latest mention: Minimal Base.html | news.ycombinator.com | 2021-01-04

    I'm used to call this HTML5 boilerplate. So that's the way I google when I actually need something like this.

    https://github.com/h5bp/html5-boilerplate/blob/master/src/in...

  • materialize

    Materialize, a CSS Framework based on Material Design

    Latest mention: why does Materialize not work on Django native server? | reddit.com/r/django | 2021-01-05

    As the other user said, need a lot more info. But just making an assumption that outside Django means as a standalone html file using this css framework...then it's likely a static files issues. Have you gone through the docs appropriately?

  • anime

    JavaScript animation engine

  • parcel

    📦🚀 Blazing fast, zero configuration web application bundler

  • styled-components

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

    Latest mention: Understanding Tagged Template Literal in JS | dev.to | 2021-01-16

    This features is so powerful that some awesome libraries were built on it such as Styled Components and graphql-tag.

  • front-end-interview-handbook

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

    Latest mention: 💻 Top 30+ JavaScript interview questions for web developers. | dev.to | 2021-01-13

    Source: github.com/yangshun

  • autoprefixer

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

    Latest mention: Good options for emulating safari on Iphone. | reddit.com/r/webdev | 2021-01-12

    Sounds like you need https://github.com/postcss/autoprefixer

  • stylus

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

    Latest mention: What slows down Stylish? | reddit.com/r/userstyles | 2021-01-13

    Don't use Stylish, use Stylus

  • critical

    Extract & Inline Critical-path CSS in HTML pages

    Latest mention: 6 Steps to Speed Up WordPress and Improve Google Rankings | dev.to | 2020-11-05

    Andy Osmani has written some JavaScript code to extract the critical CSS from your webpage. There are also a few Gulp plugins that will do this if you want to automate the process.

  • habitica

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

    Latest mention: Hacktoberfest: 69 Beginner-Friendly Projects You Can Contribute To | dev.to | 2020-09-29

    https://github.com/HabitRPG/habitica An open source habit building program which treats your life like a Role Playing Game.

  • js-beautify

    Beautifier for javascript

  • rebass

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

  • jss

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

  • styled-jsx

    Full CSS support for JSX without compromises

    Latest mention: Ask HN: What is the defacto tech stack for a startup now? | news.ycombinator.com | 2021-01-12

    The "defacto" today is to use React on top of a nodejs/Elixir/Go backend in a monorepo deployed across microservices in a custom kubernetes infrastructure.

    Hope you read enough of this comment to avoid going this way, and prevent your team from going with this "defacto" way of doing things.

    The above stack, which is what many companies are doing, is a total mistake in my opinion. It creates a LOT of work which is not related to your business.

    It also involves a TON of discussions about how to do things, what state management library you will use, what router library, what ORM (oh wait, we favour no ORM in this language because ORMs are bad blah blah), what validation library you will use in the backend, what validation library on the frontend, a bunch of different testing frameworks (some for the backend code, some for the frontend code), a way to do CSS-IN-JS or similar, etc.

    Moreover, those decisions are not something you can decide and be done with it. Those decisions come back every X months to bite your ass, because they get deprecated or their developers just moved to something else and just ignore you when problems arises (it's ok, they're not paid after all..). So you end up with some part of your system that now are unmaintained[1] [2]. In this world, things get quickly out of fashion, such as using classes for React components. Now despite they say in their docs it is perfectly fine to still use classes, this community is driven mostly by fashion, so nobody will want to use classes and a lot of time will be invested in rewriting perfectly working code into whatever the new trend is.

    Then you have the equivalent crazyness at the infrastructure level. Teams of engineers playing with Kubernetes (because it is the React of the infra folks), which is a very low level tool, upon which they will build an TON of custom tooling and scripting and processes, etc,etc and cross your fingers so that they never leave your company because if they do, you'll be in a very bad situation. If you're lucky, you will end up with something which is about 25% of what you get from AppEngine, or any other similar service, except that an order of magnitude more expensive (because of the salaries of the people building this).

    Let's not talk about all the work required to coordinate different services, document APIs from Backends For Frontends (TM), gRPC for communication between services because, hey, REST is overkill and non-performant, GraphQL which is the current trend and might not be tomorrow, etc.

    I'm not saying all of this is useless and wrong for every situation. Those tools are great and serve in the RIGHT context. If you're a big company, with tons of employes, it is better to have to do more work if that allows you to split the work across people.

    In a startup, or a small/mid sized company, there is nothing that beats a full stack solution such as Ruby On Rails. The libraries are stable and maintained because they're being used by a lot of companies. You have almost every decision already made for you, you might like it or not, but the set of decisions included in it are guaranteed to work well together. It is a lot more unlikely that some part of it will go unmaintained, you don't need to build an API for a separate frontend, you will get frequent updates, you have clear patterns and recommendations for how to do things. Deploy this on Heroku until the price goes to the salary of one or two engineers. That's a LOT. Would be more expensive to have somebody building a half assed version of it in-house. If it gets expensive, move to AppEngine or any similar, managed service. As long as you keep it using SQL and Docker you can move anywhere.

    You might have more difficulty hiring people which, nowadays, want to work with Rails and do templates, etc. But the benefit is that you will need a lot less people for building an equivalent product. And probably you will find yourself with less people hyped by building kubernetes microservices on React with Monorepos and RXjs redux on top of Rust because "that's the defacto" and "ruby doesn't scale".

    Please, CTOs of the world, let's get back to sanity. I just can't stand anymore seeing the time we're wasting with all of this.

    Of course, at some point you will be a big company and then it might make more sense to do some of this. But think twice about all the trade offs until you get there.

    Hope it helps.

    [1] https://github.com/vercel/styled-jsx/issues/688

  • aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

    Latest mention: How to Become a Pro 😎 Front End Developer💻 | dev.to | 2020-10-08

    -Styled Components -Radium -Emotion -JSS -Aphrodite

  • tailblocks

    Ready-to-use Tailwind CSS blocks.

    Latest mention: Are These the Most Interesting Front-end Developer Tools for 2021? | dev.to | 2021-01-11

    29. tailblocks

  • carbon

    A design system built by IBM

  • clean-css

    Fast and efficient CSS optimizer for node.js and the Web

  • typography.js

    A powerful toolkit for building websites with beautiful design

  • styletron

    :zap: Toolkit for component-oriented styling

  • email-templates

    :mailbox: Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more!

  • isometric-contributions

    Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.

    Latest mention: Rendering the commit calendar in isometric view | dev.to | 2020-11-03

    Recently, I found a browser extension called isometric-contributions which displays the GitHub commit calendar in an isometric view. It looked quite neat, but it can't be used as a standalone...

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