Статья посвящена вопросу установки Node.js и пакетного менеджера npm под операционную систему Linux Mint 17 “Qiana” Cinnamon (64-bit).

Также рассмотрен вопрос установки пакетного менеджера Bower в этой же операционной системе.

Почему выбрана система Linux Mint - об этом не стоит говорить долго. Это система гораздо удобнее для задач кодинга, нежели Windows. Пакеты Node.js и пакетный менеджер npm необходим для дальнейшего изучения ремесла верстальщика.

Дело в том, что популярный фреймворк Foundation для своей корректной работы требует первоначальной установки Node.js. Автор планирует в дальнейшем познакомиться с фреймворком Foundation, поэтому ему потребовалась установка вышеназванных пакетов.

О том, что такое Node.js, в этой статье также не будет описано. Во-первых, автор статьи имеет лишь поверхностное представление об этом сервере. А во-вторых, в Интернете есть немало хороших материалов по данному вопросу.

Установка Node.js

Для установки пакета Node.js под систему Linux Mint можно воспользоваться официальным сайтом проекта - Node.js. В разделе Download имеется табличка для скачивания различных версий пакета Node.js. В случае системы Linux в этой таблице нужно найти строку Linux Binaries.

Однако я не буду “заморчиваться” установкой из исходного кода. В Linux Mint есть прекрасный менеджер пакетов

1
apt-get
, которым можно и нужно воспользоваться для быстрой и безопасной установки Node.js под Linux. Единственный минус такого подхода - в результате у меня на машине будет стоять не самая свежая версия сервера Node.js. Однако в данном случае это абсолютно не критично.

В терминале ввожу команду:

$ sudo apt-get install nodejs

… пару секунд терпения и у меня под Linux Mint 17 “Qiana” Cinnamon (64-bit) установлен пакет Node.js версии:

$ nodejs -v
v0.10.25

На момент написания статьи самая свежая версия Node.js (как указано на официальном сайте) - это 0.10.28. Как видим, разница в версиях небольшая, так что я поступил правильно, воспользовавшись

1
apt-get
.

Установка npm под Linux Mint

Как хорошо известно, у данного сервера имеется свой собственный менеджер пакетов npm (Node Packaged Modules), для установки дополнительных модулей под Node.js. Другими словами, с помощью менеджера npm можно установить под сервер Node.js любой модуль, имеющийся в наличии на репозитории GitHub. Модуль расширяет возможности сервера Node.js в зависимости от того, какой это модуль (тавтология). С кратким описанием и списком всех модулей под Node.js можно ознакомиться на официальном сайте проекта npm - Node Packaged Modules.

При установке в свою систему Linux Mint через

1
apt-get
у меня был установлен только сам сервер Node.js. При этом менеджер пакетов npm отстуствовал в системе. Не знаю, как это происходит при установке пакета Node.js из исходников, но при использовании
1
apt-get
у меня получилось именно так. Поэтому следующим шагом будет инсталляция менеджера пакетов npm под систему Linux Mint.

В терминале Linux ввожу команду:

$ sudo apt-get install npm

Пробежит много-много строк, но в результате в системе появиться пакет npm:

$ npm -v
1.3.10

Использование менеджера npm очень похоже на использование менеджеров пакетов a-la Linux:

1
apt-get
,
1
emerge
,
1
pacman
и так далее. npm также является консольной командой и у него схожие ключи, поэтому пользователи Linux без труда разберутся с ним:

$ npm -h

Давайте проверим работу установленного менеджера npm. Для этого я в специально отведенной директории Projects создам поддиректорию npm, перейду в нее для дальнейшего удобства работы и установлю в этой поддиректории модуль

1
underscore
из репозитория npm:

$ mkdir -p Projects/npm
$ cd Projects/npm
$ npm install underscore

Если теперь посмотреть содержимое поддиректории npm c помощью команды

1
ls
, то обнаружим появление папки
1
node_modules
, внутри которой располагается подпапка
1
underscore
c содержимым одноименного модуля:

$ ls node_modules/underscore/
LICENSE  package.json  README.md  underscore.js  underscore-min.js

Модуль Underscore успешно установлен и менеджер npm также успешно справился со своей задачей.

Установка менеджера Bower под Linux Mint

Переходим к заключительному (и продолжительному) вопросу данной статьи и рассмотрим установку менеджера пакетов Bower. Могу предвидеть у читателей логичный вопрос: “Как - еще один менеджер пакетов?! Но зачем? Разве не хватает npm, c которым мы только что познакомились?”

Все правильно! npm - это менеджер пакетов. И Bower - тоже менеджер пакетов. Отличие первого от второго заключается в том, что npm - это менеджер пакетов для сервера Node.js (и только). А Bower (хотя сам является модулем под Node.js) - это менеджер пакетов для всего проекта в целом.

Npm понимает и может работать только с JavaScript-приложениями (модулями под Node.js, написанными на этом языке). Bower умеет работать с пакетами на JavaScript, HTML, CSS. C помощью него можно одним движением добавить в разрабатываемый проект все, что нужно: библиотеку jQuery, фреймворк Foundation, модуль Underscore, сброс стилей Normalize.css и так далее.

Не нужно самому “вручную” выискивать на безбрежных просторах Интернет пакет и подключать его в проект - Bower это сделает сам. Заманчиво, не правда ли? На официальной странице проекта Bower можно почитать подробную информацию о данном менеджере (правда, на английском языке). В разделе Search Packages можно поискать нужный пакет для установки.

Я же приступлю к установке Bower на свою локальную машину. Так как Bower является модулем для Node.js, то его можно установить с помощью менеджера npm:

$ sudo npm install -g bower

Однако, если запустить после этого в терминале команду просмотра версии, то увидим такой результат:

$ bower -v
/usr/bin/env: node: No such file or directory

Исправить ситуацию можно созданием ссылки:

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Теперь если снова посмотреть версию установленного пакета, увидим следующее:

$ bower -v
1.3.3

Создаю специальную поддиректорию

1
bower
в директории Projects, перехожу туда и запускаю менеджер bower на установку пакета jquery:

$ mkdir -p Projects/bower
$ cd Projects/bower
$ bower install jquery

Если до этого момента на локальной машине (как у меня) не был установлен пакет

1
git
, то самое время это сделать, иначе bower не сможет установить указанный пакет jquery:

$ bower install jquery
bower jquery#*  ENOGIT git is not installed or not in the PATH

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

Установка Git на Linux производится простой командой:

$ sudo apt-get install git

После этого, повторив команду установки jquery через bower, получаю следующий отзыв в консоли:

$ bower install jquery
  bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
  bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
  bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
  bower jquery#*                 extract archive.tar.gz
  bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.1
  bower jquery#~2.1.1            install jquery#2.1.1

Если посмотреть на содержимое поддиректории

1
bower
, то увидим, что там появилась директория
1
bower_components
, в которой находится поддиректория
1
jquery
c установленным пакетом:

$ ls bower_components/jquery/
bower.json  dist  MIT-LICENSE.txt  src

В результате была установлена последняя версия библиотеки jQuery - 2.1.1. Если нужна какая-то конкретная версия пакета (jQuery, в частности), то нужно это указать с помощью тега:

$ bower install jquery#1.9.1

Внимательный читатель мог заметить, менеджер пакетов Bower также (как и npm) является консольным. Список доступных для него команд можно получить вызовом:

$ bower -h

В частности, для обновления уже установленного пакета существует команда:

$ bower update [name_package]

Для удаления установленного пакета имеется команда:

$ bower uninstall [name_package]

Посмотреть информацию о пакете:

$ bower info [name_package]

Этой командой можно воспользоваться при настройке файла пакетной установки

1
bower.json

Плагин Bower под Sublime Text

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

Установка плагина Bower выполняется стандартно - через менеджер пакетов Sublime Text: нажимаем сочетание клавиш Shift+Ctrl+P, введем в строке Install и выбираем из появившегося списка пакет Bower.

Теперь попробуем установить какой-либо пакет, не выходя из Sublime Text, c помощью плагина Bower. Для этого снова нажмем сочетание клавиш Shift+Ctrl+P, вводим Bower:Install и из появившегося списка выбираем пакет Foundation (к примеру).

Видим, как в панели проектов Sublime Text, в папке

1
bower_components
появилась целая куча подпапок, являющихся частью единого целого - фреймворка Foundation:

Установленный через Bower пакет Foundation в Sublime Text

Настройка плагина Bower

Поддиректория

1
bower_components
, в которую плагин Bower производит установку пакетов, не является чем-то постоянным. То есть, можно легко изменить имя и расположение этой директории. Делается это следующим образом - в Sublime Text нажимаем сочетание клавиш Shift+Ctrl+P и вводим Bower: Configure project (никто не запрещает создать файл конфигурации вручную).

В текущую директорию автоматически добавиться файл

1
.bowerrc
типа json, в котором будет всего лишь одна строка - имя директории, в которую производится установка пакетов через плагин Bower:

Файл настроек пакета Bower

Для эксперимента изменим имя папки с:

"directory": "components"

на:

"directory": "apps"

… удалим старую директорию

1
bower_components
с пакетом foundation и установим через Bower другой пакет - underscore. В результате получим следущее:

Новое имя директории с пакетами в Bower

Пакетная установка в менеджере Bower

У менеджера пакетов Bower есть еще одна замечательная особенность. Это возможность пакетной установки через специально созданный конфигурационный файл. Другими словами, создается специальный файл формата json (

1
component.json
), в котором прописываются имена всех пакетов, которые необходимы для установки в данном проекте. Затем в консоли запускается менеджер Bower c одной командой:

$ bower install

… менеджер bower прочитает файл

1
component.json
и автоматически установит все пакеты, перечисленные в нем. Отлично, не правда ли?

Примечание: начиная с Bower v.0.9 файл конфигурации

1
component.json
был переименован в файл
1
bower.json
, который я буду использовать в дальнейшем.

Файл

1
bower.json
имеет следующий формат:

{
"name": "name_of_project",
"version": "1.0.0",
  "dependencies": {
    "name_package": "version_package",
    "name_package": "version_package"
  }
}

… где

1
name
- это имя проекта,
1
version
- версия проекта,
1
dependencies
- зависимости проекта. Под зависимостями проекта подразумевается список сторонних пакетов (к примеру - foundation, backborne, jquery и так далее), которые используются при создании данного проекта.

Прописав в этом списке нужные пакеты, тем самым мы заставим Bower автоматически отслеживать наличие указанных пакетов для текущего проекта. Но, от слов к делу - давайте попрактикуемся и создадим примерный файл

1
bower.json
для текущего “проекта” bower. Для этого я удалю все ранее установленные в этой поддиректории пакеты:

$ bower uninstall [name_of_package]

… создам в этой директории пустой файл

1
bower.json
и наполню его следующим содержимым:

{
"name": "bower",
"version": "0.0.1",
  "dependencies": {
     "jquery": "1.9.1",
     "foundation": "latest"
   }
}

… где

1
latest
- самая последняя версия пакета. Сохраняю изменения, перехожу в консоль и запускаю команду:

$ bower install

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

...
Unable to find a suitable version for jquery, please choose one:
    1) jquery#1.9.1 which resolved to 1.9.1 and is required by bower
    2) jquery#>= 2.1.0 which resolved to 2.1.1 and is required by foundation#5.2.3
    3) jquery#>=1.2 which resolved to 2.1.1 and is required by jquery.cookie#1.4.1

Prefix the choice with ! to persist it to bower.json

[?] Answer:
...

… то есть, Bower отследил, что я устанавливаю библиотеку jQuery версии 1.9.1; но при этом самая последняя версия фреймворка Foundation 5.2.3 требует для своей работы jQuery версии 2.1.1. Вот менеджер и спрашивает у меня - как быть дальше? Ай да Bower!

Добавление зависимостей в файл bower.json

После создания пакетного файла

1
bower.json
в менеждере Bower можно автоматически добавлять в него запись при ручной установке отдельного пакета. Допустим, в ходе работы срочно потребовалась установка пакета backbone.

Тогда выполняем следующую команду:

$ bower install backbone --save

… пакет

1
backbone
(и его зависимость
1
underscore
) успешно установились. Но нас интересует факт добавления записи в файл
1
bower.json
, поэтому смотрим:

$ cat bower.json
{
"name": "bower",
"version": "0.0.1",
  "dependencies": {
    "jquery": "1.9.1",
    "foundation": "latest",
    "backbone": "~1.1.2"
  }
}

Автоматическое создание файла bower.json

Помимо ручного создания и настройки файла

1
bower.json
, у данного менеджера предусмотрена команда для автоматического создания и настройки этого файла. Для этого необходимо в консоли запустить команду:

$ bower init

… тогда менеджер проведет нас “за ручку” через все этапы создания настроек файла

1
bower.json
путем задания серии вопросов. Взгляните на примерный результат вышеназванной команды:

$ cat bower.json
{
  "name": "bower",
  "version": "0.0.1",
  "dependencies": {
    "jquery": "1.9.1",
    "foundation": "latest",
    "backbone": "~1.1.2"
  },
  "description": "my firts project",
  "moduleType": [
    "amd"
  ],
  "authors": [
    "zencoder"
  ],
  "license": "MIT",
  "homepage": "http://localhost:7788/third/",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "apps",
    "test",
    "tests"
  ]
}

Плагин AutoFileName в Sublime Text

Редактор Sublime Text имеет неизмеримое количество полезных плагинов. Одним из них является AutoFileName - незаменимая вещь для автодополнения путей файлов в проекте. Кто имел мало-мальский опыт работы в Dreamveawer (или подобные ему IDE), могут сразу догадаться, о чем идет речь.

Поэтому данный плагин “must have” в коллекции под рабочую версию Sublime Text любого верстальщика.

Заключение

Завершаю обзор установки пакетов Node.js, npm и Bower под систему Linux Mint. Надеюсь, статья оказалась достаточно полной, точной и грамотной. В ее написании неоценимую помощь оказало видео “ Bower - Обзор пакетного менеджера “ Sorax’а.

На этом все.


Еще один фреймворк из бесчисленного на сегодняшний день полка фреймворков - Bootstrap 3. Точнее было бы сказать, что не еще один - а флагман CSS-фреймворков! Версия 2 вышла давно и на сегодня является устаревшей. Сегодня самая современная версия - это версия 3. Поэтому ее мы и будем рассматривать. Вопрос данной статьи будет посвящен основе данной фреймворка - CSS-сетке и особенностям ее создания в версии 3.

Установка и настройка Bootstrap 3

Ничего сложного и необычного в установке фреймворка Bootstrap 3 нет. Для этого скачиваем дистрибутив с официального сайта Bootstrap 3, распаковываем архив в готовый проект-директорию.

Затем с официального сайта берем готовый шаблон HTML-документа - Basic template и создаем свой собственный индексный файл HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

В этом файле проверяем правильность путей для CSS и JS-файлов:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
...

Все готово для дальнейшей работы.

Система сеток Bootstrap 3

Важнейшей составляюшей любого CSS-фреймворка является система CSS-сетки (grid). Как и в предыдущей версии Bootstrap 2, в версии 3 используется 12-ти колоночная система.

Однако, в Bootstrap 3 применяются четыре типа классов для создания адаптивной (responsive) сетки. На официальном сайте Bootstrap 3 имеется таблица с побробным и наглядным описанием этих классов - Grid Options.

Таблица классов для CSS-сетки Bootstrap 3

В этой таблице представлены четыре ширины экрана устройства, на котором будет отображена страница. Колонка “Extra small devices” с шириной менее 768px обозначает мобильные устройства. Колонка “Small devices” с шириной равной или больше 768px представляет планшетные компьютеры (планшеты). Две остальные колонки представляют обычный настольный монитор через колонку “Medium devices” с шириной равной или больше 992px и широкоформатный монитор через колонку “Large devices” с шириной равной или больше 1200px.

Вышеназванные величины 768px, 992px и 1200px являются контрольными точками (breakpoints), служащими для обработки медиа-запросов в адаптивном дизайне страницы.

В данной таблице строка “Class prefix” является чуть ли не самой важной, так как в ней содержатся имена (префиксы) классов фреймворка Bootstrap 3 для каждого из четырех типов устройств. Для мобильного устройства имя (префикс) класса будет

1
.col-xs-
, для планшетного компьютера префикс будет
1
.col-sm-
, для обычного монитора -
1
.col-md-
и для широкоформатного монитора -
1
.col-lg-
. Для видно из названия префиксов, они являются сокращениями от названия самих устройств, поэтому их легко запомнить.

Вот и все, что необходимо знать о системе CSS-сеток в фреймворке Bootstrap 3. Дальше можно легко домыслить ход построения адаптивной сетки для конкретного сайта.

Пример создания CSS-сетки в Bootstrap 3

Допустим, необходимо создать следующий макет:

  • для широкоформатного монитора в макете должно быть 2 столбца - один шириной 10 колонок и второй шириной 2 колонки;
  • для обычного монитора 2 столбца - один шириной 8 колонок и второй шириной 4 колонки;
  • для планшета 2 столбца - один шириной 6 колонок и второй шириной также 6 колонок;
  • для мобильного устройства макет должен остаться, как и для планшета - два столбца одинаковой ширины.

То есть, при изменении ширины монитора устройства ширина столбцов в макете должна меняться, как показано выше. Для этого создадим простую разметку и добавим в нее классы Bootstrap 3:

<div class="container">
  <div class="row">
    <div class="col-lg-10 col-md-8 col-sm-6"></div>
    <div class="col-lg-2 col-md-4 col-sm-6"></div>
  </div>
</div>

Если открыть созданную страницу в окне браузера и попробовать менять ширину его окна, то в диспечере свойств страницы увидим метаморфозы, связанные с работой медиа-запросов

1
media-queries
. При ширине окна больше 1200px будем наблюдать левый столбец шириной в 10 колонок и правый столбец шириной в 2 колонки.

Уменьшив ширину окна до 992px, получим левый столбец шириной в 8 колонок и правый стлбец шириной в 4 колонки. Еще уменьшив окно до 768px, получим два одинаковых столбца шириной в 6 колонок. Если окно окончательно уменьшится (менее 768px), ширина столбцов останется прежней, но они расположаться вертикально, друг под другом (поведение по умолчанию).

Видимость элементов сетки в Bootstrap 3

Немного усложним задачу и сделаем ее интереснее ради теоретического примера работы фреймворка Bootstrap 3. Допустим, нам необходим такой макет:

  • широкоформатный монитор - 12 колонок;
  • обычный монитор - 3 колонки;
  • планшетный монитор - 3 колонки;
  • мобильный монитор - 2 колонки.

Тогда HTML-разметка и классы фреймворка Bootstrap 3 следующими:

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-4  col-sm-4  col-xs-6"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 col-md-4  col-sm-4  col-xs-6"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 col-md-4  col-sm-4  hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
  </div>
</div>

В данном случае при измении ширины окна браузера будет меняться количество колонок внутри макета. При ширине большей 1200px число колонок будет равняться шести. При уменьшении окна до ширины в 992px число колонок изменится до 4-х и будет оставаться таковым при ширине окна 768px. Если окно еще уменьшится ниже 768px, то количество колонок измениться до двух.

Подобные метаморфозы возможны благодаря классу

1
hidden-x
, который вы могли заметить в разметке. Задача этого класса скрыть указанный элемент при достижении окном браузера определенной контрольной точки. Для каждого из предполагаемых состояний окна браузера необходимо указать класс -
1
hidden-lg
,
1
hidden-md
,
1
hidden-sm
,
1
hidden-xs
:

Сравнительная таблица классов hidden и visible в Bootstrap 3

Противоположностью класса

1
hidden-x
является класс
1
visible-x
. Несмотря на то, что действие этих классов должно быть прямо противоположным друг другу, на практике это различие уловить не так просто и тут может помочь сравнительная таблица с официального файта Bootstrap 3 - Responsive utilities. В этой таблице (см. таблицу выше) хорошо видно различие между этими классами.

В то время как класс

1
hidden-x
производит скрытие элемента в определенной контрольной точке (breakpoint), во всех остальных состояниях элемент видимый. Класс
1
visible-x
делает элемент видимым только в определенном состоянии - во всех остальных состояниях элемент невидимый.

Вложенность (nesting) сетки в Bootstrap 3

CSS-сетка в фреймворке Bootstrap 3 позволяет выполнять вложение одних ячеек в другие. Такое явление называется nesting. К примеру, необходим создать такую HTML-разметку:

<div class="container">
  <div class="row primo">
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row secondo">
    <div class="col-lg-8">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row tetro">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
  </div>
  <div class="row quattro">
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
  </div>
</div>

Для наглядности примера оставим для элементов только один класс

1
.col-lg-
. Блок с классом
1
primo
имеет три обычные колонки
1
col-lg-4
. Блок с классом
1
secondo
имеет две колонки -
1
col-lg-8
и
1
col-lg-4
. Внутри колонки
1
col-lg-8
размещено еще два блока равной ширины - две колонки с классом
1
col-lg-6
. Это пример вложенности (nesting) одних ячеек CSS-сетки Bootstrap 3 в другие ячейки.

Аналогичная ситуация с блоком класса

1
tetro
, но в нем в оба “первичных” блока вложены еще два блока. Всего получается четыре блока. С блоком класса
1
quattro
все просто - там “обычные” (не вложенные) шесть блоков класса
1
col-lg-2
.

При этом нужно обратить внимание (если еще не догадались), что при вложении одних блоков в другие ширина блока-родителя принимается по умолчанию равной 12-колонкам.

Смещение (offsetting) колонок в Bootstrap 3

В Bootstrap 3 можно смещать колонки вправо с помощью класса

1
.col-*-offset-*
, который добавляет
1
margin-left
для указанной колонки. Смещение производится на ширину колонки, кратную указанному количеству.

Приведу пример, чтобы было наглядно понятно:

<div class="container">
  <div class="row">
    <div class="col-lg-8"></div>
    <div class="col-lg-2 col-lg-offset-2 right"></div>
  </div>
</div>

В этом примере колонка с классом

1
right
имеет ширину в два столбца и смещается вправо опять таки на два столбца -
1
col-lg-offset-2
. При этом стоит также заметить, что данное смещение будет выполняться только при ширине экрана больше 1200px (breakpoint), на что указывает имя класса -
1
col-lg-
. Если необходимо, чтобы такое смещение сохранялось при меньших размерах окна браузера, необходимо явно указать это в коде:

<div class="container">
  <div class="row">
    <div class="col-lg-8"></div>
    <div class="col-lg-2 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 right"></div>
  </div>
</div>

Адаптивная (responsive) сетка в Bootstrap 3

Переключать ширину сетки с фиксированной на резиновую в Bootstrap 3 можно точно также, как и во 2-й версии. Для этого нужно заменить для блока-контейнера имя класса с

1
container
на
1
container-fluid
:

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Заключение

На этом обзор CSS-сетки в фреймворке Bootstrap 3 можно считать законченным. Субъективно для меня был интересен именно этот вопрос. Что касается рассмотрения остальных классов, предназначенных для оформления различных элементов на странице, то мне они кажутся не такими интересныи и важными.

Может быть, в дальнейшем я и вернусь к расмотрению деталей фреймворка Bootstrap 3.


В этой статье будет рассмотрен вопрос установки локального сервера XAMPP под операционной системой Linux Mint 17.

Почему этот локальный сервер и, тем более, почему именно Linux? Ответы просты - для меня лично сервер XAMPP является наиболее интуитивно понятным. А Linux - потому что в ней мне более удобно кодить на HTML&CSS, нежели под Windows.

Хотя бы взять удобный и полноценный терминал Linux, который всегда под рукой. Также, локальный сервер под Linux, по моим субъективным оценкам, работает гораздо быстрее, нежели под Windows.

С преимуществами работы кодера под Linux разобрались - осталось установить и настроить локальный сервер под эту операционную систему. В этом вопросе нет ничего сложного и есть даже локализованная версия инструкции на официальном сайте Apache Friends -FAQ Linux. В этой статье я постараюсь дать более подробное описание этого процесса, с картинками.

Локальный сервер под Linux выполнен в виде пошагового графического инсталлятора наподобие того, как это делается под Windows. С одной стороны это несколько непривычно для Linux; но с другой стороны так можно быстро и легко установить пакет для новичков в этой операционной системе.

Пакет инсталляции XAMPP под Linux Mint

Скачиваем пакет инсталлятора по ссылке Download официального сайта “Apache Friends”. При этом определяемся, под 32 или 64-битную систему необходим пакет - такой и выбираем. Помимо этого есть две версии пакета - стабильный 1.8.2/PHP 5.4.27 и более новый 1.8.3/PHP 5.5.11.

Мною был выбран пакет 1.8.2/PHP 5.4.27 (именно из-за его стабильности) версии 64-бита, под операционную систему Linux Mint 17 “Qiana” Cinnamon 64-bit.

После скачивания пакета открываю директорию “Downloads” (туда попадают все скачиваемые под Linux файлы) в терминале. Команда

1
ls
показывает мне содержимое этой директории - и файл
1
xampp-linux-x64-1.8.2-5-installer.run
в частности.

В этом же терминале делаю этот файл исполняемым:

$ sudo chmod 755 xampp-linux-x64-1.8.2-5-installer.run

… затем запускаю файл

1
xampp-linux-x64-1.8.2-5-installer.run
на выполнение командой:

$ sudo ./xampp-linux-x64-1.8.2-5-installer.run

Инсталляция XAMPP под Linux Mint

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

Сервер будет установлен в директорию

1
/opt/lampp
:

Запуск установки XAMPP

Выбор компонентов установки XAMPP

Директория установки XAMPP

В этом шаге необходимо убрать галочку в строке “Learn more about Bitnami for XAMPP”:

Приложение Bitnami под XAMPP

Установка начата

Процесс инсталляции

В этом шаге оставляем галочку в строке “Launch XAMPP”, чтобы локальный сервер автоматически запустился после установки:

Завершение установки XAMPP

Запуск и остановка XAMPP под Linux Mint

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

cd /opt/lampp
sudo ./manager-linux-x64.run

Приложение для управления XAMPP

Переходим в этом приложении на вкладку “Manage Servers” и видим список служб локального сервера. Напротив каждой службы в виде лампочки показан ее статус - запущена она (Running) или остановлена (Stopped).

Управление сервисами в XAMPP

Первоначально запущен только локальный сервер Apache; база данных “MySQL Database” и FTP-сервер “ProFTPD” остановлены. Их можно запустить из данного приложения, просто нажав кнопку “Start”, но я поступлю более Linux-way и воспользуюсь терминалом. Для этого я введу в нем всего одну комадну:

$ sudo /opt/lampp/lampp start

Если все пройдет успешно, то в терминале будет следующий вывод:

Starting XAMPP for Linux 1.8.2-5...
  XAMPP: Starting Apache...ok.
  XAMPP: Starting MySQL...ok.
  XAMPP: Starting ProFTPD...ok.

… что можно проверить и в приложении:

Запуск всех сервисов в XAMPP

Остановить локальный сервер можно также из терминала командой:

$ sudo /opt/lampp/lampp stop
...
Stopping XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.

Установка WordPress под XAMPP в Linux Mint

С установкой локального сервера под Linux Mint разобрались. Стоит еще раз оговориться, что по моим субъективным оценкам он работает гораздо шустрее под Linux, нежели под Windows.

Переходим к заключительной части данной статьи и рассмотрим вопрос установки CMS WordPress под XAMPP в Linux Mint. Все виртуальные сервера располагаются в директории

1
/opt/lampp/htdocs/
.

То есть, если необходимо создать отдельный экземпляр какой-либо CMS (Joomla, WordPress, Drupal и так далее), то нужно просто создать поддиректорию в директории

1
htdocs
и распаковать туда нужную CMS. В моем случае такой CMS будет WordPress-3.9.1.

Создаю поддиректорию

1
travel
командой:

$ sudo mkdir -p /opt/lampp/htdocs/travel

… и распаковываю в нее скачанный архив WordPress с помощью незаменимой консольной программы

1
mc
(не забудьте запустить ее через
1
sudo
, иначе получите ошибку прав доступа):

Распаковка WordPress в XAMPP

После распаковки WordPress приступим к его установке. Создадим вручную конфигурационный файл

1
wp-config.php
чтобы избежать ошибки прав доступа при обычной пошаговой инсталляции WordPress (не забываем, что мы находимся под Linux!). Для этого скопируем файл-шаблон
1
wp-config-sample.php
в ту же директорию под именем
1
wp-config.php
:

$ sudo cp /opt/lampp/htdocs/travel/wp-config-sample.php /opt/lampp/htdocs/travel/wp-config.php

… и отредактируем его через редактор nano:

$ sudo nano -w /opt/lampp/htdocs/travel/wp-config.php

Затем в адресной строке браузера введем (XAMPP у нас все еще запущен, не забываем об этом!):

http://localhost/phpmyadmin

… и в приложении phpMyAdmin создаем базу данных под наш будущий локальный сайт, на котором будет “крутиться” WordPress. Перезапускаем локальный сервер, чтобы он “подхватил” изменения в базе данных MySQL и создание виртульного сервера

1
travel
в директории
1
htdocs
:

$ sudo /opt/lampp/lampp restart
...
Restarting XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

В браузере в адресной строке запускаем установку WordPress:

http://localhost/travel

… далее проходим оставшиеся стандартные шаги инсталляции WordPress и получаем готовый локальный сайт - переходим на него по адресу:

http://localhost/travel

На этом установка CMS WordPress под локальный сервер успешно завершена. А также успешно выполнена рассмотренная выше инсталляция локального сервера под операционной системой Linux Mint 17 “Qiana” Cinnamon 64-bit.

Заключение

Итог выполненных выше шагов - возможность иметь всегда “под рукой” готовый к работе локальный сервер. Еще один плюс к удобству кодинга под Linux. А кодинг под Linux субъективно для меня удобнее кодинга под Windows.

Стоит также сказать, что при установке и настройке могут возникнуть проблемы. В частности, автором данной статьи первоначально производилась установка “чистого” LAMPP, которая потом была удалена. И, хотя деинсталляция была произведена правильно, последующая установка XAMPP привела к тому, что данный сервер не запускался на компьютере.

На этом все.


Приступаем к очередной интересной и обширной теме - как с помощью Sass/Compass облегчить себе жизнь при работе с цветами во время верстки.

Каждый верстальщик хорошо знает, как часто ему приходиться при верстке определять и манипулировать цветами в CSS-коде. Препроцессор Sass и его библиотека Compass обладают богатым набором функций, предназначеных для всевозможных операций с цветом в SCSS-коде.

Эта статья посвящена обзору функций Sass и Compass для работы с цветом. Начнем, как обычно, с самой простой функции и будем плавно продвигаться от простого к сложному.

Первоначальная настройка проекта Compass

Для начала создадим пустойй проект Compass и настроим его. Инициализируем несколько переменных

1
$color
и
1
$color1
, которым определим цвет. Эти переменные понадобятся нам в дальнейшем.

@import "compass/reset";

$color: hsla(120,100%,50%,.5);
$color1: hsla(240,100%,50%,.5);
$unit: 180px;

div{
  height: $unit;
  width: $unit;
  border: 1px solid #000;
  margin: 10px;
  float: left;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  color: darken($color,80%);
  line-height: $unit;
}
.origin{
  background-color: $color;
}

Фунции lighten и darken

Начнем с самых простых функций -

1
lighten
и
1
darken
. Кто маломальски знаком с английским языком, должен сам догадаться о их предназначении. Функция
1
lighten
осветляет исходный цвет, а функция
1
darken
затемняет его.

Синтаксис функций

1
lighten
и
1
darken
одинаков. Первым аргументом задается начальное значение цвета - передадим его функции в виде переменной
1
$color
. Вторым аргументом является значение в процентах, на которое нужно осветлить или затемнить исходный цвет:

.lighten{
  background-color: lighten($color,10%);
}

.darken{
  background-color: darken($color,10%);
}

Функции lighten и darken

Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:

.mixin{
  font-size: .95rem;
  background-color: lighten($color,20%);
  border: 1px solid darken($color,30%);
  color: darken($color,60%);
}

Функции lighten и darken для цвета шрифта и границы

Функции complement и invert

Переходим к функциям обратного преобразования цвета. Первая функция

1
complement
преобразует исходный цвет на прямо противоположный. Допустим, у нас имеется переменная
1
$color
c заданным в ней цветом. Передадим эту переменную функции
1
complement
в качестве аргумента:

.complement{
  background-color: complement($color);
}

В результате на выходе получим цвет, расположенный на 180 градусов по отношению к исходному цвету. Чтобы было понятнее, посмотрим на “HSLA wheel”:

HSLA wheel

Исходным цветом у нас является

1
hsla(120,100%,50%,.5)
. На 180 градусов по отношению к исходному цвету расположен
1
hsla(300,100%,50%,.5)
, иначе называемый Magenta. Вот его и получаем от функции
1
complement
.

Функция

1
invert
практичеси аналогична функции
1
complement
. Она также производит инвертирование цвета от исходного. Но функция
1
invert
отличается от функции
1
complement
тем, что с помощью нее производится инвертирование цветов (красного, зеленого, синего), но прозрачность
1
opacity
остается неизменной.

.invert{
  background-color: invert($color);
}

Функции complement и invert

Функция adjust-hue

Функция

1
adjust-hue
практически аналогична функции
1
complement
- она инвертирует исходный цвет. Но в отличие от последней обладает большей гибкостью. Если функция
1
complement
возвращает цвет, расположенный точно на 180 градусов от исходного (противоположный), то функция
1
adjust-hue
может управлять градусом расположения “выходного цвета.”

Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:

.adjusthue_plus{
  background-color: adjust-hue($color,80deg);
}

.adjusthue_minus{
  background-color: adjust-hue($color,-80deg);
}

Функция adjust-hue

Функции saturate и desaturate

В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.

Функция

1
saturate()
:

.saturate{
  background-color: saturate($color,80%);
}

… увеличивает насыщенность цвета от исходного.

А функция

1
desaturate()
:

.desaturate{
  background-color: desaturate($color,80%);
}

… наоборот, уменьшает насыщенность цвета от исходного.

Функции saturate и desaturate

Функции transparentize и fade-out

Функция

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

Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

.transparentize{
  background-color: transparentize($color,.2);
}

Функция

1
fade-out
аналогична функции
1
transparentize
:

.fadeout{
  background-color: fade-out($color,.2);
}

Функции transparentize и fade-out

Функции opacify и fade-in

Функции

1
opacify
и
1
fade-in
являются прямой противоположностью функций
1
transparentize
и
1
fade-out
. В помощью этих функций цвет делается менее прозрачным:

.opacify{
  background-color: opacify($color,.3);
}

.fadein{
  background-color: fade-in($color,.3);
}

Функции opacify и fade-in

Функция grayscale

Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:

.grayscale{
  background-color: grayscale($color);
}

Функция grayscale

Функция rgba

Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция

1
rgba
. При этом к выходному цвету добавляется альфа-канал для задания прозрачности цвета:

.rgba{
  background-color: rgba($color,.2);
}

Функция rgba

С практической точки зрения функция rgba равносильна функции transparentize/fade-out или opacify/fade-in.

Функция mix

В препроцессоре Sass имеется функция смешивания цветов для получения на выходе одного, результирующего цвета. Другими словами, у нас имеются два цвета, представленные переменными

1
$color
и
1
$color1
. C помощью функции
1
mix
можно смешать эти два цвета в определенной пропорции, чтобы получить на выходе один результирующий цвет.

.mix{
  background-color: mix($color,$color1,70%);
}

В показанном выше примере у функции

1
mix
имеются два аргумента в виде переменных (два цвета). Последний третий аргумент в виде процентов задает пропорцию, в которой один цвет будет смешан с другим. В нашем случае цвет
1
$color
смешан с цветом
1
$color1
в пропорции - 70% от первого цвета
1
$color
добавляется ко второму цвету
1
$color1
.

Функция mix

Функция adjust-color

Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является

1
adjust-color
, c помощью которой можно управлять любым значением цвета - красным, зеленым, синим (для цветовой модели RGB) или же цветом, насыщеностью и светлотой (для цветовой модели HSL). Функции
1
adjust-color
также доступно управление альфа-каналом (прозрачностью) цвета.

Функция

1
adjust-color
достаточно сложная, но с помощью нее можно управлять практически всем, что относится к цвету в SCSS-коде. Давайте последовательно разберемся во всех ее возможностях.

Каждому цвету в этой функции соответствует одноименный аргумент:

  • 1
    
    $red
    ,
    1
    
    $green
    ,
    1
    
    $blue
    - значения красного, зеленого и синего цветов в диапазоне от 0 до 255;
  • 1
    
    $hue
    - значение от 0 до 359 градусов, обозначающих цвет на HSL-диаграме; значение может быть как положительным, так и отрицательным;
  • 1
    
    $saturation
    ,
    1
    
    $lightness
    - значения насыщенности и светлоты для цветовой модели HSL; находятся в диапазоне от 0 до 100%; могут быть отрицательными или положительными;
  • 1
    
    $alpha
    - значение альфа-канала в диапазоне от 0 до 1.

Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.

  1. Изменение цвета от исходного
    1
    
    $color
    для цветовой модели HSLA. Первым аргументом передается цвет в виде переменной
    1
    
    $color
    ; вторым аргументом задается изменение цвета через переменную
    1
    
    $hue
    :
.adjustColorHue{
  background-color: adjust-color($color,$hue:40);
}

Функция adjust-color с аргументом $hue

  1. Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
.adjustColorHueLightness{
  background-color: adjust-color($color,$hue:40,$lightness:30);
}

Функция adjust-color с аргументом $hue и $lightness

  1. Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции
    1
    
    adjust-color
    передаются три аргумента: исходный цвет
    1
    
    $color
    , канал красного цвета
    1
    
    $red
    , канал зеленого цвета
    1
    
    $green
    :
.adjustColorRedGreen{
  background-color: adjust-color($color,$red:40,$green:30);
}

Функция adjust-color с аргументом $red и $green

  1. Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
.adjustColorError{
  background-color: adjust-color($color,$red:40,$hue:20);
}

В результате компиляции данного кода в CSS получим такую ошибку:

Syntax error: Cannot specify HSL and RGB values for a color at the same time for `adjust-color'
on line 38 of .../sass/style.scss

… которая говорит о том, что в функции

1
adjust-color
недопустимо смешивание аргументов разных цветовых моделей - RGB и HSL.

Поэтому нужно быть внимательным при работе с функцией adjust-color и не допускать одновременной передачи функции аргументов разных цветовых моделей RGB и HSL.

Функция scale-color

Рассмотренная выше функция

1
adjust-color
производила изменение цвета на основе занчений передаваемых ей аргументов. Функция
1
scale-color
работает несколько иначе - она изменяет цвет на основе исходного цвета. Чтобы было сразу понятно, о чем идет речь, давайте рассмотрим несколько примеров:

.origin{
  background-color: $color;
}

.adjustcolor{
  background-color: adjust-color($color,$lightness:-20%);
}

.scalecolor{
  background-color: scale-color($color,$lightness:-20%);
}

Разница между функциями adjust-color и scale-color

В данном примере функция

1
adjust-color
берет за основу цвет в переменной
1
$color
и делает его светлее на фиксированные
1
20%
. Функция
1
scale-color
, c другой стороны, поступает несколько иначе. Ею строиться шкала светлоты от 1 до 100%, в которой 1 соответствует светлоте цвета, заданной в переменной
1
$color
. Значение
1
100%
соответствует полной прозрачности. И на основе этой шкалы функция
1
scale-color
вычисляет светлоту в
1
20%
.

Неудивительно, что в показанном выше примере результат функции

1
scale-color
оказался светлее, чем результат функции
1
adjust-color
.

Функции shade и tint

Фреймворк Сompass также, как и препроцессор Sass, имеет в своем составе некоторое количество функций для работы с цветом. Наиболее интересными среди них могу показаться две функции -

1
shade
и
1
tint
.

Функция

1
shade
выполняет смешивание заданного цвета с черным цветом в указанной пропорции. Пропорция указывется в процентах от черного цвета:

.shade{
  background-color: shade($color,40%);
}

Результат работы функции shade

Функция

1
tint
, напротив, выполняет смешивание исходного цвета с белым цветом в заданном соотношении. Код ниже создаст цвет на основе смешения цвета в переменной
1
$color
и
1
30%
белого цвета:

.tint{
  background-color: tint($color,30%);
}

Результат работы функции tint

Заключение

На этом обзор “цветовых” функций препроцессора Sass и библиотеки Compass можно считать завершенным. В качестве вывода можно сказать, что благодаря подобным функциям упрощается и убыстряется работа при верстке дизайна сайта.

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

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

Данная статья является вольным переводом главы “Manipulate Color with Ease” замечательной книги “Sass and Compass for Designers” автора Ben Frain.


При верстке макета довольно часто возникает задача создания кликабельного логотипа страницы.

Но логотип страницы, как правило, создается с использованием на все 100% фантазии дизайнера - тут и необычный декоративный шрифт, и всякие добавленные в него изображения. Поэтому на практике обычно такой логотип вырезается из psd-макета целиком, в виде картинки.

В HTML-разметке в заголовке страницы помещается текст-логотип сайта в теге первого уровня

1
h1
- все по правилам SEO. А в таблицах стилей производится подмена текста на вырезанное из макета изображение.

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

Первоначально произведем подключение неоходимого модуля в библиотеке Compass, добавив строку импортирования в проект:

@import "compass/typography/text/replacement";

… а затем приступим к изучению миксинов.

Миксин hide-text

Первым миксином, который решает задачу замены текста изображением, является

1
hide-text
.

Синтаксис этого миксина таков:

@include hide-text([$direction])

… где необязательный аргумент

1
$direction
определяет направление скрытия текста.

Пример использования данного миксина:

<h1 class="hidetext">
  mixin hide-text
</h1>
.hidetext{
  margin: 10px auto;
  width: 640px;
  height: 426px;
  background: url(../img/cat.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим к вышеприведенному коду миксин

1
hide-text
и посмотрим на результат:

.hidetext{
...
  @include hide-text;
}

Результат замещения текста с помощью миксина hide-text

Результирующий CSS-код будет выглядеть таким образом. Добавляются смещение текста с помощью свойства

1
text-indent
с отрицательным значением; предотвращается случайное “схлопывание” блока через свойство
1
overflow: hidden
, если в нем вдруг окажутся плавающие элементы; задается расположение текста с левого края блока через свойство
1
text-align: left
, чтобы гарантировать его смещение за левый край блока через свойство
1
text-indent
:

.hidetext{
  ...
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}

Миксин squish-text

В библиотеке Compass также имеется миксин

1
squish-text
для замещения текста изображением с помощью эффекта скрытия данного текста. Другими словами, текст остается на своем месте, просто с помощью определенных CSS-свойств он делается визуально невидимым. Это может быть удобно для браузеров-читалок, которые проговаривают текст вслух для слабовидящих людей.

Синтаксис миксина

1
squish-text
таков:

@include squish-text;

Пример использования миксина

1
squish-text
:

<h1 class="squishtext">
  Mixin squish-text
</h1>
...
.squishtext{
  color: white;
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  margin: 10px auto;
  width: 640px;
  height: 480px;
  background: url(../img/girl.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим миксин

1
squish-text
и посмотрим на результат его работы:

.squishtext{
  ...
  @include squish-text;
}

Результат замещения текста с помощью миксина squish-text

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

1
font
сбрасывается на ноль размер шрифта (кегль) и межстрочное расстояние (интерлиньяж) для текста. Цвет текста через CSS-свойство
1
color
устанавливается прозрачным. В добавок гарантированно убирается тень у текста, если она у него есть (вдруг сработает наследование).

.squishtext {
  ...
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}

Несмотря на то, что визуально результат работы миксина

1
squish-text
аналогичен работе миксина
1
hide-text
, принцип последнего более эффективен для большинства современных браузеров в вопросе замещения inline-текста.

В показанном ниже примере можно улучшить разметку, “обернув” отдельные участки текста в любой из inline-элементов (

1
span
,
1
b
или
1
i
) и добавив к нему ноебходимый класс:

<p class="squish">Lorem ipsum dolor sit amet,<span class="squish-text"> consectetur adipisicing elit,</span> sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <span class="squish-text">in reprehenderit in voluptate velit esse</span> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <span class="squish-text">cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
.squish{
  margin: 0 auto;
  @include margin-leader;
  max-width: 960px;
  font-family: 'PT Sans', sans-serif;
  .squish-text{
    color: hsla(240,100%,50%,.6);
    font-style: italic;
  }
}

Текст с отдельными участками, подлежащими скрытию

.squish{
  ...
  .squish-text{
    ...
    @include squish-text;
  }
}

В то время, как экранные программы-читалки и другие подобные инструменты могут свободно прочитать “спрятанный” текст, в окне обычного браузера он ни как не отображен:

Скрытие текста с помощью миксина squish-text

Замещение текста изображением с фиксированными размерами

Если не принимать во внимание технологию спрайтов для фонового изображения, в Compass существует другой миксин, который также позволяет удобно замещать текст изображением. Это полезно, например, когда нужно поместить изображение логотипа в тег заголовка.

Преимущество данного миксина заключается в автоматизированном способе установки размеров для элемента в соответствии с размерами используемого изображения. Для этой цели в библиотеке Compass имеется миксин с говорящим названием

1
replace-text-with-dimensions
:

@include replace-text-with-dimensions();

Проиллюстрируем применение миксина

1
replace-text-with-dimensions
:

<h1 class="replace_dimensions">
  replace-text-with-dimensions
</h1>

Текст с непримененным миксином replace-text-with-dimensions

.replace_dimensions{
  @include replace-text-with-dimensions('alsatian.jpg');
}

Не забудьте активировать строку

1
relative_assets = true
в конфигурационном файле
1
config.rb
, чтобы сработали относительные пути для изображений!

Текст с примененным миксином replace-text-with-dimensions

Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (

1
width
) и высота (
1
height
). Все это благодаря Compass!

.replace_dimensions {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../img/alsatian.jpg?1400248446');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 640px;
  height: 470px;
}

Замена текста изображением в HTML5 Boilerplate

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

Ниже показан пример исходного CSS-кода, взятого из “HTML5 Boilerplate”, в котором показаны в виде классов различные способы замещения текста изображением. В каждом случае кратко описываются преимущества каждого из способов:

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

// Скрыть текст от экранных читалок и браузеров

.hidden {
    display: none !important;
    visibility: hidden;
}

// Скрыть текст только визуально, но оставить доступным для экранных читалок

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Расширение класса .visuallyhidden благодаря возможности для элементов получать фокус с клавиатуры

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

// Скрыть текст визуально и от экранных читалок, но оставить нетронутой HTML-разметку

.invisible {
    visibility: hidden;
}

На этом все. Данная статья является вольным переводом отдельной главы из книги Ben Frain “Sass and Compass for Designers”.