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
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
yarnto install dependencies
gulpto start the project in development mode with LIVE update in the browser
gulp buildto bundle all your changes for production in
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
- Boostrap carusel, Icon set from Nucleo
- Sample images: landing page, profile and login.
Argon Design - Components
Argon Design - Beautiful Carusel
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?
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.
- Access the product page: Argon Coded in Vue / Express
- Download and built the Express Backend by following the README file instructions. By default, the server will start on port 3000.
- Download Argon Vue.js App and build the app by following the instructions listed in the README file.
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.
If all goes well, you should see this app running
- Full-Stack Argon Design - coded in Flask and Vue.js
- Full-Stack Argon Design - coded in Laravel and Vue.js
- AppSeed - official documentation