Earth

🌎 Responsive Modern Web Development Framework, making development easier 🔰 and faster ⏩

Include the following code in your head 💀

Normal CSS

<link href="https://cdn.rawgit.com/midhruvjaink/earth/v-0/css/earth.css" rel="stylesheet" />

Little CSS

<link href="https://cdn.rawgit.com/midhruvjaink/earth/v-0/css/earth.little.css" rel="stylesheet" />

Components

* color

.color-text

* background-color

.color-bg

* border

.style-border

* margin

.margin-*
.margin-top-*
.margin-right-*
.margin-bottom-*
.margin-left-*

*-( 10/20/30..../100 ) The units are in px.

* padding

.padding-*
.padding-top-*
.padding-right-*
.padding-bottom-*
.padding-left-*

*-( 10/20/30..../100 ) The units are in px.

* text align

.center-text
.left-text
.right-text
.justify-text

* text decoration

.none-text
.linethrough-text
.overline-text
.underline-text

* text transform

.uppercase-text
.lowercase-text
.capitalize-text

* font style

.normal-text
.italic-text
.oblique-text

* font-size

.font-size-*

*-( 10/20/30..../100 ) The units are in px.

* font-weight

.bolder-text
.bold-text
.lighter-text

* list style

.circle-list
.square-list
.lower/upper-roman/alpha-list

* grid - 12blocks

Columns live inside Rows

.lg-1 - .lg-12
.md-1 - .md-12
.sm-1 - .sm-12
.xs-1 - .xs-12
.size-offset-1 - .size-offset-12

Size is lg/md/sm/xs

* responsive media

<img class="responsive" />
<video class="responsive"></video>

* box shadow

.shadown-0 - .shadow-5

* hover effect

.hoverable

* embed responsive

.embed-responsive
.embed-responsive-16x9
.embed-responsive-4x3

* image shape

.img-round
.img-circle
.img-thumbnail

Disable Text Select

.noselect