Argon Design - JAMstack version

Hello Coders,

We are glad to announce the latest freebie released by AppSeed: the JAMstack version of well-known Argon Design System, crafted by Creative-Tim in Bootstrap CSS Framework.

You might wonder, why enhancing a good product?

This is a good question because the original product is great and stable, gulp scripts compiles and bundle the product as expected.

AppSeed enhancements:
  • HTML files are translated into a modular structure that use a master layout, isolated components, CSS and JS dependencies are isolated.
  • Pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.
  • FTP deployment script - just type yarn deploy, and your app is LIVE

Convinced to give it a try? Meet JAMstack Argon Design

Open-Source Bootstrap App coded in JAMStack

Crafted by Creative-Tim, enhanced by AppSeed App Generator

JamStack Argon Design System

 

How to build JAMstack Argon Design

Build this App in less than 5 minutes

The code of JAMStack Argon design is released under MIT license, code is available on Github

  • checkout the code
  • git clone https://github.com/app-generator/argon-design-system.git
  • cd argon-design-system
  • yarn # install dependencies
  • yarn start # start the app in development mode
  • yarn build # build the app for production
  • yarn deploy # live deploy. INFO: edit deploy.js to match your FTP server credentials

This amazing design can be used to build simple presentation web apps, portfolio and even simple eCommerce applications. Let's take a look at the LIVE demo:

DEMO JAMstack Argon Design

If all goes well, you should see this app running in your browser

Argon Design - Sample Carusel.

Argon Design - Sample Pages.

How to customize the app:

The pages are generated from modular structure:

HTML PAGE = layout <- page <- components

Let's analyze the login page, for instance. The page has a Markup header where we can customize the page content, select the master layout and specify any Handlebars helpers we might use.

JAMstack Argon Design - Sample Page Source Code

The default layout page is fairly simple, and contains ~= 20 lines of code:

<!DOCTYPE html>
<html>

<head>
    {{> header }}
</head>

<body>
  <header class="header-global">
    {{> navigation }}
  </header>
  <main>
    {{> body}}
  </main>
  {{> footer }} 
  {{> scripts }}  
</body>

</html>

In case you want to get a closer look at this open-source web app, feel free to access the related resources:

Future enhancements

Thank You!

JAMstack Argon Design - Open-Source App

Show Comments

Get the latest posts delivered right to your inbox.