Top 23 JavaScript CSS Projects

• Bootstrap

  94 151,127 9.8 JavaScript

  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.

• Font-Awesome

  29 65,673 2.5 JavaScript

  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.

• Scout APM

  Sponsored scoutapm.com

  Scout APM - Leading-edge performance monitoring starting at $39/month. 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

  8 50,685 8.4 JavaScript

  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.

• Tailwind CSS

  192 42,621 9.7 JavaScript

  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

• prettier

  55 39,880 9.9 JavaScript

  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

• anime.js

  12 39,566 3.6 JavaScript

  JavaScript animation engine

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

  1. Anime.js

• parcel

  27 38,531 9.4 JavaScript

  📦🚀 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.

• SaaSHub

  Sponsored www.saashub.com

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

• Materialize

  10 38,513 0.0 JavaScript

  Materialize, a CSS Framework based on Material Design

  Project mention: Form checkboxes or use a form API? | reddit.com/r/rails | 2021-06-03

• front-end-interview-handbook

  9 29,296 6.6 JavaScript

  🕸 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

• Pure

  4 21,744 5.9 JavaScript

  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

• scrollreveal

  3 19,748 3.3 JavaScript

  Animate elements as they scroll into view.

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

  Scroll Reveal

• autoprefixer

  9 19,575 7.6 JavaScript

  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.

• less.js

  4 16,597 0.0 JavaScript

  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.

• front-end-guide

  1 13,703 0.0 JavaScript

  📚 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

• emotion

  10 13,170 8.5 JavaScript

  👩‍🎤 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

• bootswatch

  5 12,957 8.9 JavaScript

  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.

• stylus

  7 10,686 1.9 JavaScript

  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.

• tabler-icons

  0 10,373 9.2 JavaScript

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

  

• material-design-for-bootstrap

  1 9,473 3.3 JavaScript

  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.

• critical

  4 9,110 5.5 JavaScript

  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.

• uncss

  3 9,090 1.4 JavaScript

  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:

• 30-seconds-of-interviews

  1 8,954 0.0 JavaScript

  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

• stylelint

  9 8,794 9.2 JavaScript

  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.

Index