Quickstart

Alright, alright.. I understand you are eager to test SLIM out.

I will help you set it up as quick as possible.

FIrst you need to download the framework from its GitHub page, or clone it if you are a seasoned professional.

After that, you just include the frameworks CSS file, jQuery and the JS file in your HTML file, and you are ready to start rocking.. Couldn't be easier, right?

The code to include the CSS file is:

<link rel="stylesheet" href="css/style.css"/>

Just put that line between your <head> tags.

Include jQuery and SLIM's js file just before your closing </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main-min.js"></script>

After that you are all set up, and ready to go.

Start Template

This is what you should start out with:

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="css/style.css"/>

      <title>SLIM ROCKS!</title>
    </head>
    <body>
      <h1>Hello, World!</h1>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="js/main-min.js"></script>
  </body>
</html>

That's it. No, really, that is all you need. Couldn't be easier and smaller.

The Grid

The grid is built on a 12 vertical columns system.(Just like any other grid system are too ;-) ).

The grid lives inside a "container" or a "container-full":

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

or

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

The difference is that the "container" is a centered container that has a maximum width of 1200 px, and the "container-full is a 100% width container.

Inside the Container, you have a "row":

<div class="row">
</div>

The breakpoints

The breakpoints for the grid system are:

  • X-Small: 0 - 576px.
  • Small: 577 - 767px.
  • Medium: 768 - 991px.
  • Large: 992 - 1199px.
  • X-Large: 1200px -

To target the different sizes, you use the following classes:

  • X-Small: <div class="col-xs-*"> </div>
  • Small: <div class="col-sm-*"> </div>
  • Medium: <div class="col-md-*"> </div>
  • Large: <div class="col-lg-*"> </div>
  • X-Large: <div class="col-xl-*"> </div>

* is the number of columns wide the area should be.

Example Grid

To split the website in two equal sized columns, you can use:

<div class="container">
  <div class="row">
    <div class="col-xs-6">

    </div>
    <div class="col-xs-6">

    </div>
  </div>
</div>

You can use several classes in the same div, to pinpoint the layout for different resolutions, like:

<div class="col-xs-6 col-sm-4 col-lg-3">

Just remember that one row is 12 columns.

Offseting

You can offset columns, to give them whitespace around them, with the following classes:

  • col-xs-offset-*
  • col-sm-offset-*
  • col-md-offset-*
  • col-lg-offset-*
  • col-xl-offset-*
  • * is the number of columns from the left you want to offset them with.

Fonts

The default font for SLIM if Open Sans, and is included from Google Fonts.

You can easily override the default font.

Responsible Images

TODO!

Alerts

Everyone wants to have cool looking alerts on their websites, right?

The SLIM framework has the following alerts as default:

This is an alert with the default color.

This is an alert with the success color.

This is an alert with the highlight color.

This is an alert with the caution color.

You can also make "closable" alerts:

This is an alert with the caution color, and with a close button.

The code for the alerts are:

<div class="alert">
  <p>This is an alert with the <strong>default</strong> color.</p>
</div>

<div class="alert alert-success">
  <p>This is an alert with the <strong>success</strong> color.</p>
</div>

<div class="alert alert-highlight">
  <p>This is an alert with the <strong>highlight</strong> color.</p>
</div>

<div class="alert alert-caution">
  <p>This is an alert with the <strong>caution</strong> color.</p>
</div>

<div class="alert alert-caution alert-closable">
  <p>This is an alert with the <strong>caution</strong> color, and with a close button.</p>
  <button class="alert-close">
    <span>& times;</span>
  </button>
</div>

Buttons

Of course SLIM has its own set of buttons ready to use.

Size: Tiny. Color: Default

Size: Small, Color: Primary

Size: Default, Color: Success

Size: Large, Color: Highlight

Size: Giant, Color: Caution

Here are the code for the buttons above:

<a href="#" class="btn btn-tiny">Tiny</a>
<a href="#" class="btn btn-tiny btn-rounded">Tiny Rounded</a>
<a href="#" class="btn btn-tiny btn-pill">Tiny Pill</a>

<a href="#" class="btn btn-small btn-primary">Small</a>
<a href="#" class="btn btn-small btn-primary btn-rounded">Small Rounded</a>
<a href="#" class="btn btn-small btn-primary btn-pill">Small Pill</a>

<a href="#" class="btn btn-success">Default</a>
<a href="#" class="btn btn-success btn-rounded">Default Rounded</a>
<a href="#" class="btn btn-success btn-pill">Default Pill</a>

<a href="#" class="btn btn-large btn-highlight">Large</a>
<a href="#" class="btn btn-large btn-highlight btn-rounded">Large Rounded</a>
<a href="#" class="btn btn-large btn-highlight btn-pill">Large Pill</a>

<a href="#" class="btn btn-giant btn-caution">Giant</a>
<a href="#" class="btn btn-giant btn-caution btn-rounded">Giant Rounded</a>
<a href="#" class="btn btn-giant btn-caution btn-pill">Giant Pill</a>

Modals

Modals, of course we have modals too.

The code for the button that opens the modal:

<button id="modalBtn" class="btn btn-primary btn-rounded">Open Modal</button>

And the modal code:

<div id="modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="modalCloseBtn">& times;</span>
      <h4>Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Hello, World!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="modal-footer">
      <h5>Modal Footer</h5>
    </div>
  </div>
</div>