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>
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