Html заготовка – Какие «заготовки» вы используете при вёрстке нового проекта? — Хабр Q&A

alexxlab

Заготовка для верстки (StartProject) / Sandbox / Habr

Хочу поделится заготовкой для верстки, которую создал для себя. Предполагается верстка по БЕМ методологии используя препроцессор less. В заготовку входит: grunt, bower, базовый html с примером БЕМ блока.

Цель использования заготовки (StartProject):

  1. компиляция less в css;
  2. минификация css, js;
  3. создание красивого dev кода html, css, js;
  4. контатенация js, css;
  5. сжатие картинок;
  6. удобное подключение библиотек;
  7. наличие базового reset css;
  8. быстрое и простое внедрение нужных библиотек (в StartProject подключена только jquery).

С клонировать заготовку можно с моего Git аккаунта https://github.com/sun-ks/StartProject.

Заготовку (StartProject) поместите на локальный сервер. Я использовал Denver. Ниже поймете, для чего.

Склонируйте заготовку (StartProject)
git clone https://github.com/sun-ks/StartProject.git


Для работы с grunt и bower вам понадобится node.js.

Установите grun и bower
Для этого перейдите в папку с заготовкой проекта и выполните — npm install
Затем установим установим зависимости bower командой — bower install

Все готово!

Теперь заходим в папку html/index.html. И наблюдаем следующий базовый код:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>StartProject</title>
  <link rel="stylesheet" href="../dist/style.min.css" />
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../dist/main.min.js"></script>
</head>

<body>
  <header>
    header
  </header>
  <nav>
    navigation
  </nav>
  <section>
    <article>
      <!--Пример БЭМ блока -->
      <p>My block title.
        <div>active</div>
        <div>test0</div>
      </p>
    </article>
    <article >
      <header>
        Article header
      </header>
      Article
    </article>
  </section>
  <aside>
    sidebar content
  </aside>
  <footer>
    copyright
  </footer>
</body>

</html>

Стоит обратить внимание на пример БЭМ блока:
<article>
      <!--Пример БЭМ блока -->
      <p>My block title.
        <div>active</div>
        <div>test0</div>
      </p>
    </article>

Я рекомендую писать верстку в соответствии с БЭМ. Его less реализацию можно увидеть в assets/css/main.less
:
.myblock {
  /* пример блока */
  border: 1px solid #000;
  color: orange;
  &_size_s {
    /* пример модификатора блока */
    
    color: green;
  }
  &__title {
    /* пример элемента */
    
    font-size: 20px;
    &_state_active {
      /* пример модификатора елемента */
      
      background: green;
      color: white;
    }
  }
}

.test {
  /* пример блока */
  
  background: red;
  color: #fff;
}

В reset.less лежат базовый reset style и самые базовые блоки, такие как:

clearfix, show, hide…

/*--- CSS Reset ---*/

header,
nav,
section,
article,
aside,
footer {
  display: block
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

Запускаем команду — grunt.
При ее запуске выполняется:
Приведение в порядок табуляции в html, less, css файлах (попробуйте нарушить табуляцию перед запуском grunt). Папки — /assets, /html.
Минификация, контентенация js, css. Из папки /assets в /dist.
Компиляция less в css.

Сжатие картинок происходит командой — grunt imagemin Картинки берутся с папки assets/img после сжатия помещаются в dist/img.

Bower собирает нужные нам библиотеки. В нашем случае это библиотека — jqvery.

Рекомендую ознакомится:
Что такое БЭМ?
Grunt для тех, кто считает штуки вроде него странными и сложными

habr.com

Шаблоны HTML5 | htmlbook.ru

Оригинал: http://html5doctor.com/html-5-boilerplates

Перевод: Влад Мержевич

Не вдаваясь в обсуждение того, почему HTML5 доступен сегодня, а не в 2022 году, эта статья даст вам набор шаблонов HTML5, которые вы можете использовать в своих проектах прямо сейчас.

HTML5 за 5 секунд

Уберпросто получить разметку, которая определяется как HTML5 — достаточно изменить ваш DOCTYPE с имеющегося на этот:

<!DOCTYPE html>

Вот и все! Больше ничего не требуется.

Google уже это сделал. Проверьте его домашнюю страницу, где всё написано в одну строку:

<!doctype html><head><title>HTML5 - Поиск в Google</title><script>...

Самое смешное, что сама страница Гугла и с результатами поиска не проходит валидацию, потому что содержит ряд ошибок, но это нормально. Они всё равно получают преимущества (например, нет атрибута type элемента <script>) за счёт корректного DOCTYPE.

Минимизация HTML5

Если вам нравятся быстрые прототипы или эксперименты, которые не требуют написания длинного кода, то вас может заинтересовать миниатюрный документ на HTML5:

<!DOCTYPE html>
<title>Маленький HTML5</title>
<p>Привет, мир</p>

Возникли некоторые разногласия по поводу валидации этого шаблона при удалении тега <title>. Обозреватель DOM от Хикси говорит что всё в порядке, валидатор W3C тоже, при вводе разметки вручную. Но валидатор Хенри Сивонена сообщает об ошибке без тега <title>. Валидатор W3C также говорит об ошибке, когда вы указываете URL. Надеюсь с этим разберутся в ближайшее время.

Прим. пер. Разобрались. Теперь <title> является обязательным элементом.

HTML5 законченный и совместимый

Последний, наиболее полный шаблон также указывает кодировку текста. Без этого некоторые символы не будут отображаться правильно (я потратил слишком много времени, пытаясь понять почему!).

Мы также включили HTML5 shiv, чтобы можно было добавлять стиль к элементам в IE. Обратите внимание, что вы должны включить этот скрипт в элемент <head>.

Наконец, добавим несколько правил CSS, чтобы новые блочные элементы отображались правильно, так как некоторые браузеры изначально о них не знают.

Вот он — валидный и полный шаблон документа на HTML5.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5</title>
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   article, aside, details, figcaption, figure, footer,header,
   hgroup, menu, nav, section { display: block; }
  </style>
 </head>
 <body>
  <p>Привет, мир</p>
 </body>
</html>

Если вы хотите экспериментировать с HTML5, JS Bin по умолчанию предоставляет шаблон HTML5, с которым можно играть.

htmlbook.ru

Как сэкономить время! Заготовка для сайта «Стартовый набор»

Как-то давно мне подумалось: каждый раз, когда я начинаю верстать новый сайт, я трачу время на схожие процедуры создания базы макета. А зачем каждый раз это делать, если можно сэкономить лишние, скажем, пять минут, используя уже имеющуюся заготовку сайта!

С момента моей первой заготовки прошло достаточно времени, и я уже успел понапихать в неё всегда необходимых правил. Я поделюсь своей заготовкой, но для начала расскажу основу того, что в ней есть и должно быть. Итак.

 

Что необходимо для заготовки для сайта?

Для начала необходим набор следующих элементов:

  1. файл html и привязанный к нему файл css

  2. папка для изображений (пока пустая) и…

  3. однопиксельное прозрачное gif изображение с именем blank.gif.

С первыми тремя понятно, создали их заранее, чтобы потом не создавать. А зачем же нам гифка? В моём случае она может выполнять следующие три функции. Первая, которая объясняет название файла – blank.gif является частью фикса для правильной работы Internet Explorer с PNG. Вторая функция – если вдруг понадобится использовать таблицу html, то для того, чтобы она не “схлопывалась” в эксплорере, необходимо изображение-распорка, которым и будет являться наша гифка (подробнее будет ниже). Третья функция – когда в каком-то контейнере (div) с бэкграундом нужно кликабельное поле, то я использую позиционирование прозрачного гифа, сделанного ссылкой (хотя проще наверное прописать css-условия для той ссылки, но тут дело привычки).

 

Для дальнейшего продолжения разработки заготовки нужно понять, что нужно нам в наборе, от какой основы нам отталкиваться. Прежде всего необходимо прикинуть какие типы сайтов есть и что в них нужно, да и вообще что нужно для работы с ними. То есть решить уже изначально издалека, как будет выглядеть сайт. Для себя я остановился на следующем:

  1. В заготовке должна быть предусмотрена трёхколоночная резиновая вёрстка, которая легко может быть заменена на нерезиновую с равнением по центру браузера.

  2. В заготовке должен быть подвал, который обязательно должен прижиматься к нижнему краю браузера.

Определившись с этими пунктами можно приступать к работе, не забыв также о том, что будут также нужны какие-то базовые оформительские элементы, как, например, оформление текста на странице, оформление гиперссылок и так далее. Также не забываем про мелочи типа убирания пунктирных рамок вокруг ссылок и других элементов.

Для примера предлагаю свой стартовый набор, который можно скачать по ссылке. Рассмотрим, что же туда было покидано.

/htmlfragment>
«http://www.w3.org/TR/html4/loose.dtd»>



Название сайта




   
       
           
               
           
           
               
           
           
               
           
       
   
   


Подвал


Краткое пояснение к коду html. Не обращая внимания на кодировку, название и прописывание пути к файлу css, посмотрим в содержимое тега body. Видим два контейнера с идентификаторами total и footer, они следуют друг за другом. Во втором нет ничего кроме текста, а первый содержит таблицу и ещё один контейнер с идентификатором footer_guarantor. Собственнотри контейнера этих используются для прижатия подвала к нижнему краю браузера, а таблица — представляет собой прототип трёхколоночной резиновой вёрстки.

Вопрос наверняка возник, почему я использую старинный метод таблицы вместо современных контейнеров? По правде лично я предпочитаю контейтерную вёрстку, но в плане трёхколоночной вёрстки предпочитаю таблицу по причине её стабильности. Пока что-то не находил такую вёрстку контейнерами, которая адекватно бы себя вела при уменьшении ширины браузера. Плюс до сих пор у меня возникает вопрос: если надо, например, чтобы у левой и правой колонки был бордюр слева, или бэкграунд, то что надо сделать, чтобы высоты этих колонок были равны, то есть чтобы слева и справа симметрично были блоки с одинаковым бэкграундом, а не один ниже, другой выше. В голову только приходит идея подстройки при помощи жабаскрипта, но адекватным этот метод назвать я не могу. Так что оставляю простоту резиновой трёхколоночной за таблицами.

@charset «windows-1251»;
* {margin: 0px;    padding: 0px;}
html {
    height: 100%;
}
body {
    min-height:100%;
    height: 100%;
}
body,td,th {
    font-family: Tahoma, Verdana, Arial;
    font-size: 12px;
}
IMG {
    border: 0;
    outline: none;
}
a:link, a:visited, a:active {
    text-decoration: none;
    color: #000;
    outline: none;
}
a:hover {
    text-decoration: underline;
    color: #000;
    outline: none;
}
ol, ul{
    list-style-position: inside;
}
.spacer {
    clear:both;
}
h2, h3, h4, h5, h5, h6 { color:#000; padding-bottom: 15px; }
h2 { font-size:29px; }
h3 { font-size:25px; }
h4 { font-size:20px; }
h5 { font-size:18px; }
h5 { font-size:15px; }
h6 { font-size:12px; }

#total {
    min-width: 1000px;
    height: auto !important;
    min-height:100%;
    height: 100%;
}
#footer_guarantor {
    height: 36px;
    clear: both;
}
#footer {
    height: 36px;
    clear: both;
    margin: auto;
    margin-top: -36px;
    min-width: 1000px;
}

А теперь разберём css-код, ведь он всё таки несёт большую актуальность.

  1. Строка 1. Кодировка по умолчанию.

  2. Строка 2. Все отступы по нулям. Сбрасывается по причине того, что в различных браузерах для различных элементов прописаны разные значения отступов. Лучше самому их прописать, чтобы всё везде одинаково было, это раз. А во-вторых, если этого не прописать, то весь сайт не будет прижат к краю браузера и будут отступы со всех сторон. Ну, наверняка вы понимаете о чём речь=).

  3. Строки 3-9, 42-58. Прижатие подвала к нижнему краю браузера.

  4. Строки 10-13. Оформление текста на странице. Прописывать всегда приходится. Сюда же можно дефолтный белый бэкграунд прописать. Тут есть секрет. Если сайт белый, то кажется бэкграунд белым не надо указывать, ведьв сё итак белым отображено. Как бы ни так. Если в виндых будет определённое оформление, то цвет будет не белый, а например с бежевым или сиреневым оттенком, или вообще кислотных цветов, в общем кто на что горазд был.

  5. Строки 14-17. Настройки для изображений. Во-первых, убираем стандартный бордюр к картинкам, это страшная штука, никому не нужна. Во вторых убираем обводку при клике.

  6. Строки 18-27. Настройка для ссылок. Цвет, оформление, обводка. Почему не приписано тупо для тега a без всяких ховеров, активов и пр, ведь смысл один и тот же? Один и тот же, но не для эксплорера 6. Позаботимся о владельцах старых компов.

  7. Строки 28-30. Равнение списка. Параметр в принципе не нужный, порой даже паразитный. Нужен он для тех случаев, когда средний блок контента флоатом прижат к левой панели — если не прописать эти строки, то пункты списков будут за пределы нужного блока вылезать. А паразитным он может быть при использовании скриптов различных меню, построенных на как раз таки списках. Но не всегда.

  8. Строки 31-33. Класс spacer. Что за странный класс? Я использую вёрстку div-ами, контейнерами, и часто применяю свойство float. И вот между летающими этими блоками, иногда нужно сделать своеобразный разрыв, чтобы вёрстка не ползла или не лезла куда не надо. Тогда я в тех местах создаю пустой див с этим классом. Если быть проще, то например есть блок текста на ширину страницы. я под ним хочу прилегающие друг к другу 3 блока текста. Если я между первым и этими тремя блоками не поставлю разрыв, то все три блока будут где-то в тексте, а не под ним. Это если образно говорить.

  9. Строки 34-40. Заголовки. Для каждого сайта их приходится подстраивать, как ни крути. Исходя из размера шрифта на сайте и размера самого большого заголовка, высчитывается размер заголовков, на глазок. Также указывается для них цвет и отступ (чтобы не приходилось при написании контента два раза энтер жать — делать отступ).

 

В завершении

Вот собственно мой набор. Хотелось бы послушать ваши идеи по этому поводу, какие вещи вы используете, чтобы добавили, чтобы предпочли? Буду ждать ваших сообщений. А пока, до скорых встреч!=)

CSS, html

Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

shublog.ru

Разные заготовки для создания дизайна на HTML & CSS

Во время разработки сайта приходится часто использовать уже заготовленые части каркаса для сайта. В этой статье я вам предоставлю разные варианты расположения элементов на странице.

Все варианты, которые будут представлены ниже будут добавлены в архив, который можно по ссылке, которая будет находиться внизу этой статьи.

Сайдбар слева, контейнер справа

В архиве файл будет называться sidebar-left.html.
Посмотреть демо.

Сайдбар справа, контейнер слева

В архиве файл будет называться sidebar-right.html.
Посмотреть демо.

Сайдбар с шапкой

В архиве файл будет называться sidebar-header.html.
Посмотреть демо.

Сайдбар с шапкой и подвалом

В архиве файл будет называться sidebar-header-footer.html.
Посмотреть демо.

 

А дальше вам уже нужно включать фантазию и менять блоки местави и делать как вам захочется. Самое главное в этой модели то, что вам нужно комбинировать блоки. Напирмер у вас есть div с классами sidebar и left, значит он сайдбар будет слева, так же есть прописать div с классами container и right, то сайдбар будет слева, а контейнер справа и так далее.

Архив со всеми примерами выше можно сказать по этой ссылке.

Пишите комментарии если у вас есть какие-либо вопросы.

bologer.ru

Добавить комментарий

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