CSS фреймворк skeleton

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

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This