astronot new css framework with slim and fast

Astronot CSS Documentation

Let's playing with astronot css new modern and fast slim css - learn html css and markdown.

Hey... you can download starter template in here →

Or you need to learn about layout ?? get started now →

Typography

<h1>this is header 1</h1>
 or you can use # on markdown style

<h2>this is header 2</h2>
 or you can use ## on markdown style

<h3>this is header 3</h3>
 or you can use ### on markdown style

<h4>this is header 4</h4>
 or you can use #### on markdown style

<h5>this is header 5</h5>
 or you can use ##### on markdown style

<h6>this is header 6</h6>
 or you can use ###### on markdown style

<p></p> this is a paragprah content

Image

<img alt="" src=""/>

Video

<iframe width="360" height="215" src="https://www.youtube.com/embed/GPOQzSnGqXw"> </iframe>

Codding

This is link use <a href="inserturlhere"> This is a link </a>

This is link use <a href="inserturlhere" class="link"> This is a link </a> use class="link" for white text

<code>input script code here</code>

<pre>input script pre code here</pre>

<pre><code>input script pre code here</code></pre>

<span>input something here..</span>

<blockquote>Wohoo... Astro CSS is cool</blockquote>

Example

use blockquote

Wohoo... Astronot CSS is cool

use span : git clone astronot.git

use code : this is code

<pre> Example for pre </pre>

.astronot {
  color: #9b4dca;
}

<pre><code> Example for pre code </code></pre>


.astronot {
  color: #9b4dca;
}

Button

<button> hey i'm button </button>

<a href="link here" class="button"> click here </a>

<a href="link here"><span class="meteor"> click here </span></a>

<button class="astronot"> astronot </button>

<button class="meteor"> meteor </button>

<button class="rocket"> rocket </button>

<button class="mooon"> moon </button>

<button class="star"> star </button>

<button class="asteroid"> asteroid </button>

<button class="btn-astronot"> astronot </button>

<button class="btn-meteor"> meteor </button>

<button class="btn-rocket"> rocket </button>

<button class="btn-mooon"> moon </button>

<button class="btn-star"> star </button>

<button class="btn-asteroid"> asteroid </button>

Example for button : Link with span Link Span

astronot meteor rocket moon star asteroid

List

Codding

<ul>

<li>list 1</li>

<li><list 2</li>

<li>list 3 </li>

</ul>

Output

this is list 1
this is list 2
this is list 3

Codding List Numeric

<ol>

<li>list 1</li>

<li><list 2</li>

</ol>

List Numeric output

Numeric list item 1
Numeric list item 2

Codding List Description

<dl>

<dt>list 1</dl>

<dd><list 2</dd>

</dl>

List Description output

Description list item 1: Description list item 1.1

Markdown style List

This is list

+ list 1 

+ list 2 

+ list 3

Table

Codding Table

<table>

 <thead>

   <tr>

    <th>Static Site Generator</th>

    <th>Template</th>

    <th>website</th>

   </tr>

 </thead>

 <tbody>

   <tr>

    <td>Jekyll</td>

    <td>Liquid</td>

    <td>jekyllrb.com</td>

   </tr>

   <tr>

    <td>Eleventy</td>

    <td>Nunjuck</td>

    <td>11ty.dev</td>

   </tr>

   <tr>

    <td>Astro</td>

    <td>Astro</td>

    <td>astro.build</td>

   </tr>

 </tbody>

</table>

Table Output

Static Site Generator	Template	Website
Jekyll	Liquid	jekyllrb.com
Eleventy	Nunjuck	11ty.dev
Astro	Astro	astro.build

Form Action

<form action="your action here" method="post">

<input class="form" type="text" name="name" placeholder="Insert name">

<texarea class="form" name="message" placeholder="Insert some message"></textarea>

<input type="checkbox" value="" id="flexCheckDefault">

<label for="flexCheckDefault"> This is check </label>

<button>Send Message</button>

</form>

Form Output :