Top 23 JavaScript CSS Projects
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Bootstrap does this. Unfortunately seems like mousetrap does not expose its minification (the author minifies and commits right before release)
-
Font-Awesome
The iconic SVG, font, and CSS toolkit
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.
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
example: HTML5 boilerplate & source code on GitHub
-
prettier
Prettier is an opinionated code formatter.
Prettier: An opinionated code formatter. Works with .css files too! 🎉
-
Materialize
Materialize, a CSS Framework based on Material Design
This app uses materialize css library and edmam recipe search API so users can search recipes with dietary options.
-
anime.js
JavaScript animation engine
Project mention: Question about an animated 3D render moving on scroll + click | reddit.com/r/webflow | 2021-02-21I 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.
-
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 -
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
-
Pure
A set of small, responsive CSS modules that you can use in every web project. (by yahoo)
-
scrollreveal
Animate elements as they scroll into view.
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).
-
autoprefixer
Parse CSS and add vendor prefixes to rules by Can I Use
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:
-
bootswatch
Themes for Bootstrap
To customize Geo edit /swatch/variables.less and /swatch/bootswatch.less. Refer to the Swatchmaker README for instructions to regenerate the Bootstrap stylesheet.
-
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-18It 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.
-
stylus
Expressive, robust, feature-rich CSS language built for nodejs
Stylus. I like it more than Sass and Less, but it isn't as popular.
-
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-15Also UnCSS.
-
critical
Extract & Inline Critical-path CSS in HTML pages
Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.
-
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-11For making your DX better, use a linter! Check out eslint and stylelint. And stop bike shedding about code formatting, get Prettier into your projects.
-
Habitica
A habit tracker app which treats your goals like a Role Playing Game.
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.
-
JS-Beautifier
Beautifier for javascript
-
rebass
:atom_symbol: React primitive UI components built with styled-system.
-
dom-to-image
Generates an image from a DOM node using HTML5 canvas
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:
-
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language.
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 |