This CSS framework developed by Simuratli and it is free for use.
- You can use this framework with download or clone
- You can also Fork this project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/ashina.css">
<title>Ashina template</title>
</head>
<body>
<h1>Hello, World</h1>
<script src="js/jquery-3.4.1.js "></script>
<script src="js/ashina.js "></script>
</body>
</html><div class='nav'>
<div class="menu-icon">
<span class="bar"></span>
</div>
<div class="logo">
<h1>LOGO</h1>
</div>
<div class="menu">
<ul>
<li class="nav-item">
<a href="#">Main</a>
</li>
<li class="nav-item">
<a href="#">Contact</a>
</li>
<li class="nav-item">
<a href="#">About us</a>
</li>
<li class="nav-item">
<a href="#">Adress</a>
</li>
</ul>
</div>
</div>It seen like that
- Login
- Register
<div class="formContainer">
<div class="text-center">
<h1>Login form</h1>
</div>
<form class="form">
<label class="label">Name
<input class="formElement" placeholder="Name" type="text">
</label>
<label class="label">Surname
<input class="formElement" placeholder="Name" type="text">
</label>
<br>
<button class="successButton">Log in</button>
<a class="fPass" href="#">Forgot password ?</a>
</form>
</div>
<div class="formContainer">
<div class="text-center">
<h1>Register form</h1>
</div>
<form class="form" action="">
<label class="label">Email
<input class="formElement" placeholder="Email" type="email">
</label>
<label class="label">Password
<input class="formElement" placeholder="Password" type="password">
</label>
<label class="label">Password again
<input class="formElement" placeholder="Password again" type="password">
</label>
<br>
<button class="infoButton">Register</button> <a class=" fPass " href="# ">Do you have a account ?</a>
</form>
</div>
There have a 3 type of cards
- Left image card
- Top image card
- Simple card
the template of simple card given below
<div class="card ">
<div class="card-body">
<h1 class="card-title">
Card title lor
</h1>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem soluta ipsam ad ea iste expedita, dolorem dolore repudiandae vel neque ipsa atque molestiae ipsum. Asperiores ullam laboriosam rem expedita est?
</p>
<div class="card-footer">
<p>-Simuratli Elcan</p>
</div>
</div>
</div>
Code example of Top image card
<div class="card">
<div class="cardImg">
<img src="/" alt="">
</div>
<div class="card-body">
<h1 class="card-title">Card text</h1>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus sint magni perferendis laudantium rerum aliquid nostrum quos, accusantium fugit asperiores quidem veniam, unde a quaerat! Blanditiis dicta vel obcaecati natus!</p>
</div>
</div>in here you can also use div item with class card-footer (after card-body div) for adding footer element
Code example of Left image card
<div class="card flex">
<div class="cardImg">
<img src="/" alt="">
</div>
<div class="card-body">
<h1 class="card-title">Card text</h1>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus sint magni perferendis laudantium rerum aliquid nostrum quos, accusantium fugit asperiores quidem veniam, unde a quaerat! Blanditiis dicta vel obcaecati natus!</p>
</div>
</div>YOU CAN ONLY ADD THE FLEX CLASS TO THE CARD DIV YOU TURN YOUR TOP IMAGE CARD TO THE LEFT IMAGE CARD in here you can also use div item with class card-footer (inside card-body div) for adding footer element
- Large
- Medium
- Small
<div class='fullContainer'></div>it cover width:100% of html page
<div class='container'></div>it cover width:95% of html page
<div class='smallContainer'></div>it cover width:80% of html page
There have 4 type of buttons
- Normal buttons
- Rounded buttons
- Outlined buttons
- Small buttons
<button class="infoButton">Info</button>
<button class="warnButton">Warning</button>
<button class="dangerButton">Danger</button>
<button class="successButton">Success</button>
<button class="gradientButton">Gradiend</button>
you can make your button rounded only added rounded class
<button class="infoButton rounded ">Info</button>
<button class="warnButton rounded">Warning</button>
<button class="dangerButton rounded">Danger</button>
<button class="successButton rounded">Success</button>
<button class="gradientButton rounded">Gradiend</button>
<button class="outline-info ">Outline Info</button>
<button class="outline-success">Outline Success</button>
<button class="outline-danger">Outline-danger</button>
<button class="outline-warn">Outline-warn</button>
you can make your button SMALL only added rounded class
<button class="outline-info smallButton ">Outline Info</button>
<button class="outline-success smallButton">Outline Success</button>
<button class="outline-danger smallButton">Outline-danger</button>
<button class="outline-warn smallButton">Outline-warn</button>
<button class="infoButton smallButton">Info</button>
<button class="warnButton smallButton">Warning</button>
<button class="dangerButton smallButton">Danger</button>
<button class="successButton smallButton">Success</button>
<button class="gradientButton smallButton">Gradiend</button>
Using different classes you can made colorful your template Ashina hava a 4 main color and 1 gradient color
.bgColorDanger
.bgColorInfo
.bgColorSuccess
.bgColorWarn
.bgColorGradient
There have 2 main text color Black and white
<p class='textDark'></p>
<p class='textWhite'></p>The Ashina included flex system with 12 columns.
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12<div class="row">
<!-- <div class="col-1"> 1</div>
<div class="col-2"> 2</div>
<div class="col-3"> 3</div>
<div class="col-4"> 4</div>
<div class="col-5"> 5</div>
<div class="col-6"> 6</div>
<div class="col-7"> 7</div>
<div class="col-8"> 8</div>
<div class="col-9"> 9</div>
<div class="col-10"> 10</div>
<div class="col-11"> 11</div>
<div class="col-12"> 12</div> -->
</div>