Столкнулся с небольшой, но достаточно неприятной проблемой.

Занимался изучением настройки сверстанного HTML-шаблона под WordPress. То есть, другими словами - создания темы WordPress из готового HTML-шаблона.

Для этой задачи у меня на Linux Mint 17 Cinnanom 64-bit установлен локальный сервер XAMPP. Если кто не знает, как сервер XAMPP устанавливается под Linux, то могут почитать в этой статье - “Установка XAMPP под Linux Mint 17”. Под локальным сервером у меня “крутятся” виртуальные хосты на основе движка WordPress.

Предпросмотр темы не отображается в WordPress

После создания директории под новую тему -

1
Choose
закинул к нее скриншот готовой темы для preview в менедежере тем WordPress -
1
wp-admin/themes.php
. Но вот неожиданность - картинка-скриншот будущей темы Choose не отобразилась!

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

1
/opt/lampp/etc/httpd.conf
:

#EnableMMAP off
#EnableSendfile off

… не сработало, так как в моем конфигурационном файле

1
httpd.conf
обе строчки были расскоментированы по умолчанию:

EnableMMAP off
EnableSendfile off

Решение оказалось на удивление простым. Я и не подозревал, что настройка прав доступа в Linux может быть такой “коварной” штукой! Сначала обратил внимание на тот факт, что preview тем WordPress, которые идут “в комплекте” с ним - “Twenty Fourteen”, “Twenty Thirteen”, “Twenty Twelve” нормально отображаются на странице. А вот

1
preview
моей темы - не отображается:

Предпросмотр темы не отображается в WordPress

Решил проверить догадку методом “научного тыка” - тупо сравнить два файла-preview

1
screenshot.png
из разных тем, своей “Choose” и стандартной “Twenty Fourteen”:

$ ls -l choose/wp-content/themes/twentyfourteen/screenshot.png
-rw-r--r-- 1 choose/wp-content/themes/twentyfourteen/screenshot.png

$ ls -l choose/wp-content/themes/choose/screenshot.png
-rw------- 1 choose/wp-content/themes/choose/screenshot.png

Вот оно! У файла

1
screenshot.png
из темы “Twenty Fourteen” имеются права на чтение
1
r
для - владельца, группы и всех остальных
1
-rw-r-r-
. У файла
1
screenshot.png
из моей темы “Choose” имеются права на просмотр
1
r
только для владельца данного файла
1
-rw- - -
.

Ну что-же, нужно добавить

1
+
права чтения
1
r
для всех
1
a
пользователей файла
1
screenshot.png
темы “Choose”:

$ sudo chmod a+r /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png

… и проверить результат:

$ ls -l /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png
-rw-r--r-- 1 /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png

Перехожу в WordPress на страницу управления темами

1
wp-admin/themes.php
и смотрю, что получилось:

Рабочее preview создаваемой темы WordPress

Картинка по центру изображения - это preview создаваемой темы “Choose” под WordPress. Как видно, все прошло удачно.

Картинки темы WordPress не отображаются под XAMPP

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

Фоновые изображения, картинки в HTML-файле - ничего не появляется на странице. Firebug не смог мне помочь - единственное, что он “подсказал” - “Файл невозможно загрузить”. Многословно, ничего не скажешь!

Помог незаменимый ресурс для front-end разработчика - Stack Overflow. Решение проблемы заключено в двух строках:

$ cd /opt/lampp/htdocs
$ sudo chmod 777 -R .

То есть, переходим в директорию

1
htdocs
и меняем рекурсивно
1
-R
права на все действия
1
777
для всего содержимого текущей
1
.
директории. Не знаю, как там с вопросами безопасности в этом случае, но факт остается фактом - все стало работать, как и надо было:

Изображения темы WordPress корректно отображаются на странице

В принципе, на этом все.


Статья посвящена вопросу установки 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.