css-framework

css-framework

загрузить css-framework v4.0.2проект на GitHub

HTML/CSS шаблон для создания веб-интерфейсов

Лёгкий

Увеличит размер вашего проекта всего на:

  • 5 KiB сжатая(zip) версия
  • 13 KiB уменьшенная(minify) версия

Совместимый

Безопасная деградацию для старых браузеров не поддерживающих CSS3 в полном объёме.

Не навредит вашему проекту, так как использует префикс «f-» для всех блоков, что исключает конфликт имён.

Стильный

Используя динамический язык стилевой разметки LESS вы можете гибко менять макет сайта, основные цвета, размеры шрифтов, отступы и поля блоков в вашем проекте.

Стандартный

Поддерживает современные стандарты веб-разработки HTML5 и CSS3.

Простой

При создании этого фреймворка было использовано минимальное количество HTML элементов.

Весь фреймворк размещается в одном файле.

Социальный

Проект размещается на площадке GitHub: /agat/css-framework.

Как подключить

<!doctype html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" lang="ru"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" lang="ru"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="ru"><![endif]-->
<!--[if gt IE 8]><!--><html lang="ru"><!--<![endif]-->
	<head>
		...
		<link href="/css/framework.css" rel="stylesheet">
		...
		<!--[if lt IE 9]>
			<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

Макет страницы

Макет(layout) сайта создается с помощью портированного и оптимизированного кода из 960 Grid System. 12 колонок, основной блок шириной 60px, расстояние между колонками и рядами 20px.

Основа

Основой разметки служит родительский блок с классом class="g". В нём следует расположить контейнер с классом class="g-row", который разделяет разметку на ряды.

Контейнеры с классами class="g-x" позволяют создавать различные конфигурации колонок в рядах.

<div class="g">
	<div class="g-row">
		<div class="g-5">
			...
		</div><!-- g-5 -->
		<div class="g-7">
			...
		</div><!-- g-7 -->
	</div><!-- g-row -->
</div><!-- g -->

Демонстрация 12-колоночной разметки

g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-1
g-2 - 140px
g-2
g-2
g-2
g-2
g-2
"g-3" - 220px
"g-3"
"g-3"
"g-3"
"g-4" - 300px
"g-4"
"g-4"
"g-5" - 380px
"g-7"
"g-6" - 460px
"g-6"
"g-7" - 540px
"g-5"
"g-8" - 620px
"g-4"
"g-9" - 700px
"g-3"
"g-10" - 780px
"g-2"
"g-11" - 860px
"g-1"
"g-12" - 940px

Вложенные колонки

Для создания более сложных разметок вы можете вкладывать контейнеры <div class="g-row">...</div> друг в друга:

<div class="g">
	<div class="g-row">				<!-- 1 уровень -->
		<div class="g-6">
			<div class="g-row">			<!-- 2 уровень -->
				<div class="g-1">...</div>
				<div class="g-4">...</div>
				<div class="g-1">...</div>
			</div><!-- g-row -->
			<div class="g-row">			<!-- 2 уровень -->
				<div class="g-2">...</div>
				<div class="g-2">...</div>
				<div class="g-2">...</div>
			</div><!-- g-row -->
		</div><!-- g-6 -->
		<div class="g-6">
			<div class="g-row">			<!-- 2 уровень -->
				<div class="g-6">...</div>
			</div><!-- g-row -->
			<div class="g-row">			<!-- 2 уровень -->
				<div class="g-3">...</div>
				<div class="g-3">...</div>
			</div><!-- g-row -->
		</div><!-- g-6 -->
	</div><!-- g-row -->
</div><!-- g -->

Пример вложенных колонок

"g-1"
"g-4"
"g-1"
"g-2"
"g-2"
"g-2"
"g-6"
"g-3"
"g-3"

Типографика

Заголовки и параграфы

Для заголовков и параграфов, по умолчанию, заданы размеры шрифта и нижние отступы.

Заголовок первого уровня (H1)

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

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

Заголовок второго уровня (H2)

Под воздействием переменного напряжения молекула едва ли квантуема.

Заголовок третьего уровня (H3)

Сверхпроводник бифокально ускоряет барионный экситон по мере распространения сигнала в среде с инверсной населенностью.

Заголовок четвертого уровня (H4)

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

Таблицы

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

<table>
	<caption>...</caption>
	<thead>
		<tr>
			<th>...</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>...</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>...</td>
		</tr>
	</tbody>
</table>
5 самых распространённых браузеров - февраль 2012
№ Название браузера(тег th) %
Подвал таблицы(тег tfoot)
1 Internet Explorer 37,45
2 Chrome 28,40
3 Firefox 24,78
4 Safari 6,62
5 Opera 1,95

Для удобства восприятия ячеек таблицы можно раскрасить нечётные ряды с помощью класса <table class="f-table-zebra">...</table>.

№ Название браузера(тег th) %
1 Internet Explorer 37,45
2 Chrome 28,40
3 Firefox 24,78
4 Safari 6,62
5 Opera 1,95

Обычные, нумерованные списки и списки определений

Обычный список <ul>:

  • первый элемент обычного
  • ненумерованного списка
  • третий пункт
  • последний пункт

Нумерованный список <ol>:

  1. это нумерованный список
  2. второй элемент
  3. третий
  4. и последний

Список определений <dl>:

Первый термин, тег <dt>
Определение термина, тег <dd>
Второй термин
Длинное определение второго термина

Теги оформлления контента

Строчные теги:

Элемент Пример использования
<a href="#">...</a> ссылка
<i> и <em> курсивный и акцентированный текст
<b> и <strong> жирный и акцентированный текст
<mark> выделенный текст
<small> маленький текст
<abbr title="...">...</abbr> спам
<cite> и <q> цитата и выделенная цитата
<code> и <dfn> исходный код и новый термин
<kbd> «горячая» клавиша <Ctrl>+<S>
<var> и <samp> имя переменной variableName и текст из консоли
<ins> и <del> добавленный текст и удалённый текст
<sub> и <sup> текст в нижнем и верхнем индексе

Блочные теги

Тег <blockquote> для длинных цитат:

Цита́та — дословная выдержка из какого-либо текста. При этом важно, что цитируемый текст однозначно идентифицируется как вставленный.

https://ru.wikipedia.org/wiki/Цитата

Пример тега <hr>:

Калининградская обл., г. Черняховск, ул. 22 Января, тег <address>
Пример форматированного текста, тег <pre>...</pre>

Иллюстрации

Картинка и текст

Класс .f-bwi используется для блоков с текстом и картинкой. Картинке задан класс .f-bwi-pic. Текст находится в контейнере с классом .f-bwi-text.

<div class="f-bwi">
	<img class="f-bwi-pic" src="..." alt="..." />
	<div class="f-bwi-text">
		...
	</div><!-- f-bwi-text -->
</div><!-- f-bwi -->

Плазменный пульсар: основные моменты

Гамма-квант полупрозрачен для жесткого излучения. Фронт растягивает экзотермический квазар по мере распространения сигнала в среде с инверсной населенностью.

Чтобы выровнять картинку по правому краю, нужно дополнительно назначить блоку класс .f-bwi-right.

<div class="f-bwi f-bwi-right">
	...
</div><!-- f-bwi -->

Плазменный пульсар: основные моменты

Гамма-квант полупрозрачен для жесткого излучения. Фронт растягивает экзотермический квазар по мере распространения сигнала в среде с инверсной населенностью.

Галерея

Для набора изображений предусмотрен класс .f-gallery для контейнера и .f-gallery-item для элемента галереи, которые комбинируется с классами разметки страницы:

<div class="g-row f-gallery">
	...
	<div class="g-2 f-gallery-item">
		<a href="#"><img src="http://placehold.it/130x80" width="140" height="80" alt="pic" />
 		<small>Название картинки</small></a>
	</div><!-- f-gallery-item -->
	...
</div><!-- f-gallery -->
pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки

Эти элементы комбинируются со знакомыми уже нам классами макета страницы .g-row, .g-1, .g-2, .g-3 и т.д.. Позволяющими задавать любую ширину галереи картинок.

pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки
pic Название картинки

Колонки

Для создания колонок с одинаковой шириной содержимого и фиксированным расстоянием между ними применяется родительский элемент .f-col-x с вложенными .f-column. Где x может быть 1, 2, 3 или 4.

2 колонки

Для создания 2-ух колонок(шириной 50%/50%) требуется родительский элемент .f-col-2 с вложенными 2 элементами .f-column.

<div class="f-col-2">
	<div class="f-column">
		...
	</div><!-- f-column -->
	<div class="f-column">
		...
	</div><!-- f-column -->
</div><!-- f-col-2 -->

Это 2 колонки. Каждая колонка шириной 50%.

Это 2 колонки. Каждая колонка шириной 50%.

3 колонки

Для создания 3-ёх колонок(каждая шириной 33.3%) требуется родительский элемент .f-col-3 с вложенными элементами .f-column вот таким образом.

<div class="f-col-3">
	<div class="f-column">
		<div class="f-column">
			...
		</div><!-- f-column -->
		<div class="f-column">
			...
		</div><!-- f-column -->
	</div><!-- f-column -->
	<div class="f-column">
		...
	</div><!-- f-column -->
</div><!-- f-col-3 -->

Это 3 колонки. Каждая колонка шириной 33%.

Это 3 колонки. Каждая колонка шириной 33%.

Это 3 колонки. Каждая колонка шириной 33%.

4 колонки

Для создания 4-х колонок(каждая шириной 25%) требуется родительский элемент .f-col-4 с вложенными элементами .f-column.

<div class="f-col-4">
	<div class="f-column">
		<div class="f-column">
			...
		</div><!-- f-column -->
		<div class="f-column">
			...
		</div><!-- f-column -->
	</div><!-- f-column -->
	<div class="f-column">
		<div class="f-column">
			...
		</div><!-- f-column -->
		<div class="f-column">
			...
		</div><!-- f-column -->
	</div><!-- f-column -->
</div><!-- f-col-4 -->

Это 4 колонки. Каждая колонка шириной 25%.

Это 4 колонки. Каждая колонка шириной 25%.

Это 4 колонки. Каждая колонка шириной 25%.

Это 4 колонки. Каждая колонка шириной 25%.

Формы

Текстовые поля

Для создания текстового поля достаточно написать:

<input type="text">
<input type="password">

Получиться вот такое симпатичное поле ввода:

Кнопки

Для создания кнопок применяется класс .f-bu:

<button class="f-bu">Button</button>
<span class="f-bu">Span</span>
<a href="#" class="f-bu">Ссылка</a>

Этот класс можно назначать на тэги <button>, <span>, <a>:

Span Ссылка

Цветовое кодирование кнопок с помощью классов: .f-bu-default, .f-bu-success, .f-bu-warning

<button class="f-bu f-bu-default">Основное действие</button>

<button class="f-bu f-bu-success">Хорошая кнопка</button>

<button class="f-bu f-bu-warning">Плохая кнопка</button>

Группировка кнопок в группы с помощью родительского класса .f-buttons:

<p class="f-buttons">
	<span class="f-bu">1</span>
	<span class="f-bu">2</span>
	<span class="f-bu">3</span>
	...
</p><!-- f-buttons -->

12345

Радио-кнопки и флажки

Простейшая конструкция из минимального набора необходимых элементов, таких как <label> и <input>.

Радио-кнопки помечаются классом .f-radio на элементе <label>. Флажки классом .f-check.

<label class="f-radio"><input type="radio"> радио-кнопка</label>
<label class="f-check"><input type="checkbox"> флажок</label>


Раскрывающийся список

Никаких классов, только <select> и <option>.

<select>
	<option>Раскрывающийся список</option>
	<option>Второй элемент</option>
	<option>Третий элемент</option>
</select>

Размеры полей ввода

Чтобы задать ширину, воспользуемся классами .g-x.

Где x может меняться от 1 до 12.

Размеры можно задавать кнопкам, раскрывающимся спискам и текстовым полям:

<button class="f-bu g-1">.g-1</button>
<input type="text" class="g-2" value=".g-2">
<input type="text" class="g-3" value=".g-3">
<select class="g-4"><option>.g-4</option></select>
<textarea class="g-5">.g-5</textarea>

Простая форма

Расположение элементов формы в одну строку.

<label>Метка: <input type="text" class="g-2"></label> <label class="f-check"><input type="checkbox"> переключатель</label> <button class="f-bu">Кнопка</button>

Вертикальная форма
Основной комметарий

Подсказка или дополнительный комментарий...

за
под
в
под


Основной компонент формы, это контейнер с классом .f-row и двумя элементами внутри. Метки и элемента с классом .f-input:

<div class="f-row">
	<label>...</label>
	<div class="f-input">
	...
	</div><!-- f-input -->
</div><!-- f-row -->

В элементе .f-input размещаются поля ввода, радио-кнопки и др..

Комментарии и пояснения создаются классами .f-input-inline и .f-input-help:

<div class="f-input">
	<input type="text">
	<span class="f-input-comment">
		Основной комментарий
	</span>
	<p class="f-input-help">
		Подсказка...
	</p>
</div>

Управляющие кнопки, размещаются в контейнере с классом .f-actions:

<div class="f-actions">
	<button type="submit" class="f-bu">Кнопка</button>
</div><!-- f-actions -->
Горизонтальная форма


Отличается от вертикальной формы наличием дополнительного родительского класса .f-horizontal:

<form class="f-horizontal">
	<div class="f-row">...</div>
</form><!--f-horizontal -->

Состояния полей ввода

Поля ввода блокируются добавлением бинарного атрибута disabled:

<input type="text" disabled >
Валидное
Валидное
Валидный

Валидные поля обозначаются добавлением класса .f-valid к элементу .f-input:

<div class="f-input f-valid">
	...
</div><!--f-input -->
Невалидное
Невалидное
Невалидный

Невалидные поля обозначаются добавлением класса .f-invalid к элементу .f-input:

<div class="f-input f-invalid">
	...
</div><!--f-input -->

Сообщения

Блок с классом .f-message предназначен для вывода сообщений.

Самый простой пример сообщения:

<div class="f-message">
	<span class="close"></span>
	<strong>Внимание</strong>, текст простого сообщения
</div><!--f-message -->
Внимание, текст простого сообщения

Сообщение с заголовком, текстом и кнопками, используется дополнительный элемент .f-message-actions:

<div class="f-message">
	<span class="close"></span>
	<h5>Заголовок сообщения</h5>
	<p>Пример сообщения с заголовком и кнопками</p>
	<p class="f-message-actions">
		<a class="f-bu" href="#">Да</a>
		<a class="f-bu" href="#">Отмена</a>
	</p>
</div><!--f-message -->
Заголовок сообщения

Пример сообщения с заголовком и кнопками

Да Отмена

Помимо простого сообщения, можно использовать класс .f-message-error для сообщений об ошибках:

<div class="f-message f-message-error">
	...
</div><!--f-message -->
Доступ запрещён, сообщения об ошибке

Для удачных сообщений существует класс .f-message-success:

<div class="f-message f-message-success">
	...
</div><!--f-message -->
Поздравляем, всё прошло очень хорошо :)