Getting Started

Getting Started

Download Sleek!


HTML Template


Copy the HTML below to get your website started.

 
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Enter your title here :)</title>

      <!-- FAVICON -->
      <link rel="icon" type="image/png" href="img/favicon.ico">

      <!-- CSS -->
      <link href="css/sleek.css" rel="stylesheet">
    </head>

    <body class="site">
      <header class="site-header"></header>

      <!--Primary Page Content -->
      <main class="row site-content">
        <p>Your content goes here :)</p>
        <p><i class="fa fa-thumbs-up fa-5x"></i></p>
      </main>

      <footer class="site-footer"></footer>

      <!--END DOCUMENT -->


      <!-- jQuery necessary for Sleek's JavaScript plugins -->
      <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js"><\/script>');</script>
      <!-- include all plugins below -->
      <script src="js/sleek-plugins.js"></script>
    </body>
  </html>
      

General Stylings


Headings

You can find demos for the heading tags <h1>-<h6> below:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

<p>Put your paragraph text in here

<p class="uppercase">This text is all uppercase

<p class="lowercase">This text is all lowercase

<p class="capitalize">This text is capitalized

Inline styles

<strong>Bolded
<em>Italicized
<a href="#">Link
<q>quote
<cite>Cite
<code>this is sample code
<var>variables
<abbr>abbr

<address>
 

8355 Aero Dr.
San Diego, CA

<blockquote>

This is a blockquote

Buttons

Buttons Usage

4 sizes for <button> tag have been included. Buttons are also stylized to color change for the :hover and :active states.

Buttons Demo




Buttons HTML

  <button class="btnxsmall">X-Small</button>
  <button class="btnsmall">Small</button>
  <button class="btnmedium">Medium</button>
  <button class="btnlarge">Large</button>
     

Lists

Lists Usage

Lists and nested lists are stylized to fit every need.

Lists Demo

  • ul Item 1
    • Nested ul Item 1
    • Nested ul Item 2
  • ul Item 2
  • ul Item 3
  1. ol Item 1
    1. Nested ol Item 1
    2. Nested ol Item 2
  2. ol Item 2
  3. ol Item 3

Lists HTML

  <ul>
    <li>ul Item 1</li>
      <ul>
        <li>Nested ul Item 1</li>
        <li>Nested ul Item 2</li>
      </ul>
    <li>ul Item 2</li>
    <li>ul Item 3</li>
  </ul>

  <ol>
    <li>ol Item 1</li>
      <ol>
        <li>Nested ol Item 1</li>
        <li>Nested ol Item 2</li>
        </ol>
    <li>ol Item 2</li>
    <li>ol Item 3</li>
  </ol>
               

Tables

Tables Usage

Responsive table designed with only CSS. Use <table> tag and the code below to get started.

Tables Demo

Event Name Date Location Time
San Diego Bay Parade of Lights December 13, 2015 Downtown 5:30pm
San Diego County Credit Union Poinsettia Bowl December 23, 2015 Qualcomm Stadium 6:30pm
Holiday Bowl San Diego December 30, 2015 Qualcomm Stadium 5:00pm

Tables HTML

  • For a responsive table, use class="tresponsive" on the <table> tag
  • For striped rows, use class="striped" on the <table> tag
  • For a border around your table, use class="border" on the <table> tag
  <table class="tresponsive">
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
        <th>Title 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Title 1">T1 Row 1</td>
        <td data-label="Title 2">T2 Row 1</td>
        <td data-label="Title 3">T3 Row 1</td>
        <td data-label="Title 4">T4 Row 1</td>
      </tr>
      <tr>
        <td data-label="Title 1">T1 Row 2</td>
        <td data-label="Title 2">T2 Row 2</td>
        <td data-label="Title 3">T3 Row 2</td>
        <td data-label="Title 4">T4 Row 2</td>
      </tr>
      <tr>
        <td data-label="Title 1">T1 Row 3</td>
        <td data-label="Title 2">T2 Row 3</td>
        <td data-label="Title 3">T3 Row 3</td>
        <td data-label="Title 4">T4 Row 3</td>
      </tr>
    </tbody>
  </table>
                   

Forms

Forms Usage

Stylized, beautiful, sleek. Easily integrate HTML forms into your website.

Forms Demo




Check 1
Check 2
Check 3

Radio 1
Radio 2
Radio 3








Forms HTML

  <form>
    <fieldset>
      <label for="name">Single Line Textbox:</label>
        <input type="text" name="name" id="name"><br>
      <label>Checkboxes</label>
        <input type="checkbox">Check 1<br>
        <input type="checkbox">Check 2<br>
        <input type="checkbox">Check 3<br>
      <label>Radio Buttons</label>
        <input type="radio">Radio 1<br>
        <input type="radio">Radio 2<br>
        <input type="radio">Radio 3<br>
    </fieldset>
    <label>Dropdown Menu</label>
      <select>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
      </select><br>
    <label>Dropdown (Multiple Selects)</label>
      <select size="3" multiple>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
      </select><br>
    <label>Textarea</label>
      <textarea></textarea>
    <input type="submit" value="Submit Form">
  </form>
                

Font Awesome


Font Awesome Usage

Font Awesome is integrated into Sleek. Font Awesome provides tons of cool icons that can be easily integrated into your website. Full documentation on usage of Font Awesome (including icon sizing) can be found here.

Font Awesome HTML

To use the icons you will need <i> or <span> tag with class="fa fa-(icon's name)".

Font Awesome Demo

Below are some examples for our pick of commonly used icons. For a full list of icons, please visit the Font Awesome site here.

  <i class="fa fa-check"></i>

  <i class="fa fa-area-chart"></i>

  <i class="fa fa-calendar"></i>

  <i class="fa fa-briefcase"></i>

  <i class="fa fa-comments-o"></i>

  <i class="fa fa-info"></i>

  <i class="fa fa-arrow-down"></i>

  <i class="fa fa-arrow-right"></i>

  <i class="fa fa-arrow-up"></i>

  <i class="fa fa-arrow-left"></i>

Sleek Grid


Grid Usage

Fluid grid system that’s mobile first and fully responsive. Easily scales up from 1 to 12 columns as the viewport size increases.

Uses 4 major breakpoints for:

  • Devices < than 580px
  • Devices > than 580px
  • Devices > than 760px
  • Devices > than 980px

Only 2 classes are needed to get started!

Wrap your columns in an element with class="row" to create a row. Then add class="col-*" to an element with the number of columns you want to take up.

Grid HTML

  <!-- the grid uses fixed 30px (mobile) or 20px (desktop) gutters -->

  <!-- example 4 column layout  -->
  <section class="row">
    <section class="col-3">Col 3</section>
    <section class="col-3">Col 3</section>
    <section class="col-3">Col 3</section>
    <section class="col-3">Col 3</section>
  </section>

  <!-- example 3 column layout  -->
  <section class="row">
    <section class="col-4">Col 4</section>
    <section class="col-4">Col 4</section>
    <section class="col-4">Col 4</section>
  </section>

  <!-- example 2 column layout  -->
  <section class="row">
    <section class="col-8">Col 8</section>
    <section class="col-4">Col4</section>
  </section>
      

Grid Demo

Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 4
Col 4
Col 4
Col 2
Col 2
Col 2
Col 2
Col 2
Col 2
Col 1
Col 11
Col 2
Col 10
Col 3
Col 9
Col 4
Col 8
Col 5
Col 7
Col 6
Col 6
Col 7
Col 5
Col 8
Col 4
Col 9
Col 3
Col 10
Col 2
Col 11
Col 1
Col 12