Getting Started >

Stylet.css is an awesome, modern, beautiful and powerful CSS framework, designed in the aim of making responsive, beautiful, attractive and a website with awesome animations at ease, helping you develop faster and quicker.
With Stylet you can build fully powered Websites using only Stylet.It is compactible for all browsers:Chrome, Firefox, Edge, IE, Safari, Opera. And also devices, Desktop, Laptop, Tablet, Mobile,

Stylet is simple, easy-to-use, easy-to-learn. Stylet carries out stylings using class names. It gives you a powerful control over web UI designs.

    Advantages of Stylet

  • Saves times - Stylet helps you save time, as you can do alot of design just using a stylet's defined class name. You may not even need to create a external css file.
  • Load faster - Stylet has a minified version that loads less and makes web loading fast.
  • Easy maintenance - To make changes in your stylet all you need is to change the class name. And that element would be updated
  • Responsiveness - Stylet adds responsiveness to your website using media queries.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My First Stylet</title>
<link rel="stylesheet"href="stylet.css">
</head>
<body>
<h1 class="text-center text-bold">Hello World!</h1>
<p class="pad-top-3">This is my first CSS example</p>
</body>
</html>

You can notice how simple it is to use Stylet ,it has easy-to-use and understand class names, which you can easily remember. The codes above as self-explanatory, especially if you are good in using CSS ,we created a heading tag h1, "text-center" will align the heading to the center,we also made the text bolder by adding "text-bold" .
Next, we created a paragraph tag and added padding-top of 3(which is padding-top:0.75rem according to Stylet.)

Why Learn Stylet?

With Stylet you can create beautiful, amazing, unique and responsive websites. Stylet helps you create awesome Layouts,with a mix of animations,making you write lesser codes with great work. It also helps you develop fast and modern websites.
Stylet was developed by Nnamchi Israel ,and was released as an open source product in April 2022 on GitHub, under Apaxaa.
Stylet CSS is maintained by Apaxaa developers, and follows a set of rules, a ruling board called StylerRoutes.

Ways to use Stylet in your project

Stylet is available currently as four files:
  • Unminified CSS version.
  • Minified CSS version(good for production).
  • Animation Unminified CSS Version
  • Animation Minified CSS Version(good for production)
Note: The Minfied Versions are best to use when you want to launch your site(that is when you want to go production mode), they are minified, compressed version which will increase the loading time of your site.
There are three ways currently of getting Stylet in your project. You can use it by:
  1. Using the CDN link
  2. Installing it through NPM
  3. Downloading the source file

Using the Link

If you don't want to download and host Stylet yourself, you can include it from a CDN (Content Delivery Network). jsDelivr provides CDN support for Stylet's CSS.

Minified

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/css/stylet.min.css" rel="stylesheet">

Unminified

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/css/stylet.css" rel="stylesheet">

Animation Minified

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/css/stylet.animation.min.css" rel="stylesheet">

Animation Unminifed

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/css/stylet.animation.css" rel="stylesheet">

Installing it through npm

You can also install it into your project using the famous Node Package Installer (NPM):
using the simple one line command:

npm install stylet

Downloading the source file

If you want to download and host Stylet yourself,download it from the GitHub Repo,and read the ReadME file to put you through. or you can download the Zipped version if preferred.

Stylet JS

The current version of Stylet, which is version 1.0.0 does not actually require a JS file. Unless you want to use Stylet header and few other components. It is a very little JS writeup and is not considered a JS framework like Bootstrap JS. When you install Stylet using NPM, or from downloading it from GitHub, the JS folder is present there with two files. Minified and Unminified,
If using cdn you can add them through:

Unminifed JS

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/js/stylet.js" rel="stylesheet">

Minifed JS

<link href="https://cdn.jsdelivr.net/npm/stylet@1.0.0/dist/js/stylet.js" rel="stylesheet">