Getting Started with Astral.CSS

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

Astral.CSS is a cutting-edge CSS framework that makes your web development journey smooth and efficient. Whether you’re a seasoned developer or just starting out, Astral.CSS provides all the tools you need to create stunning, responsive designs with ease. Designed and built by Rume Aluya, this framework is here to level up your projects. 🚀

Quick Start

Getting started with Astral.CSS is a breeze! Choose one of the following ways to integrate it into your project:

Option 1: Add Astral.CSS via CDN

Use jsDelivr, a free open-source CDN, to quickly add Astral.CSS. Copy and paste the following code into your project:

CSS:

Add this <link> tag to the <head> of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thaboyaluya/astralcss@master/dist/css/astral.css-3.1.0.min.css">

JavaScript

For components requiring JavaScript, include this <script> tag just before your closing </body> tag:

<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astralcss@master/dist/js/astral%403.1.0.min.js"></script>

Option 2: Download the Source Files

Prefer working offline? Head to the download pageto grab the source files and include them in your project. 🎉

Code Requirements 🖥️

To ensure Astral.CSS works seamlessly, follow these best practices:

Use the HTML5 doctype

Include this at the top of your HTML file:

<!DOCTYPE html>

Add the Responsive Viewport Meta Tag

Make your site responsive with this tag in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Astral.CSS Starter Template 🛠️

Ready to kick things off? Use this starter template to get your website up and running in no time:


<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/astralcss@master/dist/css/astral.css-3.1.0.min.css" rel="stylesheet">
	
		Hello, world!
		</head>
		<body>
		
		>h1>Hello, world!</h1>
						
		<script src="https://cdn.jsdelivr.net/gh/thaboyaluya/astralcss@master/dist/js/astral%403.1.0.min.js"></script>
	
	</body>
</html>

Astral.CSS Starter Page 🌟

We’ve made it even easier with a pre-designed Starter Page! This template includes a Header, a Call-to-Action , and a Footer so you can jump right into designing without hassle. Give it a try and start building something amazing! 🖌️

DEMO Download

Designed and built with ♥ by Rume Aluya.