Web development or software development in general is always washed with buzzwords, one that is not so new but starting to trend is "design systems". Basically, a design system is a collection or a library of reusable and customizable web components and widgets to make application development faster, easier and fun to repeat. If you're already using Bootstrap or Materialize UI, that is already an example of a design system. But large companies are also in to this design system bandwagon, IBM has Carbon Design System, General Electric has Edison Design System, Salesforce has Lightning Design System. The reason why a lot of design system proliferates is consistency another is uniqueness or identity (No vendor will sell products that looks like Bootstrap all through out).
I created a design system called The Beef Design System which is based on Vue and Bulma. The top reason I created a design system is most frontend tasks are easily repeatable and doesn't need to be started from scratch, whenever I need to start a new project I just have to clone the repository and customize or copy the built-in components to fit the new project's requirements and specifications. Therefore, my development workflow now works like a meat shop; pull out the beef, weigh it in, wrap it up nicely. One of the real world usage for Beef Design Template can be seen here AlabangSX which is a stock market recommendation application.
If you want to try and play around the system, just clone from Github Beef Design System, assuming NodeJS, VueCLI are installed
git clone https://github.com/jared201/beef.git
cd ~/beef
npm install
npm run serve
Have fun and don't forget to star and follow! :)
Top comments (1)
I made an update to include a custom button and dropdown components that communicates using Pinia
if you naviagate to Buttons beef-template.herokuapp.com/#/buttons and play along the custom beef button