Turtle

Easy to Use CSS Framework

Getting Started

Why Another Framework

TurtleCSS was an experiment for me to learn more about css frameworks and how actually they work. Turtle is loosely based on Milligram CSS Frawework but lot has changed. Turtle is lightweight , fast and easy to use. Feel Free to Use it , Customize It

Typography

Heading h1 4.6rem (46px)

Heading h2 3.6rem (36px)

Heading h3 2.8rem (28px)

Heading h4 2.2rem (22px)

Heading h5 1.8rem (18px)
Heading h6 1.6rem (16px)

The base type is 1.6rem (16px) over 1.6 line height (24px)

Anchor Emphasis Small Strong Underline

Heading

Heading

Heading

Heading

Heading
Heading

Blockquotes

The Blockquote represents a section that is quoted from another source.

World is amazing.

World is amazing.

Buttons

Default Button

Default Button







Lists

  • Unordered list item 1
  • Unordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1

  • Unordered list item 1
  • Unordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1

Forms

Tables

Name Age Height Location
Palash Bauri 16 1.62 Raghunathpur ,West Bengal, India
John Doe 21 1.7 Los Angeles, CA
Name Age Height Location
Palash Bauri 16 1.62 Raghunathpur ,West Bengal, India
John Doe 21 1.7 Los Angeles, CA

Grids

.column
.column
.column
.column
.column
.column-50.column-offset-25

.column
.column
.column
.column
.column
.column column-50 column-offset-25

Codes

.turtle {
  color: #9b4dca;
}

.turtle {
  color: #9b4dca;
}

Utilities




Tips

Tips, techniques, and best practice on using Cascading Style Sheets.

Mobile First

  • Larger than Mobile screen: 40.0rem (640px)
  • Larger than Tablet screen: 80.0rem (1280px)
  • Larger than Desktop screen: 120.0rem (1920px)
/* Mobile First Media Queries */

/* Base style */
{ ... }

/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }

/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }

/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }

Embed Font

Turtle uses the font-family Roboto, created by Christian Robertson, and provided by Google. Customize your projects using Google Fonts. To embed your selected fonts into a webpage, copy this code into the of your HTML document.

/* Embed Font */


/* Use the following CSS rules to specify these families */
body {
  font-family: 'Roboto Slab', serif;
}

Extending The Inheritances

/* Extending The Inheritances */

/* Custom color */
.button-black {
  background-color: black;
  border-color: black;
}
.button-black.button-clear,
.button-black.button-outline {
  background-color: transparent;
  color: black;
}
.button-black.button-clear {
  border-color: transparent;
}

/* Custom size */
.button-small {
  font-size: .8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 1.5rem;
}

.button-large {
  font-size: 1.4rem;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2rem;
}

Browser Support

While not designed for old browsers, Turtle has support for some old versions, but we recommend using the latest versions of their browsers.

  • Brave latest
  • Chrome latest
  • Edge latest
  • Firefox latest
  • IE latest
  • Opera latest
  • Safari latest

Contributing

Want to contribute? Send a Pull Request.