Getting Started with AiraCSS

Learn how to quickly and easily implement AiraCSS in your next project with our step-by-step guide.

AiraCSS is a cutting-edge CSS framework designed to streamline your web devlopment process.Whether you're builing a simple blog or a complex e-commerce site,Astral provides the CSS components you need to create stunning,responsive designs with ease.

Quick start

Looking to quickly add AiraCSS to your project? Use jsDelivr, a free open source CDN.You need to download the source files? Head to the download page.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.


<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/css/astral.css-v3.0.min.css" rel="stylesheet">

JS

Some of our components require the use of JavaScript to function. Place the following <script> near the end of your pages, right before the closing </body> tag, to enable it.


<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/js/astral-v3.0.min.js"></script>

Code Requirement

For Astral to work correctly, you need to make your webpage responsive.

Use the HTML5 doctype 


<!DOCTYPE html>

Add the responsive viewport meta tag 


<meta name="viewport" content ="width=device-width, initial-scale=1">

Starter Template

Ensure you have pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviours. Put it all together and your pages should look like this:


<!-- <!doctype html>  -->
<html lang="en">
      <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content ="width=device-width, initial-scale=1">
      
      <!-- AiraCSS -->
      <link href="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/css/astral.css-v3.0.min.css" rel="stylesheet" >
                  
      <title>Hello, world!</title>
      </head>
      <body>
      
      <h1>Hello, world!</h1>
                  
                  
      <script> src="https://cdn.jsdelivr.net/gh/thaboyaluya/astral.css-V3.0@master/js/astral-v3.0.min.js" ></script>
                  

      </body>
</html>

AiraCSS Starter Template

We have created a starter template so you can easily start designing your website with minimal setup up time.

AiraCSS Starter Template

This is the simplest starter page with a Header, Call-to-Action and Footer.

DEMO Download