tan taram tarammam bam taram traram

Welcome To easyCSS 2.0 adding many new cool things! just go look!

How To Start

First you need to link it to you're page and you're done.

 <link rel="stylesheet" href="http://easycss.netlify.app/easycss.css">

The New Class Names

Hover Effects

<div class="block right hover-bg">
        <h3>Example</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

<h1 class="hover-text-lg">example</h1>
<h1 class="hover-text-md">example</h1>
<h1 class="hover-text-sm">example</h1>

<h1 class="hover">example</h1>

header

<div class="nheader-light">
        <div class="content">
            <div class="brand"><a href="#">easyCSS</a></div>
        </div>
        <div class="links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>

<div class="nheader-dark">
        <div class="content">
            <div class="brand"><a href="#">easyCSS</a></div>
        </div>
        <div class="links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>

<div class="nheader">
        <div class="content">
            <div class="brand"><a href="#">easyCSS</a></div>
        </div>
        <div class="links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>

bShow

<div class="bshow sh-5">
    <div class="container">
        <h1 class="hover-text-lg">bShow</h1>
        <p>Lorem ipsum dolor sit amet consectetur<span class="badge badge-primary">7</span> adipisicing elit. Quaerat ex debitis aut at culpa a odit magni consequatur, autem, dolore, cupiditate perspiciatis vitae ratione pariatur accusamus in amet ut aperiam.</p>
        <button class="btn-outline-light">Get Started</button>
</div>
</div>

border

.b-x1
.b-x2
.b-x3
.b-x4
.b-x5
.b-x6
.b-x7
.b-x8
.b-x9
.b-xXL

border-left

.b-l-x1
.b-l-x2
.b-l-x3
.b-l-x4
.b-l-x5
.b-l-x6
.b-l-x7
.b-l-x8
.b-l-x9
.b-l-xXL

border-right

.b-r-x1
.b-r-x2
.b-r-x3
.b-r-x4
.b-r-x5
.b-r-x6
.b-r-x7
.b-r-x8
.b-r-x9
.b-r-xXL

border-top

.b-t-x1
.b-t-x2
.b-t-x3
.b-t-x4
.b-t-x5
.b-t-x6
.b-t-x7
.b-t-x8
.b-t-x9
.b-t-xXL

border-bottom

.b-b-x1
.b-b-x2
.b-b-x3
.b-b-x4
.b-b-x5
.b-b-x6
.b-b-x7
.b-b-x8
.b-b-x9
.b-b-xXL

tags

<h1-red>blablabla</h1-red>
<h1-green>blablabla</h1-green>
<h1-yellow>blablabla</h1-yellow>
<h1-blue>blablabla</h1-blue>
<h1-primary>blablabla</h1-primary>

blockquote

<blockquote class="x2">
    I'm a blockquote
</blockquote> 

breadcrumb

<div class="breadcrumb">
    <h4 class="bc-items"><span class="bc-item hover-text-md"><a href="#">why?</a></span> <span class="bc-slash">/</span> <span class="bc-item"><a href="#">contact</a></span> <span class="bc-slash">/</span> <span class="bc-act-item"><a href="#">about</a></span></h4>
</div>

Shadow System

• Sh-0
• Sh-1
• Sh-1-half
• Sh-2
• Sh-3
• Sh-4
• Sh-5

New Backgrounds

• bg-dark
• bg-light

Cards

<div class="row">
    <div class="col s12 m6">
      <div class="card auto large darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem facilis aperiam, illum harum reprehenderit nemo, in maiores voluptates totam nulla id blanditiis possimus quos ratione necessitatibus quaerat odio quia obcaecati.</p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia eos soluta animi dolor nostrum, iusto fuga culpa odit illo quam asperiores nam. Atque magni cum asperiores, harum natus impedit nostrum.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum dolorem aspernatur laborum doloremque accusamus labore, obcaecati similique repudiandae! Quos excepturi corrupti, explicabo culpa nobis ab! Cupiditate doloribus autem rem quasi.</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!</p>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

Some normal stuff

.auto
.hide

Some New Text stuff

.c-light
.c-dark
.c-secondary
.grey-text
.white-text
.light
.thin
.auto

Other

.circle
.center-block
.btn-large
.btn-small
.c1

Radio Buttons

<form action="#">
    <p>
      <label>
        <input name="group" type="radio" checked />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group" type="radio" disabled="disabled" />
        <span>disabled</span>
      </label>
    </p>
  </form>

Input Range

<input type="range" name="" id="">

Images

.img-lg
.img-md
.img-sm
.img-circle
.img-half-circle
.img-flat

Width

.width-hs
.width-fs
.width-sm

Border Radius

.b-15
.b-20
.b-23
.b-25
.b-30
.b-35
.b-circle
.b-h-circle

Font Weight

.bold
.bolder

Font Style

.ob
.italic

Lists

Wait where are the lists!
Ohh yea if you want the lists you need to go to the file called list.md thanks.

The other class names

The Sizes

x1 = 1rem
x2 = 2rem
x3 = 3rem
x4 = 4rem
x5 = 5rem
x6 = 6rem
x7 = 7rem
x8 = 8rem
x9 = 9rem
xXL = 10rem

Padding

p-x1 = padding 1rem
p-x2 = padding 2rem
p-x3 = padding 3rem
p-x4 = padding 4rem
p-x5= padding 5rem
p-x6 = padding 6rem
p-x7 = padding 7rem
p-x8 = padding 8rem
p-x9 = padding 9rem
p-xXL = padding 10rem

Padding right

p-r-x1 = 1rem
p-r-x2 = 2rem
p-r-x3 = 3rem
p-r-x4 = 4rem
p-r-x5 = 5rem
p-r-x6 = 6rem
p-r-x7 = 7rem
p-r-x8 = 8rem
p-r-x9 = 9rem
p-r-xXL = 10rem

Padding left

p-l-x1 = 1rem
p-l-x2 = 2rem
p-l-x3 = 3rem
p-l-x4 = 4rem
p-l-x5 = 5rem
p-l-x6 = 6rem
p-l-x7 = 7rem
p-l-x8 = 8rem
p-l-x9 = 9rem
p-l-xXL = 10rem

Padding top

p-t-x1 = 1rem
p-t-x2 = 2rem
p-t-x3 = 3rem
p-t-x4 = 4rem
p-t-x5 = 5rem
p-t-x6 = 6rem
p-t-x7 = 7rem
p-t-x8 = 8rem
p-t-x9 = 9rem
p-t-xXL = 10rem

Padding bottom

p-b-x1 = 1rem
p-b-x2 = 2rem
p-b-x3 = 3rem
p-b-x4 = 4rem
p-b-x5 = 5rem
p-b-x6 = 6rem
p-b-x7 = 7rem
p-b-x8 = 8rem
p-b-x9 = 9rem
p-b-xXL = 10rem

Margin

m-x1 = 1rem
m-x2 = 2rem
m-x3 = 3rem
m-x4 = 4rem
m-x5 = 5rem
m-x6 = 6rem
m-x7 = 7rem
m-x8 = 8rem
m-x9 = 9rem
m-xXL = 10rem

Margin left

m-l-x1 = 1rem
m-l-x2 = 2rem
m-l-x3 = 3rem
m-l-x4 = 4rem
m-l-x5 = 5rem
m-l-x6 = 6rem
m-l-x7 = 7rem
m-l-x8 = 8rem
m-l-x9 = 9rem
m-l-xXL = 10rem

Margin right

m-r-x1 = 1rem
m-r-x2 = 2rem
m-r-x3 = 3rem
m-r-x4 = 4rem
m-r-x5 = 5rem
m-r-x6 = 6rem
m-r-x7 = 7rem
m-r-x8 = 8rem
m-r-x9 = 9rem
m-r-xXL = 10rem

Margin top

m-t-x1 = 1rem
m-t-x2 = 2rem
m-t-x3 = 3rem
m-t-x4 = 4rem
m-t-x5 = 5rem
m-t-x6 = 6rem
m-t-x7 = 7rem
m-t-x8 = 8rem
m-t-x9 = 9rem
m-t-xXL = 10rem

Margin bottom

m-b-x1 = 1rem
m-b-x2 = 2rem
m-b-x3 = 3rem
m-b-x4 = 4rem
m-b-x5 = 5rem
m-b-x6 = 6rem
m-b-x7 = 7rem
m-b-x8 = 8rem
m-b-x9 = 9rem
m-b-xXL = 10rem

text-aligns

center
right
left
justify
inherit

Header's

.header

Nav links

.nav-link

Showcase's

.showcase

Blocks

.block

About stuff

#main-block
#sidebar

backgrounds

bg-primary
bg-green
bg-red
bg-blue
bg-yellow

color's

c-primary
c-green
c-red
c-blue
c-yellow

Footer

.footer

Text Stuff

upper = uppercase
lower = lowercase
caps = caps

Fonts

f-arial = arial
f-ht = Helvetica
f-ms = monospace
f-vd = verdana
f-fa = fantasy
f-cs = cursive
f-cn = courier new
f-roboto = roboto
f-su = segoe UI

How To Make Contact stuff

<div class="contact">
        <h1 class="f-ms x2">
            form
        </h1>
        <form action="">
            <input type="text" placeholder="Name..">
            <input type="email" placeholder="Email.." name="blu" id="bli">
            <textarea name="nnnn" placeholder="Message.." id="nnnn" cols="30" rows="10"></textarea>
            <input type="submit" value="Submit">
        </form>
    </div>

Links

a-primary = This class is only allowed on the a tag-->

<a class="a-primary">this is a link</a>

a-green = This class is only allowed on the a tag-->

<a class="a-green">this is a link</a>

a-red = This class is only allowed on the a tag-->

<a class="a-red">this is a link</a>

a-blue = This class is only allowed on the a tag-->

<a class="a-blue">this is a link</a>

a-yellow = This class is only allowed on the a tag-->

<a class="a-yellow">this is a link</a>

Buttons

btn-primary = This class is only allowed on the button tag-->

<button class="btn-primary">this is a button</button>

btn-red = This class is only allowed on the button tag-->

<button class="btn-red">this is a button</button>

btn-green = This class is only allowed on the button tag-->

<button class="btn-green">this is a button</button>

btn-yellow = This class is only allowed on the button tag-->

<button class="btn-yellow">this is a button</button>

btn-blue = This class is only allowed on the button tag-->

<button class="btn-blue">this is a button</button>

Table's

.table
.table-center

<table class="table">

</table>

<table class="table-center">

</table>

.head

<table class="table-center">
<tr>
        <th class="head">Name</th>
        <th class="head">Age</th>
        <th class="head">Country</th>
</tr>
</table>

.data

<table class="table-center">
    <tr>
        <th class="head">Name</th>
        <th class="head">Age</th>
        <th class="head">Country</th>
    </tr>
    <tr>
        <td class="data">Dani</td>
        <td class="data">23</td>
        <td class="data">Albania</td>
    </tr>
    <tr>
        <td class="data">Dani</td>
        <td class="data">23</td>
        <td class="data">Albania</td>
    </tr>
</table>

whe forgot something... checkbox

checkbox's

<label class="checkbox">
    <input type="checkbox">
    <i class="icon-checkbox"></i>
    Default
</label>
<br>
<label class="checkbox">
    <input type="checkbox" checked>
    <i class="icon-checkbox"></i>
    Checked
</label>