Intecmedia.Bootstrap
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 59 commits ahead, 4 commits behind dkrnl:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
img
js
.gitignore
Gruntfile.js
README.md
index.html
package.json

README.md

Шаблон DEPRECATED: используйте Intecmedia.Webpack

Intecmedia.Bootstrap HTML Template

Это внутренний стандарт/шаблон для верстки сайтов компании Intecmedia

ВНИМАНИЕ! Данные стандарты это не просто рекомендации, а требования при сдаче работы.

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

Предложения и замечания приветствуются в разделе Issues или Pull requests.

Особености:

  • Основан на Bootstrap 3.3
  • Встроен jQuery v1.11
  • Встроен Font Awesome 4.2.0
  • Встроен Modernizr
  • Модульный AMD-подход(Asynchronous Module Definition) в организации Javascript через RequireJS
  • Основан на LESS
  • Встроена работа с media=print, responsive-css и HTML5-разметки
  • Содержит базовую типографику текста, форм, таблиц, списков, заголовков
  • Совсместимо со всеми современными браузерами (минимальная версия Internet Explorer 9)
  • Responsive images через Picturefill

Примечания:

  • Ваша задача состоит в стилизации bootstrap: путем их акуратного изменения.
  • Не следует разрушать стандартные компоненты bootstrap, они будут использоваться многовариантно.
  • Перед началом работы определите основные переменные в файле css/variables.less
  • Дополнительный javascript должен содержатся в js/application.js и загружаться через RequireJS
  • Обратите на структуру файлов: footer.less, header.less, layout.less, utilities.less.
  • Файл wysiwyg.less предназначен для стилизации тегов которые пришли из WYSIWYG-редактора.

Responsive

Для создания нестандартных сеток используйте grid-framework:

.content {
    @content-gutter: 60px;
    .make-row(@content-gutter);
    > .content-main {
        .make-xs-column(12; @content-gutter);
        .make-sm-column(8; @content-gutter);
        .make-md-column(8; @content-gutter);
        .make-lg-column(6; @content-gutter);
    }
    > .content-secondary {
        .make-xs-column(12; @content-gutter);
        .make-sm-column(4; @content-gutter);
        .make-md-column(4; @content-gutter);
        .make-lg-column(6; @content-gutter);
    }
}

Еще один пример 5-колонник:

.five-row {
    @columns: 5;
    @gutter: 30px;
    .make-row(@gutter);
    .col-lg-1-5 {
        .make-lg-column(1, @columns, @gutter);
    }
    .col-md-1-5 {
        .make-md-column(1, @columns, @gutter);
    }
    .col-sm-1-5 {
        .make-sm-column(1, @columns, @gutter);
    }
    .col-xs-1-5 {
        .make-xs-column(1, @columns, @gutter);
    }
}

Другие mixin-ы могут быть интересны:

.x-make-grid(@class, @columns, @gutter-width, @prefix: "> .col");
.x-make-grid-widths(@class, @columns, @gutter-width, @prefix);
.x-make-grid-pulls(@class, @columns, @gutter-width, @prefix);
.x-make-grid-pushs(@class, @columns, @gutter-width, @prefix);
.x-make-grid-offsets(@class, @columns, @gutter-width, @prefix);

.x-make-xs-column(@columns, @grid-columns, @gutter-width);
.x-make-xs-column-offset(@columns, @grid-columns);
.x-make-xs-column-push(@columns, @grid-columns);
.x-make-xs-column-pull(@columns, @grid-columns);

.x-make-sm-column(@columns, @grid-columns, @gutter-width);
.x-make-sm-column-offset(@columns, @grid-columns);
.x-make-sm-column-push(@columns, @grid-columns);
.x-make-sm-column-pull(@columns, @grid-columns);

.x-make-md-column(@columns, @grid-columns, @gutter-width);
.x-make-md-column-offset(@columns, @grid-columns);
.x-make-md-column-push(@columns, @grid-columns);
.x-make-md-column-pull(@columns, @grid-columns);

.x-make-lg-column(@columns, @grid-columns, @gutter-width);
.x-make-lg-column-offset(@columns, @grid-columns);
.x-make-lg-column-push(@columns, @grid-columns);
.x-make-lg-column-pull(@columns, @grid-columns);

Для создания адаптивной верстки используйте screen-mixin: screen-xs, screen-sm, screen-sm-max, screen-md, screen-md-max и screen-lg.

.foo {
    width: 200px;  
    .screen-xs({
        width: 100px;
    });
}

ВНИМАНИЕ! Данные миксины призваны стандартизовать величины width в media query, однако это требует особого контроля за количество запоросов.

Стилистика кода

CSS/Less

  • Отступы в четыре пробела
  • Каждый селектор находится на отдельной строке
  • Открывающя скобка находится на одной строке с слектором
  • Закрывающая скобка находится на отедельной строке после атрибутов стилей
  • Крупные блоки заключаются в открывающий и закрывающий комментарий
  • Остальные подробности описаны в Principles of writing consistent, idiomatic CSS.

пример

/* block */
.foo,
.bar {
    font-size: 14px;  
    width: 100px;  
    .bar-inner {
        color: #0000FF;
        border: 1px solid #FF0000;
    }
}
/* /block */

HTML

  • Отступы в четыре пробела.
  • Не делайте отсутупы внутри html, body, script, or style. отступы только в head и других элементах.
  • Атрибуты заключены в двойные ковычки.
  • Все блочные теги на отедельной строке.
  • Крупные блоки заключаются в открывающий и закрывающий комментарий.
  • Остальные подробности описаны в jQuery HTML Style Guide.
  • Использовать разметку Schema.org для следующего:

пример

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Intecmedia.Bootstrap</title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/css" href="css/style.less" />
    <script>
    $(function() {
        $("p").text( document.title );
    });
    </script>
    <script src="js/jquery.js"></script>
</head>
<body>
<p>Hello there!<p>
</body>
</html>

Javascript

  • Отсупы в четыре пробела
  • Остальные подробности описаны в jQuery JavaScript Style Guide
  • Модульный AMD-подход(asynchronous module definition) в организации Javascript через RequireJS
require(["jquery", "bootstrap"], function($) {
    "use strict";
    var wnd = $(window), doc = $(document);
    $("[data-toggle=tooltip]").tooltip();
});

Компоненты:

Ссылки: