1.0.0 • Published 8 years ago

html-start v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
8 years ago

htmlStart

Заготовка для вёрстки сайта. Для работы нужно удалить css файл client.content.css и перенести его стили в файл appUI.css. Множество элементов по умолчанию не имеют стилей оформления, только скелет для прочной работы. Стили оформления заносятся самим разработчиком, так, как требует его дизайн.

Для работы некоторых UI элементов используется js плагины фреймворка bootstrap версии 3.3.6. Примечание: используемые плагины изменены, в плане переименования классов в натацию camelCase

├── index.html
└── app
    ├── css
        └── app.css
        └── appUI.css
        └── responsive.css
    └── img
        └── ico
        └── fancybox
    └── js
        └── lib
        └── plugins
            └── bootstrap.min.js
            └── jquery.maskedinput.min.js
            └── jquery.slick.min.js
	    └── jquery.fancybox.min.js
        └── app.js
        └── main.js

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

наверх

<ul class="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ul class="list listFlex">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ul class="list listFlex listCenter">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ul class="list listFlex listBetween">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ul class="list listFlex listBetween">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

наверх

Созданный спрайт должен иметь атрибут id со значением iconsSvg. Далее инлайним его в документ и вставляем нужные иконки так:

<svg class="ico">
	<use xlink:href="#icoTel"></use>
</svg>

Если используются растровые иконки, просто удалите в стилях размеры и заливку.

Для того, что-бы сделать отступы у иконок по бокам, добавлены 2 класса: Если иконка расположена слева

<svg class="ico icoLeft">
	<use xlink:href="#icoTel"></use>
</svg>

Если иконка расположена справа

<svg class="ico icoRight">
	<use xlink:href="#icoTel"></use>
</svg>
<span class="icoMenu"> 
	<span></span> 
	<span></span> 
	<span></span> 
</span>

Что бы иконка трансформировалась в гамбургер, нужно что бы у родительского элемента был класс .open. Это можно увидеть на примере адаптивного меню или поместить иконку в кнопку для dropdown компонента

наверх

наверх

наверх

<a href="app/img/galery/1.jpg" data-fancybox>
	<img class="app/img/galery/1.jpg">
</a>

Для создания галереи из множества изображений используйте атрибут data-fancybox с уникальным значением.

<a href="app/img/galery/1.jpg" class="fancybox" data-fancybox="galery">
	<img class="app/img/galery/1.jpg">
</a>

<a href="app/img/galery/2.jpg" class="fancybox" data-fancybox="galery">
	<img class="app/img/galery/2.jpg">
</a>

<a href="app/img/galery/3.jpg" class="fancybox" data-fancybox="galery">
	<img class="app/img/galery/3.jpg">
</a>

наверх

<section id="mainSlider" class="slick mainSlider">
	<div class="slickSlide">
		<img class="app/img/slider/1.jpg">
	</div>
	<div class="slickSlide">
		<img class="app/img/slider/2.jpg">
	</div>
	<div class="slickSlide">
		<img class="app/img/slider/3.jpg">
	</div>
</section>

наверх

наверх

<div class="tabs">
	<nav class="tabsNav">
		<ul class="list listFlex" role="tablist">
			<li role="presentation" class="active">
				<a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Таб 1</a>
			</li>

			<li role="presentation">
				<a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Таб 2</a>
			</li>
		</ul>
	</nav>

	<div class="tabContent">
		<div role="tabpanel" class="tabPanel fade in active" id="tab1">
			...
		</div>

		<div role="tabpanel" class="tabPanel fade" id="tab2">
			...
		</div>
	</div>
</div>

наверх

<div class="dropdown">
	<button class="but dropdownBut" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Выпадающее меню
	</button>
	
	<div class="dropdownBlock" aria-labelledby="Выпадающее меню">
		Контент
	</div>
</div>

наверх

<div class="dropdown topMenuWrap"> 
	<button type="button" class="but dropdownBut" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
		<span class="icoMenu"> 
			<span></span> 
			<span></span> 
			<span></span> 
		</span> 

		<span class="butText">Меню</span> 
	</button> 

	<nav class="topMenu"> 
		<ul class="list listFlex">
			<li class="active"><a href="#">Главная</a></li>
			<li><a href="#">О компании</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</nav> 
</div>

наверх

<button data-toggle="modal" data-target="#myModal">Модальное окно</button>

<!-- Модальное окно -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="Модальное окно">
	<div class="modalDialog" role="document">
		<div class="modalContent">
			<div class="modalHeader">

				<h4 class="modalTitle">Модальное окно</h4>

				<button class="but butClose modalClose" data-dismiss="modal" aria-label="Закрыть окно">
					<span aria-hidden="true">×</span>
				</button>

			</div>

			<div class="modalBody">
				
			</div>
		</div>
	</div>
</div>

наверх

наверх

<div class="counter">
	<button type="button" class="but counterBut dec">-</button>
	<input type="text" class="field" value="1" data-min="1" data-max="20">
	<button type="button" class="but counterBut inc">+</button>
</div>

наверх

<nav class="breadcrumbs">
	<ul class="list listFlex">
		<li><a href="/">Главная</a></li>
		<li><a href="#">Раздел</a></li>
	</ul>
</nav>

наверх

<nav class="pager">
	<ul class="list listFlex">
		<li><a href="#" class="pagerArrows pagerPrev">Назад</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li class="active"><a href="">4</a></li>
		<li class="pagerDots"><a href="#">...</a></li>
		<li><a href="#">10</a></li>
		<li><a href="#">11</a></li>
		<li><a href="#" class="pagerArrows pagerNext">Вперёд</a></li>
	</ul>
</nav>

наверх

наверх

<form action="#" class="search" method="post">
	<input type="search" class="field" placeholder="Поиск по сайту..." required>
	<input type="submit" class="but" value="Искать">
</form>

наверх

наверх

<div class="mediaBox">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/3FVplCff1co" frameborder="0" allowfullscreen=""></iframe>
</div>

наверх

flexboxcsshtmlcss-frameworkstarter-kitjquery
1.0.0

8 years ago