# Краски здесь

Проект Краски здесь

Demo (opens new window)

Посадочная страница. Сверстана на HTML с применением методологии SMACSS. Стили написаны с помощью препроцессора SASS и фреймворка Susy и библиотеки Compass. Подробные комментарии позволяют легко ориентироваться в коде.


# Стэк технологий

  • HTML/CSS
  • Sass
  • Susy
  • Compass
  • SMACSS

# Фичи

  • Семантическая верстка
  • Слайдер

# Структура проекта

/fonts
/images
/js
/sass
	/base
	/bootstrap
	/layout
	/module
	/theme
	/utilities
	style.scss
/stylesheets
index.html

# SASS

Все стили находятся в отдельных папках и собираются в файле.

/* Layout */
@import "layout/nav";
@import "layout/header";
@import "layout/main";
@import "layout/catalogue";
@import "layout/footer";

/* Modules */
@import "module/btn";
@import "module/dividers";
@import "module/forms";
@import "module/tables";
@import "module/slider";
@import "module/misc";

/* Theme */
@import "theme/theme";

Source: /sass/style.scss

# SMACSS

Использована методология SMACSS (opens new window), что упрощает дальнейшую разработку других страниц.

В рамках этой методологии, все стили разделяются на несколько категорий, каждая из которых получает свой префикс. Например: t- для темы, m- для модуля, l- для макета. Тема отвечает за цвета. Модули - это отдельные самостоятельные элементы страницы, например, слайдер. Макет - это размещение элементов на странице.

Вот, например, как это выглядит в случае с контактной информацией в шапке страницы.

	...
      <!-- MAIN CONTACT INFO -->
      <div class="l-main-contact-wrapper">
        <ul class="l-main-contact-list">
          <li class="icons-watch-icon">
            Пн - Вс 09:00 - 20:00
          </li>
          <li class="icons-phone-icon t-phone">
            <a href="tel:+7-495-781-51-41">+7 (495) 781-51-41</a>
          </li>
          <li class="icons-envelope-icon">
            <a href="mailto:info@kraski-zdes.ru">info@kraski-zdes.ru</a>
          </li>
        </ul>
      </div>
      <!-- l-main-contact-wrapper -->
    ...

Source: index.html

# Семантичная разметка

В разметке использованы семантические теги, такие как: header, main, footer, section, nav.

...

	<!-- HEADER -->
	<header class="l-header t-header">
	    ...
	</header>

	...

	<!-- SECONDARY NAVIGATION BAR -->
	<nav class="l-nav-secondary" role="navigation">
	<ul>
	  <li><a href="#">Акции</a></li>
	  <li><a href="#">Новинки</a></li>
	  <li><a href="#">Хиты</a></li>
	  <li><a href="#">Полезная информация</a></li>
	  <li><a href="#">Подбор цвета</a></li>
	</ul>
	</nav>
	<!-- l-nav-secondary -->

	...

	<main class="l-catalogue" role="main">
		...
	</main>

	...

	<!-- FOOTER -->
	<footer class="l-footer" role="contentinfo">
		...
	</footer>
	
...

Source: index.html

# Слайдер

Слайдер реализован на CSS. Каждому слайду соответствует свой input с типом radio. Сами кнопки переключения сделаны на тегах label. При нажатии на label чекается соответствующий input и показывается, соответствующий ему слайд. При отображении слайда срабатывает CSS-анимация.

# Исходный код на GitHub

Kraski (opens new window)