Argon Design System

Hello Coders,

In this article i will present a great design crafted by Creative-Tim: Argon Design System, a free and open source design system for Bootstrap 4.

Open-Source Design System

Crafted in Bootstrap 4 and jQuery

Argon Design System - The Open Source Design System, Main Image.

Using this UI Kit a developer can built basically, any type of website: corporate, small business website, single page or even a coming soon page. The design is bundled along with SaaS files and Gulp script to make the customization much easier.

How to use Argon Design System.
  • download the product from the official page
  • unzip and switch into the argon-design-system directory
  • type yarn to install dependencies
  • type gulp to start the project in development mode with LIVE update in the browser
  • type gulp build to bundle all your changes for production in dist directory

Where to go from here? Build you own pages using existing components. Argon Design System comes with crafted  elements:
  • Basic elements: buttons, inputs, menus, beautiful typography
  • Javascript components: modals, date picker, tool tips
  • Boostrap carusel, Icon set from Nucleo
  • Sample images: landing page, profile and login.      

Argon Design - Components

Argon Design - The components page.

Argon Design - Beautiful Carusel

Argon Design - Sample Carusel.

Argon Design - Sample pages

Argon Design - Sample Pages.

Need More? We have some really good news: Argon Design is coded as a Full-Stack app by AppSeed team.

Full-Stack Argon Design for Vue.js

This amazing UI Kit is also available for Vue.js developers as a Full-Stack App bundled with Flask, Laravel and Express Backends. Amazing right?

Argon Design in Vue.js / Express

Node.js developers might be take into account this Full-Stack bundle provided by AppSeed. It's easy to setup the environment, the app is well documented and support is given for free. How to build?

Note for newcomers: All Full-Stack Apps built by AppSeed, follows the same architecture: The Frontend is decoupled and communicates with the Backend via a simple REST API. This architecture simplified the development because empowers the developer to write his magic on a modular structure.

The App will start on port 8080, by default and expects to have an up & running backend on port 3000. Of course, you can easily customize  the ports by reading the official documentation.

DEMO Argon Design in Vue.js / Express

If all goes well, you should see this app running

Main Image of Argon Design coded in Vue.js and Express as Full-Stack App.

Related resources:

Need Support? Contact us on Discord and Facebook (closed group).
Show Comments

Get the latest posts delivered right to your inbox.