CSS фреймворк skeleton
На прошлом уроке мы рассмотрели необходимость адаптивной верстки (responsive design) и написание медиа запросов (media queries). Написание таких медиа запросов — занятие весьма нудное (хотя и полезное). Разработчики всегда стремились облегчить свой труд. Это касается разработчиков в любой технологии, на любом языке. Web занимает одно из лидирующих позиций в этом моменте. Поэтому почти все программисты используют фреймворки.
Что такое фреймворк (framework)? Фреймворк с английсского — «каркас». В разработке под фреймворком понимается набор готовых решений, которые достаточно правильно подключить и назначить какому-то элементу (в концепции css) и получить вполне приемлемый, а главное быстрый и качественный результат. В этом уроке речь пойдет о фреймворке skeleton css. Думаю, не стоит описывать что из себя представляет данный инструмент. Все о нем можно узнать на сайте фреймворка и в моем видео уроке.
Также в этом уроке я затронул тему абсолютного (пиксели) и относительного (em, %, rem) размера шрифта.
Также в этом уроке я затронул тему абсолютного (пиксели) и относительного (em, %, rem) размера шрифта.
Код урока (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 Комментариев