Getting Started with Astral

Learn how to easily start using Astral.CSS in your next project

Asral 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 Astral 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-2.3.4/css/astral.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-2.3.4/js/astral.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:

		

<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    <link href="https://cdn.jsdelivr.net/gh/thaboyaluya/Astral.CSS-2.3.4/css/astral.min.css" rel="stylesheet" >
			
    <title>Hello, world!</title>
  </head>
  <body>
    
    <h1>Hello, world!</h1>
			
			
    <script> src="https://cdn.jsdelivr.net/gh/thaboyaluya/Astral.CSS-2.3.4/js/astral.min.js" ></script>
			

 </body>
</html>
On this page