Getting Started

There are different ways to get Started. See all the available options below and see the best that suits you. Now you should add the main file of the Rockrt or add the links in the header of your project. Let's Go!

Install with npm

npm i rockrtcss

Once downloaded, What's included?

rockrt.css/
├── dist/
│   ├── rockrt.css
│   └── rockrt.min.css
├── LICENSE
└── readme.md
      

CDN

Copy & paste in the head tag of your code

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

---

Typography

Rockrt uses a default font-size of 14px and it's line-height of 1.5. The default font-family is 'Poppins', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif

<h1> - <h6>

Rockrt heading styles are bolder in font-weight and increased in font-size

Heading4.6rem = 46px

Heading3.6rem = 36px

Heading2.8rem = 28px

Heading2.2rem = 22px

Heading1.8rem = 18px

Heading1.4rem = 14px

  <h1>Heading</h1>
  <h2>Heading</h2>
  <h3>Heading</h3>
  <h4>Heading</h4>
  <h5>Heading</h5>
  <h6>Heading</h6>
 

<blockquote>

The blockquote tag will be styled the example below:

This is a blockquote!

<blockquote>This is a blockquote!</blockquote>

<dl>

The dl tag will be styled like the example below:

Rockrt

This is a text!

   <dl>
   <dt>Rockrt</dt>
   <dd>This is a text!</dd>
   </dl>
  

<pre> & <code>

The <pre> & <code> tags joined together will produce the example below:

    .rkt.btn{
      background: #000000;
    }
  

    <pre><code>
    .rkt.btn{
      background: #000000;
    }
    </pre></code>
  

---

Container

    <div class="container">
    
    </div>
  

---

Buttons

Rockrt as a default and custom buttons

Default Buttons

    <div class="rkt btn">Button</div>
    <div class="rkt btn-outlined">Button</div>  
  

Custom Buttons

    <div class="rkt btn primary">Button</div>
    <div class="rkt btn-outlined primary">Button</div>  
  

    <div class="rkt btn dark-norm">Button</div>
    <div class="rkt btn-outlined dark-norm">Button</div>  
  

    <div class="rkt btn good">Button</div>
    <div class="rkt btn-outlined good">Button</div>  
  

    <div class="rkt btn angry">Button</div>
    <div class="rkt btn-outlined angry">Button</div>  
  

    <div class="rkt btn calm">Button</div>
    <div class="rkt btn-outlined calm">Button</div>  
  

    <div class="rkt btn bg-link">Button</div>
    <div class="rkt btn-outlined bg-link">Button</div>  
  

    <div class="rkt btn dark">Button</div>
    <div class="rkt btn-outlined dark">Button</div>  
  

    <div class="rkt btn link">Link</div>
  

---

Navbars

    <nav class="navbar">
    <div class="navbar-title">Navbar</div>
    <div class="navbar-link">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

    <nav class="navbar">
    <div class="navbar-title"><img style="width: 50px;" src="logo.png" alt"img"></div>
    <div class="navbar-link">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

    <nav class="navbar">
    <div class="navbar-title">Navbar</div>
    <div class="navbar-link right">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

    <nav class="navbar">
    <div class="navbar-link left">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    <div class="navbar-title">Navbar</div>
    </nav>  
  

    <nav class="navbar">
    <div class="navbar-title">Navbar</div>
    <div class="navbar-link center">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

    <nav class="navbar round">
    <div class="navbar-title">Navbar</div>
    <div class="navbar-link">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

    <nav class="navbar sticky">
    <div class="navbar-title">Navbar</div>
    <div class="navbar-link">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    </div>
    </nav>  
  

Adding more soon!