What is Ministrap?

Minitrap is a project for you who don't need the entire Bootstrap for your project, but need something bigger than Skeleton (we are Skeleton compatible)

        
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Ministrap CSS -->
    <link rel="stylesheet" href="https://alissonsteffens.github.io/ministrap/normalize.css">
    <link rel="stylesheet" href="https://alissonsteffens.github.io/ministrap/ministrap.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

The grid

Yeah, you know many 12 columns layouts, and we have a god one of these. Stop crying about non responsive shit, use our grid system.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One

Typography

Typography matters, so we have some cool thigs for you.

We use Raleway for make it great. Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem
Heading <h6> 15rem

Buttons

Wanna Buttons? Ministrap has 2 os then. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

Anchor button
Anchor button

Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

Lists

  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun

Code

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
  background-color: red;
}

Tables

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward

Utilities

Ministrap has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

Background Color
Bg Faded
Bg Danger
Bg Inverse
Bg Alert
Bg Success
Bg Info
Color
Faded
Danger
Inverse
Alert
Success
Info
Cards

Incard Header

card body
List Groups
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Hrs