Top 23 JavaScript CSS Projects
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Resets try to get rid of known browser-specific styles and replace them with neutrals. Then, on top of that, you use your own style. (Something like Bootstrap comes with its own built-in reset.)
-
Font Awesome
-
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
Project mention: (rant) Is there ANY framework or toolkit that isnt outrageously difficult to configure before you even write a single line of code? | reddit.com/r/webdev | 2021-11-26I find angular cli pretty straight forward, for smaller projects I like html5 boilerplate
-
So for example if you are running a TailwindCSS or other utility CSS based framework, like WindiCSS, thats one of the easiest use cases.
-
Prettier is a great tool for maintaining consistent formatting in a project. Prettier works quite well for a monorepo. One can simply define a .prettierrc file in the root of the monorepo and run Prettier using that configuration file. It will automatically apply to all packages in the monorepo.
-
-
For our release 0.3 project we were to make a pull request for a external project outside of our class's repos and one pull request for an internal repo. For my external PR I worked and still am working on a library project that my professor maintains outside of Seneca called Filer. Filer is a drop-in library that works like node's fs module but for browsers. The issue I was working on was making a migration of parcel 1 to parcel 2.
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. 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.
-
Materialize, Material UI, Material Design Lite
-
Project mention: Had a junior web dev interview and I kinda bombed it | reddit.com/r/webdev | 2021-11-25
-
Project mention: Just wondering...anyone else here use HTML, CSS, and Vanilla JS exclusively? | reddit.com/r/webdev | 2021-11-12
I use https://purecss.io/ all the time
-
It seems "Chips" usually come with icons/images whereas "Tags" are simply made of text, according to Material Design Bootstrap | Github here
-
-
Did you read their README? It explains what it does with examples.
-
Have you played around with SASS? Or LESS? Or Stylus?
-
Emotion
-
-
As a piece of concrete advise, you can use something like Bootstrap, which is already highly theme-able (almost all React component frameworks are highly theme-able, but Bootstrap can be themed with a simple link tag in your HTML), https://bootswatch.com/, so that you can have a consistent UI, while you focus on learning the ropes of React. Just becareful that some bootstrap elements might need jquery, which is why reactstrap or react-bootstrap exist.
-
Stylus
-
tabler-icons
A set of over 1350 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Tabler Icons
-
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-11Also 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.
-
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-31I 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
-
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.
-
stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Project mention: When doing an @import to include external CSS, do the imports have to be before any other CSS? | reddit.com/r/css | 2021-09-07
JavaScript CSS related posts
- Anyone got a good spot for learning flex box?
- Possible to set a dark theme palette in tailwind.config?
- How to use with another exciting framework
- Have you even seen Windows 11 on web? Here's a ReactJs version of windows11 that tries to replicate the windows 11 experience but on web. Using standard technologies like React, Redux, CSS etc.
- (rant) Is there ANY framework or toolkit that isnt outrageously difficult to configure before you even write a single line of code?
- Create A Laravel Cookie Consent Banner Without JavaScript
- 100 design resources for developers
Index
What are some of the best open-source CSS projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Bootstrap | 154,118 |
| 2 | Font-Awesome | 66,560 |
| 3 | html5-boilerplate | 51,915 |
| 4 | Tailwind CSS | 49,384 |
| 5 | prettier | 41,257 |
| 6 | anime.js | 40,866 |
| 7 | parcel | 39,517 |
| 8 | Materialize | 38,613 |
| 9 | front-end-interview-handbook | 32,107 |
| 10 | Pure | 22,032 |
| 11 | mdb-ui-kit | 21,756 |
| 12 | scrollreveal | 20,186 |
| 13 | autoprefixer | 19,967 |
| 14 | less.js | 16,687 |
| 15 | emotion | 14,052 |
| 16 | front-end-guide | 14,031 |
| 17 | bootswatch | 13,264 |
| 18 | stylus | 10,801 |
| 19 | tabler-icons | 10,798 |
| 20 | material-design-for-bootstrap | 9,462 |
| 21 | 30-seconds-of-interviews | 9,373 |
| 22 | critical | 9,343 |
| 23 | stylelint | 9,269 |
Are you hiring? Post a new remote job listing for free.
