Is there a better option than plain HTML, CSS and JS for creating my own design system?

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

That said, I do think that if you're after self-encapsulated pieces of HTML, CSS, and JS then a typical framework is exactly what you're looking for. Since you seem to be working alone/for yourself, I would highly recommend Svelte (https://svelte.dev). It is most similar to the experience of writing vanilla HTML, CSS, and JS but just more ergonomic and enabling re-use via components. Also, Svelte has the advantage of being a complier moreso than a library, meaning it incurs less costs in both performance and size then the competitors.

• lit

  141 17,535 9.4 TypeScript

  Lit is a simple library for building fast, lightweight web components.

  

next, use some framework such as lit.dev or Svelte. you may argue “you don’t need it now,” but I guarantee you that if you actually want to reuse this, you will at some point need a framework, and there is no sane way to consume raw HTML/CSS/JS in a framework. picking something is better than nothing. so all your work would be wasted.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• htmx

  565 32,656 9.6 JavaScript

  </> htmx - high power tools for HTML

  

htmx and tailwind

• Quasar Framework

  159 25,202 9.9 JavaScript

  Quasar Framework - Build high-performance VueJS user interfaces in record time

  

• shoelace-css

  73 11,962 9.6 TypeScript

  A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! 👇👇👇

  

Check out https://shoelace.style/ Its based on web components, so you can use it with any framework or even vanilla js.

• Hugo

  548 72,452 9.8 Go

  The world’s fastest framework for building websites.

  

So everything is static HTML? Or do you use something like https://gohugo.io/ to generate your site, so you only need to define your site structure once, and can keep your content as either HTML or even markdown? with the possibility to override whichever and whatever you want

• tachyons

  41 11,585 7.6 CSS

  Functional css for humans

  

I like using a functional CSS library (tachyons.io, tailwindcss, or SLDS) and setup components separately. The CSS has my colors and units declared (and the aim is to not have 40 different gray colors, it's to limit yourself with a definition list). Then the actual components are setup via a component library. Plenty to choose from: React, VueJS, LWC, AngularJS, or just native web components.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• Tutor

  1 7 10.0 PHP

  Not just a template, but rather a ready-to-use site complete with CMS and 100+ pre-designed blocks to choose from. Free and open-source. (by CouchCMS)

  

There is this https://github.com/CouchCMS/Tutor with a quick demo at https://www.youtube.com/watch?v=swR52Winn-E

Suggest a related project