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: Speedy and Stylish - How to style NextJS with Bootstrap 5, SASS, and PurgeCSS | dev.to | 2021-06-10

    I want to style it with Bootstrap 5 because I need more help setting up a consistent theme than Tailwind would give me.

  • GitHub repo Font-Awesome

    The iconic SVG, font, and CSS toolkit

    Project mention: What font do most users use for their icons? | reddit.com/r/Polybar | 2021-05-28

    Font Awesome is almost definitely the most popular. I’ve seen Weather Icons used too, including in some of these modules.

  • GitHub repo html5-boilerplate

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

    Project mention: Beginner Questions | reddit.com/r/web_design | 2021-06-05

    Really all you need for something like this is HTML, CSS, and maybe some JS. I'd say play around in codepen where you can see your code hot-reload when you make changes. When your project outgrows codependent, drop your code into an HTML Boilerplate, and keep going.

  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Project mention: What to watch next after Refactoring UI? | reddit.com/r/userexperience | 2021-06-15

    For practical examples, I'd suggest to peruse the Tailwind CSS (and its productized version, Tailwind UI) site, since the author co-created this product and poured a lot of the UI design knowledge into it

  • GitHub repo prettier

    Prettier is an opinionated code formatter.

    Project mention: prettier considering multiple options for formatting when only one option is provided in the config file. | reddit.com/r/Angular2 | 2021-06-11

    Unless there's been a change since last time I checked, the devs specifically said it is not possible to completely ignore rules https://github.com/prettier/prettier/issues/5007

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: 10 Best JavaScript Animation Libraries 🔥 | dev.to | 2021-06-07

    1. Anime.js

  • GitHub repo parcel

    📦🚀 Blazing fast, zero configuration web application bundler

    Project mention: How to fix regeneratorRuntime is not defined? | dev.to | 2021-06-15

    I have ran into a problem, the error is regeneratorRuntime is not defined while working with React and Parcel bundler.

  • GitHub repo Materialize

    Materialize, a CSS Framework based on Material Design

    Project mention: Form checkboxes or use a form API? | reddit.com/r/rails | 2021-06-03
  • GitHub repo front-end-interview-handbook

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

    Project mention: How to stand out as a junior developer | reddit.com/r/cscareerquestionsEU | 2021-04-07

    This seems like a good place to start for front end domain knowledge - https://github.com/yangshun/front-end-interview-handbook

  • GitHub repo Pure

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

    Project mention: Bootstrap 5 Released | news.ycombinator.com | 2021-05-05
  • GitHub repo scrollreveal

    Animate elements as they scroll into view.

    Project mention: 8 Amazing Library For Your Next Project | dev.to | 2021-05-02

    Scroll Reveal

  • GitHub repo autoprefixer

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

    Project mention: Monkey CSS | dev.to | 2021-05-06

    As you don't have that time, autoprefixer is your friend.

  • GitHub repo less.js

    Less. The dynamic stylesheet language.

    Project mention: My friend is learning CSS and HTML. Can you find ten things he can improve in his coding style? | reddit.com/r/css | 2021-06-09

    OOCSS - (Object-oriented CSS) 2. Use a preprocessor. They fill the lacking features of CSS and helps you write more readable, and smaller reusable pieces of CSS. Some popular preprocessors are: 1. Sass 2. Less 3. Stylus 3. Reduce redundancy. You are using font-weight: bold for the header, but you are also setting it for the div inside. CSS stands for Cascading Style Sheets because styles in CSS are cascading, meaning child elements will inherit styles from parents. 4. Avoid using strong and complex selectors. You are using an id, but a class would do just fine. Having strong selectors means you will have a harder time overriding them later on if needed. 5. Avoid using !important as much as possible. Only use it for utility and helper classes if you must, which need to override anything, such as hiding or displaying an element. 6. Don't use inline CSS, unless your inlining critical CSS. Instead, import styles using a link tag in your head element. (Critical CSS refers to above-the-fold content. Inlining it can help users see a properly rendered page more quicker) 7. Use semantic HTML. You are assigning a header class to a div, which could have been an h1/2/3/n element. This not only helps in terms of accessibility but can also help to improve your SEO score. 8. Use rem for typography. You are using em which cascades, meaning if you set the root element to have 12px, a main element with 2em will have the font size of 24px. If you put a div inside of it with 2em, it will have a font size of 48px, meaning that the size is duplicated. This makes it hard to track down values for deeply nested elements. Instead, use rem which stands for root em, and does not cascade. 9. Make sure your formatting is consistent. You use opening brackets both after a selector and on a new line. Tools like stylelint can help you enforce certain rules to keep your code more consistent, which helps to improve readability and maintainability. 10. Outsource your colors / sizes / spacings into variables. Everything that is bound to change can be in a configuration file to make things more flexible. You can either use CSS variables for this, or a preprocessor. 11. Nothing is written in stone, feel free to come up with your own set of rules that helps you create a more dev-friendly environment. But most importantly, keep things consistent.

  • GitHub repo front-end-guide

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

    Project mention: Front-end guide from Grab | reddit.com/r/u_hasanlock | 2021-03-02
  • GitHub repo emotion

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

    Project mention: Real-world CSS vs. CSS-in-JS performance comparison | news.ycombinator.com | 2021-06-08
  • GitHub repo bootswatch

    Themes for Bootstrap

    Project mention: Ask HN: How do you make your websites/apps beautiful? What tools do you use? | news.ycombinator.com | 2021-06-04

    The way I do it is, use "raw" bootstrap+jquery* for development. And before deplyoing, use themes for beautification e.g. https://bootswatch.com

    * I am not a front-end developer, so I use the easiest tools for the job.

  • GitHub repo stylus

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

    Project mention: My friend is learning CSS and HTML. Can you find ten things he can improve in his coding style? | reddit.com/r/css | 2021-06-09

    OOCSS - (Object-oriented CSS) 2. Use a preprocessor. They fill the lacking features of CSS and helps you write more readable, and smaller reusable pieces of CSS. Some popular preprocessors are: 1. Sass 2. Less 3. Stylus 3. Reduce redundancy. You are using font-weight: bold for the header, but you are also setting it for the div inside. CSS stands for Cascading Style Sheets because styles in CSS are cascading, meaning child elements will inherit styles from parents. 4. Avoid using strong and complex selectors. You are using an id, but a class would do just fine. Having strong selectors means you will have a harder time overriding them later on if needed. 5. Avoid using !important as much as possible. Only use it for utility and helper classes if you must, which need to override anything, such as hiding or displaying an element. 6. Don't use inline CSS, unless your inlining critical CSS. Instead, import styles using a link tag in your head element. (Critical CSS refers to above-the-fold content. Inlining it can help users see a properly rendered page more quicker) 7. Use semantic HTML. You are assigning a header class to a div, which could have been an h1/2/3/n element. This not only helps in terms of accessibility but can also help to improve your SEO score. 8. Use rem for typography. You are using em which cascades, meaning if you set the root element to have 12px, a main element with 2em will have the font size of 24px. If you put a div inside of it with 2em, it will have a font size of 48px, meaning that the size is duplicated. This makes it hard to track down values for deeply nested elements. Instead, use rem which stands for root em, and does not cascade. 9. Make sure your formatting is consistent. You use opening brackets both after a selector and on a new line. Tools like stylelint can help you enforce certain rules to keep your code more consistent, which helps to improve readability and maintainability. 10. Outsource your colors / sizes / spacings into variables. Everything that is bound to change can be in a configuration file to make things more flexible. You can either use CSS variables for this, or a preprocessor. 11. Nothing is written in stone, feel free to come up with your own set of rules that helps you create a more dev-friendly environment. But most importantly, keep things consistent.

  • GitHub repo tabler-icons

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

  • 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 | reddit.com/r/reactjs | 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 | reddit.com/r/SaaS | 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 uncss

    Remove unused styles from CSS

    Project mention: Lessons learned from building landing pages | dev.to | 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:

  • 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 | reddit.com/r/cscareerquestionsEU | 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 stylelint

    A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

    Project mention: My friend is learning CSS and HTML. Can you find ten things he can improve in his coding style? | reddit.com/r/css | 2021-06-09

    OOCSS - (Object-oriented CSS) 2. Use a preprocessor. They fill the lacking features of CSS and helps you write more readable, and smaller reusable pieces of CSS. Some popular preprocessors are: 1. Sass 2. Less 3. Stylus 3. Reduce redundancy. You are using font-weight: bold for the header, but you are also setting it for the div inside. CSS stands for Cascading Style Sheets because styles in CSS are cascading, meaning child elements will inherit styles from parents. 4. Avoid using strong and complex selectors. You are using an id, but a class would do just fine. Having strong selectors means you will have a harder time overriding them later on if needed. 5. Avoid using !important as much as possible. Only use it for utility and helper classes if you must, which need to override anything, such as hiding or displaying an element. 6. Don't use inline CSS, unless your inlining critical CSS. Instead, import styles using a link tag in your head element. (Critical CSS refers to above-the-fold content. Inlining it can help users see a properly rendered page more quicker) 7. Use semantic HTML. You are assigning a header class to a div, which could have been an h1/2/3/n element. This not only helps in terms of accessibility but can also help to improve your SEO score. 8. Use rem for typography. You are using em which cascades, meaning if you set the root element to have 12px, a main element with 2em will have the font size of 24px. If you put a div inside of it with 2em, it will have a font size of 48px, meaning that the size is duplicated. This makes it hard to track down values for deeply nested elements. Instead, use rem which stands for root em, and does not cascade. 9. Make sure your formatting is consistent. You use opening brackets both after a selector and on a new line. Tools like stylelint can help you enforce certain rules to keep your code more consistent, which helps to improve readability and maintainability. 10. Outsource your colors / sizes / spacings into variables. Everything that is bound to change can be in a configuration file to make things more flexible. You can either use CSS variables for this, or a preprocessor. 11. Nothing is written in stone, feel free to come up with your own set of rules that helps you create a more dev-friendly environment. But most importantly, keep things consistent.

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-06-15.

Index

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

Project Stars
1 Bootstrap 151,127
2 Font-Awesome 65,673
3 html5-boilerplate 50,685
4 Tailwind CSS 42,621
5 prettier 39,880
6 anime.js 39,566
7 parcel 38,531
8 Materialize 38,513
9 front-end-interview-handbook 29,296
10 Pure 21,744
11 scrollreveal 19,748
12 autoprefixer 19,575
13 less.js 16,597
14 front-end-guide 13,703
15 emotion 13,170
16 bootswatch 12,957
17 stylus 10,686
18 tabler-icons 10,373
19 material-design-for-bootstrap 9,473
20 critical 9,110
21 uncss 9,090
22 30-seconds-of-interviews 8,954
23 stylelint 8,794