Skeleton CSS framework
In last lesson we considered responsive web design necessity and media queries. Media queries writing is very tedious and intensive action. Developers always seek to do make their work easier. Most of developers use frameworks.
Framework in development is a ready-to-use tools. In CSS framework is a ready-to-use classes. In this lesson we’ll consider skeleton css. You can know more about it reading documentation. Also I told about font size – pixels and em/%/rem.
Code lesson (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="four columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!
</div>
<div class="four columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!
</div>
<div class="four columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!
</div>
</div>
<div class="row">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
</div>
<div class="row">
The base type is 15px over 1.6 line height (24px)
<strong>Bolded</strong>
<em>Italicized</em>
<a>Colored</a>
<u>Underlined</u>
</div>
<div class="row">
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">
</div>
<div class="row">
<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">
</div>
<div class="row">
<form>
<div class="row">
<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 class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<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>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input class="button-primary" type="submit" value="Submit">
</form>
</div>
<div class="row">
<ul>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ol>
</div>
<div class="row">
<!-- Тэг pre служит для повторения полной картины форматирования информации. Т.е если у вас после слова стоят 5 пробелов, то обернув текст в данный тэг, вы сможете в точности написать текст в желаемом формате. -->
<pre><code>.some-class {
background-color: red;
}</code></pre>
</div>
<div>
<!-- Служебные наборы кодов для безопасного написания символов, и неразрывных пробелов -->
< >
Lorem ipsumc dolor sit amet, consectetur adipisicing elit. Velit possimus, quam architecto incidunt? Assumenda veniam, dolorem hic! Similique nihil earum, repudiandae, sunt optio esse quo maxime, perferendis nostrum dolore illum?
</div>
<div class="row">
<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>
</div>
</div>
</body>
</html>
0 Comments