Skeleton Framework Tutorials

Skeleton framework is one of the popular front end framework. It only provides responsive css modules for your websites not js files. It is link of download.


1. Grid

Skeleton gird offers 12-column responsive fluid grid with a max width of 960px. It can change maxium width of page using css code and all coloumns will resize accordingly.

Code

<div class="row">
    <div class="twelve columns" style="border:groove;">twelve</div>
  </div>
  
  <div class="row">
    <div class="six columns" style="border:groove;">six</div>
    <div class="six columns" style="border:groove;">six</div>
  </div>

  <div class="row">
    <div class="one-third columns" style="border:groove;">four</div>
    <div class="two-thirds columns" style="border:groove;">eight</div>
  </div>
  
  <div class="row">
    <div class="one-third columns" style="border:groove;">four</div>
	<div class="one-third columns" style="border:groove;">four</div>
	<div class="one-third columns" style="border:groove;">four</div>
  </div>

 <div class="row">
    <div class="one-fourth columns" style="border:groove;">Three</div>
	<div class="one-fourth columns" style="border:groove;">Three</div>
	<div class="one-fourth columns" style="border:groove;">Three</div>
	<div class="one-fourth columns" style="border:groove;">Three</div>
  </div>

Skeleton Example Grid
2. Button

Button in skeleton comes with two basics such as standard and primary. We can change button styles using button class.

Code

<!-- Standard buttons -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">
<br />
<!-- Primary buttons -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">

Anchor button


Anchor button

3. Form

Generally Forms make your page effectively. Skeleton allows user to create different forms using different elements and styles.

Code

<form>
  <div class="row">
    <div class="six columns">
  	<label for="exampleuser">Username</label>
      <input class="u-full-width" type="text" placeholder="Username" id="exampleuser">
    </div>
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
   </div>
   <div class="row">
	<div class="six columns">
      <label for="examplepwd">Password</label>
      <input class="u-full-width" type="password" placeholder="password" id="examplepwd">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave ???" id="exampleMessage"></textarea>
  <input class="button-primary" type="submit" value="Submit">
</form>


4. Table

Skeleton provides different properties to style tables head and properties.


<table class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
  </tbody>
</table>

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

5. Utility Classes

u-full-width: to make elements with full width.

u-max-full-width: to make elements with running inside containers.

u-pull-right: float either left or right direction.

u-cf: clear float.


6. Creating Skeleton Template

Steps to create this template.

  • Step 1: Creating Navbar
  • Step 2: Creating body
  • Step 3: Creating Sidebar
  • Step 4: Creating footer
Read More...