├── book ├── 01. Emmet │ ├── img │ │ ├── emmet1.gif │ │ ├── emmet2.gif │ │ └── emmet3.gif │ └── README.md ├── 08. Project Builders │ ├── img │ │ ├── gulp.gif │ │ └── gulp1.png │ └── README.md ├── 07. Flexbox property │ ├── img │ │ └── flexbox.png │ └── README.md ├── 04. CSS float property │ ├── img │ │ └── float1.png │ └── README.md ├── 10. Links │ └── README.md ├── 05. CSS position property │ └── README.md ├── 09. HTML and CSS │ └── README.md ├── 03. Responsive CSS Framework │ └── README.md ├── 06. Adaptive design and layout │ └── README.md └── 02. Pre- and Post- processors │ └── README.md └── README.md /book/01. Emmet/img/emmet1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/01. Emmet/img/emmet1.gif -------------------------------------------------------------------------------- /book/01. Emmet/img/emmet2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/01. Emmet/img/emmet2.gif -------------------------------------------------------------------------------- /book/01. Emmet/img/emmet3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/01. Emmet/img/emmet3.gif -------------------------------------------------------------------------------- /book/08. Project Builders/img/gulp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/08. Project Builders/img/gulp.gif -------------------------------------------------------------------------------- /book/08. Project Builders/img/gulp1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/08. Project Builders/img/gulp1.png -------------------------------------------------------------------------------- /book/07. Flexbox property/img/flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/07. Flexbox property/img/flexbox.png -------------------------------------------------------------------------------- /book/04. CSS float property/img/float1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyPolovniy/fron_end_book/HEAD/book/04. CSS float property/img/float1.png -------------------------------------------------------------------------------- /book/10. Links/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Links 3 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 4 | 5 | Несколько сервисов по оптимизации: 6 | - PNG - https://tinypng.com/ 7 | - JPG - http://www.jpegmini.com/main/shrink_photo?test_cookie=1 8 | 9 | Имена для переменных с цветом: 10 | - http://chir.ag/projects/name-that-color/ 11 | 12 | Картинку в base64 13 | - http://www.base64-image.de/ 14 | 15 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Содержание 2 | 3 | **[01. Emmet](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/01.%20Emmet)** 4 | 5 | **[02. Pre- and Post- processors](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/02.%20Pre-%20and%20Post-%20processors)** 6 | 7 | **[03. Responsive CSS Framework](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/03.%20Responsive%20CSS%20Framework)** 8 | 9 | **[04. CSS float property](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/04.%20CSS%20float%20property)** 10 | 11 | **[05. CSS position property](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/05.%20CSS%20position%20property)** 12 | 13 | **[06. Adaptive design and layout](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/06.%20Adaptive%20design%20and%20layout)** 14 | 15 | **[07. Flexbox property](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/07.%20Flexbox%20property)** 16 | 17 | **[08. Project Builders](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/08.%20Project%20Builders)** 18 | 19 | **[09. HTML and CSS](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/09.%20HTML%20and%20CSS)** 20 | 21 | **[10. Links](https://github.com/EvgeniyPolovniy/fron_end_book/tree/master/book/10.%20Links)** 22 | -------------------------------------------------------------------------------- /book/05. CSS position property/README.md: -------------------------------------------------------------------------------- 1 | #CSS position property 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | ```css 5 | position: static | relative | absolute | fixed | inherit; 6 | ``` 7 | 8 | ####position: static 9 | 10 | Это стандартное свойство, которое присваевается элементу если у него не задан другой position 11 | 12 | ####position: relative 13 | 14 | Дает элементу возможность быть позиционированным. Сдвиг элемента происходит с того места, в котором он находился перед позиционированием. Эго физические размеры остаются неизменными и присутствуют в потоке. 15 | 16 | ####position: absolute 17 | 18 | - Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было. 19 | - Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static. Если такого родителя нет — то относительно документа. 20 | 21 | Одна из распространенных ошибок это попытка растянуть position: absolute на всю ширину страници: 22 | 23 | ```css 24 | div { 25 | position: absolute; 26 | left: 0; top: 0; 27 | width: 100%; height: 100%; 28 | } 29 | ``` 30 | 31 | Это работает ровно до того момента, когда появляется скролл на странице. Так как width и height у position: absolute элемента отсчитывается не от размера документа, а от размера окна, т.к он выпал из потока. 32 | 33 | ####position: fixed 34 | 35 | Позиционирует элекмент точно так же, как absolute, но относительно window. 36 | 37 | Если position: fixed элекмент позиционировать сверху страници, то при прокрутке документа, он онстанется на том же месте относительно window. 38 | 39 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /book/04. CSS float property/README.md: -------------------------------------------------------------------------------- 1 | #CSS float property 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | ```css 5 | float: left | right | none | inherit; 6 | ``` 7 | 8 | - При позиционировании элементы вынимаются из потока и сдвигается влево/вправо до того как коснётся либо границы родителя, либо другого элемента с float. 9 | - Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться. 10 | - Все элементы в потоке, кроме других float и inline-элементов, ничего не знают о позиционировании и физических размерах float элемента 11 | - При присваивании элементу float он автоматически получает display:block. Что означает, что все float элементы могут принимать свойства ширины и высоты. Исключением являются элементы display:inline-table, они не становятся display:block. 12 | - Если есть картинка с display:float и текст возле нее, то текст ее обтекает. Все бы хорошо, мы получили, что и хотели, но тут есть пакость, картинку обтекает Текст внутри элемента, а не сам элемент. 13 | 14 | Направление float потока 15 | 16 | ![](img/float1.png) 17 | 18 | ```css 19 | clear: none | left | right | both | inherit; 20 | ``` 21 | 22 | Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся float элементы слева/справа/с обеих сторон. 23 | 24 | Добавляя это свойство мы, конечно же, сможем сдвинуть float элементы, так как мы задумали, но появляется проблема, clear сдвигает элемент в потоке ровно на стролько, сколько нужно для того, что бы следующий элемент находился под предыдущим. При этом сдвиге не учитывается margin сдвигаемого блока. 25 | 26 | 27 | Данная проблема решается добавлением элемента в DOM между испытуемыми: 28 | 29 | ```html 30 |
31 | ``` 32 | 33 | Но, как вы понимаете, наличия пустых и не функциональных элементов в DOM это совсем не хорошо. 34 | 35 | Есть более красивое решение - отдельный класс для элементов, которым нужен clear, который бы добавил в DOM превдоелемент: 36 | 37 | ```css 38 | .clearfix:after { 39 | content: "."; 40 | display: block; 41 | clear: both; 42 | visibility: hidden; 43 | height: 0; 44 | } 45 | ``` 46 | 47 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 48 | -------------------------------------------------------------------------------- /book/09. HTML and CSS/README.md: -------------------------------------------------------------------------------- 1 | # CSS 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | Основные правила чистоты кода 5 | ```css 6 | /* Плохой CSS */ 7 | .selector, .selector-secondary, .selector[type=text] { 8 | padding:15px; 9 | margin:0px 0px 15px; 10 | background-color:rgba(0, 0, 0, 0.5); 11 | box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF 12 | } 13 | 14 | /* Хороший CSS */ 15 | .selector, 16 | .selector-secondary, 17 | .selector[type="text"] { 18 | padding: 15px; 19 | margin: 0 0 15px; 20 | background-color: rgba(0,0,0,.5); 21 | box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; 22 | } 23 | ``` 24 | Используйте class 25 | ```css 26 | /* Плохой CSS */ 27 | ul li { } 28 | #element { } 29 | 30 | /* Хороший CSS */ 31 | .list-item { } 32 | .element { } 33 | ``` 34 | Очень важный код :) 35 | ```css 36 | /* Плохой CSS */ 37 | .dropdown { 38 | padding: 10px !important; 39 | opacity: 0.9 !important; 40 | } 41 | /* Хороший CSS */ 42 | .dropdown_cute { 43 | padding: 10px; 44 | opacity: 0.9; 45 | } 46 | ``` 47 | Стили для тегов это плохо 48 | ```css 49 | /* Плохой CSS */ 50 | body ul li { 51 | line-height: 20px; 52 | } 53 | /* Хороший CSS */ 54 | .item { 55 | line-height: 20px; 56 | } 57 | ``` 58 | 59 | # HTML 60 | **[Table of Contents](#table-of-contents)** 61 | 62 | Именование классов. 63 | Исключение методология БЭМ 64 | ```css 65 | /* Плохо */ 66 | .pageHead {} 67 | .sub_content {} 68 | .tmp_block-footerWrap {} 69 | 70 | /* Хорошо */ 71 | .page-head {} 72 | .sub-content {} 73 | ``` 74 | Для JS пишите отдельные классы и не вешайте на них стили из css 75 | ```css 76 | .js-item 77 | .action-save 78 | ``` 79 | Именование файлов 80 | ```css 81 | /* Плохо */ 82 | ios-icon.png 83 | ios-icon2x.png 84 | mainSprite.png 85 | 86 | /* Хорошо */ 87 | ios_icons.png 88 | ios_icons@2x.png 89 | main_sprite_app.png 90 | ``` 91 | #### Оптимизация картинок 92 | 1. PNG только для картинок с прозрачностью. 93 | 2. png-24 не всегда оплавданно, png-8 значительно легче 94 | 3. При нарезке в PS сохранять только в web формате (ctrl+shift+alt+s) и в 100% качества 95 | 4. Все картинки сохранять с кодировкой progressive 96 | 5. Использовать сервисы оптимизации изображений перед релизом. 97 | 98 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /book/03. Responsive CSS Framework/README.md: -------------------------------------------------------------------------------- 1 | #Responsive CSS Framework 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | [Bootstrap](http://getbootstrap.com) — подходит для быстрого прототепирования веб интерфейсов, чему способствует множество готовых элементов, таких как кнопки, поля, воодов, менюшки и т.п 5 | 6 | [Zurb Foundation](http://foundation.zurb.com) - меньше шаблонных элементов, но больше заточен на кросплатформенные и адаптивные сайты. 7 | 8 | Использование какой-либо адаптивной сетки сильно упрощает жизнь при разработке адаптивных сайтов и приложений. 9 | Адаптивные сетки у обоих фреймворков достаточно хороши, но у Зурба более осмысленно названы классы. 10 | Расширенное сравнение фреймвороков можно посмотреть на [responsive.vermilion.com](http://responsive.vermilion.com/compare.php) 11 | 12 | ###Принципы работы сеток на примере Zurb Foundation 13 | 14 | Zurb Foundation is mobile-first - фраза с их сайта. Это означает, что, с точки зрения кода, разрабатывается сначала мобильная версия, и после этого добавляются стили для более широких устройств. 15 | 16 | Desktop-first - это обратный подход, код пишется сразу под большие расширения, и при уменьшении экрана свойства переопределяются. 17 | 18 | ```html 19 |
20 |
...
21 |
...
22 |
...
23 |
...
24 |
25 | ``` 26 | 27 | CSS сетки принято делать 12-ти колоночными. 28 | 29 | У блока обертки, в данном случае .row, применены стили clearfix. 30 | 31 | У .column - float:left; что позволяет выстроить их в линию. 32 | 33 | А классы .small-12 .medium-6 .large-3 отвечают за ширину блоков на определенном разрешении. 34 | 35 | Определение где граница между small, medium и large находятся в SASS переменных в самом Zurb. При желании их можно переопределить. 36 | 37 | ```css 38 | .small-12 {width: 100%} 39 | .medium-6 {width: 50%} 40 | .large-3 {width: 25%} 41 | ``` 42 | 43 | Число после названия класса говорит о том, сколько колонок из 12 по ширине должен занять этот блок. 44 | Весь css, который нужен для корректной работы и есть фреймворк, вам остается только правильно использовать классы. 45 | 46 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /book/07. Flexbox property/README.md: -------------------------------------------------------------------------------- 1 | #Flexbox property 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | Т.к. flexbox — это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам. 5 | 6 | Если обычный лейаут основывается на направлениях потоков блочных и инлайн-элементов, то flex-лейаут основывается на «направлениях flex-потока» 7 | 8 | ![](img/flexbox.png) 9 | 10 | В основном элементы будут распределяться либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end). 11 | 12 | - main-axis - главная ось, вдоль которой располагаются flex-элементы. Oна необязательно должна быть горизонтальной, всё зависит от свойства justify-content 13 | - main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start до позиции main-end. 14 | - main size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента. 15 | - cross axis - поперечная ось, перпендикулярная к главной. Её направление зависит о тнаправления главной оси. 16 | - cross-start | cross-end - flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end. 17 | - cross size - ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности. 18 | 19 | Подробнее о всех свойствах Flexbox можно посмотреть на [frontender.info](http://frontender.info/a-guide-to-flexbox/) 20 | 21 | Для максимальной кросбраузерности также есть очень полезный SASS mixin: 22 | 23 | ```sass 24 | @mixin flexbox() { 25 | display: -webkit-box; 26 | display: -moz-box; 27 | display: -ms-flexbox; 28 | display: -webkit-flex; 29 | display: flex; 30 | } 31 | 32 | @mixin flex($values) { 33 | -webkit-box-flex: $values; 34 | -moz-box-flex: $values; 35 | -webkit-flex: $values; 36 | -ms-flex: $values; 37 | flex: $values; 38 | } 39 | 40 | @mixin order($val) { 41 | -webkit-box-ordinal-group: $val; 42 | -moz-box-ordinal-group: $val; 43 | -ms-flex-order: $val; 44 | -webkit-order: $val; 45 | order: $val; 46 | } 47 | 48 | .wrapper { 49 | @include flexbox(); 50 | } 51 | 52 | .item { 53 | @include flex(1 200px); 54 | @include order(2); 55 | } 56 | ``` 57 | 58 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 59 | -------------------------------------------------------------------------------- /book/06. Adaptive design and layout/README.md: -------------------------------------------------------------------------------- 1 | #Adaptive design and layout 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | ####Фиксированная верстка 5 | 6 | Oтличается среди других видов html верстки четко определенными размерами элементов - элементы веб-страницы соответственно имеют фиксированные размеры, в пикселях. 7 | 8 | ####Резиновая верстка 9 | 10 | Отличается от фиксированной верстки относительными размерами элементов веб-страницы, обычно заданных в процентах 11 | 12 | ####Адаптивная верстка 13 | 14 | Суть этой верстки в том, чтобы сверстанная веб-страница хорошо отображалась на экранах устройств разного размера, например, смартфон, планшет, монитор компьютера 15 | 16 | ####Проблема масштабирования в мобильных браузерах 17 | 18 | Иногда мобильные браузеры могут игнорировать адаптивную верстку и просто уменьшать контент до тех пор, пока он не влезит в экран по ширине. Что бы избавится от этой проблемы нужно использовать: 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | Иногда может понадобится запретить пользователю увеличивать контент, для этого есть дополнительное свойство: 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | C помощью свойства @media можно указать для каких устройств и с каким разрешаением будут применяться стили. 31 | 32 | ```css 33 | @media [not|only] mediatype and (media feature) { 34 | CSS-Code; 35 | } 36 | ``` 37 | 38 | Типов на данный момент не так много: 39 | 40 | - all - Все типы. Это значение используется по умолчанию. 41 | - print - Печатающие устройства вроде принтера. 42 | - screen - Экран устройства. 43 | - speech - Устройство, которое выводит информацию "голосом" 44 | 45 | Типы, которые вывели из документации (Deprecated): 46 | 47 | - aural - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. 48 | - braille - Устройства, основанные на системе Брайля, которые предназначены для слепых людей. 49 | - handheld - Наладонные компьютеры и аналогичные им аппараты. 50 | - projection - Проектор. 51 | - tty - Устройства пито информационное табло, где вывод осуществляется через диоды. 52 | - tv - Телевизор. 53 | 54 | На сайте [stephen.io](http://stephen.io/mediaqueries/) собраны шорткоды для максимально точного определения iPad и iPhone различных версий и ориентаций экрана. 55 | 56 | Пример такого свойства: 57 | ```css 58 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { 59 | /* STYLES GO HERE */ 60 | } 61 | ``` 62 | 63 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /book/02. Pre- and Post- processors/README.md: -------------------------------------------------------------------------------- 1 | # Pre- and Post- processors 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | ### Pre-processors 5 | [SASS](http://sass-lang.com) (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей. 6 | 7 | [LESS](http://lesscss.org) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS. 8 | 9 | [SASS vs LESS (Habrahabr post)](http://habrahabr.ru/post/144309) 10 | 11 | ### Post-processor 12 | [PostCss](https://github.com/postcss/postcss) - это инструмент, для изменения Css с помощью JavaScript. Это нечто большее чем простой пост-процессор, но и немного не то, чем являются препроцессоры. 13 | 14 | ##SCSS (синтаксис SASS) 15 | ### Вложенность 16 | SCSS 17 | ```scss 18 | #some { 19 | border: 1px solid red; 20 | .some { background: white; } 21 | } 22 | ``` 23 | CSS 24 | ```css 25 | #some { 26 | border: 1px solid red; 27 | } 28 | #some .some { 29 | background: white; 30 | } 31 | ``` 32 | ### Переменные и операции с ними 33 | SCSS 34 | ```scss 35 | $blue: #3bbfce; 36 | $margin: 16px; 37 | $url: url(../img/icons/ui-ios-sprite.png); 38 | 39 | .content-navigation { 40 | border-color: $blue; 41 | color: darken($blue, 9%); 42 | } 43 | .border { 44 | padding: $margin / 2; 45 | margin: $margin / 2; 46 | border-color: $blue; 47 | } 48 | .wrapper { 49 | background: $url; 50 | } 51 | ``` 52 | CSS 53 | ```css 54 | .content-navigation { 55 | border-color: #3bbfce; 56 | color: #2ca2af; 57 | } 58 | .border { 59 | padding: 8px; 60 | margin: 8px; 61 | border-color: #3bbfce; 62 | } 63 | .wrapper { 64 | background: url(../img/icons/ui-ios-sprite.png); 65 | } 66 | ``` 67 | ### Подключение других scss файлов 68 | SCSS 69 | ```scss 70 | @import "./core/variables"; 71 | @import "./core/mixin"; 72 | @import "./core-project/variables"; 73 | ``` 74 | 75 | ### Миксинны 76 | Переменные в миксинах поддерживают default значания. 77 | SCSS 78 | ```scss 79 | @mixin text-truncate { 80 | overflow: hidden; 81 | text-overflow: ellipsis; 82 | white-space: nowrap; 83 | } 84 | @mixin transition( $transition-property, $transition-time, $transition-method: ease) { 85 | -webkit-transition: $transition-property $transition-time $transition-method; 86 | -moz-transition: $transition-property $transition-time $transition-method; 87 | -ms-transition: $transition-property $transition-time $transition-method; 88 | -o-transition: $transition-property $transition-time $transition-method; 89 | transition: $transition-property $transition-time $transition-method; 90 | } 91 | 92 | .block-wrap { 93 | .block { 94 | @include text-truncate; 95 | } 96 | @include transition(all, .2ms); 97 | } 98 | ``` 99 | CSS 100 | ```css 101 | .block-wrap { 102 | -webkit-transition: all 0.2ms ease; 103 | -moz-transition: all 0.2ms ease; 104 | -ms-transition: all 0.2ms ease; 105 | -o-transition: all 0.2ms ease; 106 | transition: all 0.2ms ease; 107 | } 108 | .block-wrap .block { 109 | overflow: hidden; 110 | text-overflow: ellipsis; 111 | white-space: nowrap; 112 | } 113 | ``` 114 | ### Наследование 115 | SCSS 116 | ```scss 117 | %extend_1 { 118 | display: inline-block; 119 | } 120 | %extend_2 { 121 | @extend %extend_1; 122 | width: 34px; 123 | height: 19px; 124 | } 125 | .wrap { 126 | @extend %extend_1; 127 | .block { 128 | @extend %extend_2; 129 | } 130 | } 131 | ``` 132 | CSS 133 | ```css 134 | .wrap, 135 | .wrap .block { 136 | display: inline-block; 137 | } 138 | .wrap .block { 139 | width: 34px; 140 | height: 19px; 141 | } 142 | ``` 143 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** -------------------------------------------------------------------------------- /book/01. Emmet/README.md: -------------------------------------------------------------------------------- 1 | #Emmet 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | [Emmet](http://docs.emmet.io) (предыдущее название — Zen Coding) — это набор плагинов для различных популярных текстовых редакторов, используемых для скоростного написания HTML и CSS кода. 5 | 6 | Для преобразование аббревиатуры в код необходимо нажать клавишу TAB. 7 | 8 | При генирации кода emmet анализирует тег родителя и если в абревиатуре не указан определенный тек, то генерируется правильный с точки зрения спецификации. 9 | 10 | - li для ul и ol 11 | - tr для table, tbody, thead и tfoot 12 | - td для tr 13 | - option для select и optgroup 14 | - span для p 15 | 16 | ul>.item 17 | 18 | ```html 19 | 22 | ``` 23 | 24 | p>.text 25 | 26 | ```html 27 |

28 | ``` 29 | 30 | ### Doctype 31 | 32 | html:5 или ! для HTML5 doctype 33 | 34 | ```html 35 | 36 | 37 | 38 | 39 | Document 40 | 41 | 42 | 43 | 44 | 45 | ``` 46 | 47 | html:xt для XHTML transitional doctype 48 | 49 | ```html 50 | 51 | 52 | 53 | 54 | Document 55 | 56 | 57 | 58 | 59 | 60 | ``` 61 | 62 | html:4s для HTML4 strict doctype 63 | 64 | ```html 65 | 66 | 67 | 68 | 69 | Document 70 | 71 | 72 | 73 | 74 | 75 | ``` 76 | 77 | ### class и id 78 | 79 | div.content 80 | 81 | span#search 82 | 83 | section#main.user 84 | 85 | ```html 86 |
87 | 88 | 89 | 90 |
91 | ``` 92 | 93 | ### Аттрибуты и контент 94 | 95 | a.link[href=//google.com]{google} 96 | 97 | img.avatar[src=./default_avatar.jpg][alt=avatar][title=avatar] 98 | 99 | ```html 100 | google 101 | 102 | avatar 103 | ``` 104 | 105 | ### Нумерация и дублирование 106 | 107 | p*2 108 | 109 | .list$*5 110 | 111 | ```html 112 |

113 |

114 | 115 |
116 |
117 |
118 |
119 |
120 | ``` 121 | 122 | ### Вложенность и структурирование 123 | 124 | p>.count+.name 125 | 126 | p>span^ul>.item-$*2 127 | 128 | (.title>h1)+(.desc>h2) 129 | 130 | ```html 131 |

132 | 133 |

134 | 138 | 139 |
140 |

141 |
142 |
143 |

144 |
145 | ``` 146 | 147 | ### Lorem 148 | 149 | p*3>lorem5 150 | 151 | Цифра в конце слова lorem означает количество генерируемых слов 152 | 153 | ```html 154 |

Lorem ipsum dolor sit amet.

155 |

Aperiam quos quasi itaque, repudiandae.

156 |

Veniam blanditiis maxime molestias veritatis!

157 | ``` 158 | 159 | ### CSS аббревиатуры 160 | 161 | Для всех css свойст есть сокращения, IDE их обычно подсказывают. 162 | 163 | Значение px ставится по умолчанию. Для всех других нужно использовать или аббревиатуру, или полное обозначение 164 | 165 | .class { 166 | w50+h10p+lh2e 167 | } 168 | 169 | ```css 170 | .class { 171 | width: 50px; 172 | height: 10%; 173 | line-height: 2em; 174 | } 175 | ``` 176 | 177 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 178 | -------------------------------------------------------------------------------- /book/08. Project Builders/README.md: -------------------------------------------------------------------------------- 1 | #Project Builders 2 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 3 | 4 | [Gulp](http://gulpjs.com), [Grunt](http://gruntjs.com/) — это инструменты сборки веб-приложения, позволяющиe автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д 5 | 6 | [Webpack](http://webpack.github.io) — это утилита для сборки бандлов и оптимизации модулей JavaScript и других ресурсов для фронтенда. 7 | 8 | Основное отличие Gulp/Grunt от Webpack в том, что первые построенны на логике выполнения задачь, а webpack создает "модули", которыми и оперирует. 9 | 10 | Дальше рассмотрим подробнее Gulp на примере одного из наших проектов. 11 | 12 | ##Gulp 13 | projectBasePath/package.json 14 | 15 | ![](img/gulp1.png) 16 | 17 | ```json 18 | { 19 | "name": "tishman", 20 | "version": "1.0.0", 21 | "description": "", 22 | "main": "build.js", 23 | "scripts": { 24 | "test": "echo \"Error: no test specified\" && exit 1" 25 | }, 26 | "author": "Max Klishevych", 27 | "license": "ISC", 28 | "devDependencies": { 29 | "del": "^1.2.0", 30 | "gulp": "^3.8.11", 31 | "gulp-concat": "^2.5.2", 32 | "gulp-order": "^1.1.1", 33 | "gulp-resolve-dependencies": "^2.1.0", 34 | "gulp-sass": "^2.0.1", 35 | "require-dir": "^0.3.0" 36 | } 37 | } 38 | ``` 39 | 40 | projectBasePath/gulpfile.js 41 | ```js 42 | require('./ichannel-base/gulpfile.js'); 43 | ``` 44 | 45 | projectBasePath/ichannel-base/gulpfile.js 46 | ```js 47 | var requireDir = require('require-dir'); 48 | // Require all tasks in gulp/tasks, including sub folders 49 | requireDir('./gulp/tasks', { recurse: true }); 50 | ``` 51 | 52 | projectBasePath/ichannel-base/gulp/config.js 53 | ```js 54 | module.exports = { 55 | files: { 56 | scss: { 57 | base: './ichannel-base/assets/scss/**/*.scss', 58 | project: './assets/scss/**/*.scss', 59 | mergeFolder: './merged-scss', 60 | buildName: 'build.css', 61 | compileFolder: './compiled-css', 62 | buildFolder: './public/css', 63 | concatFilesOrder: [ 64 | 'global.scss', 65 | 'global-*.scss' 66 | ] 67 | }, 68 | fonts: { 69 | project: './assets/fonts/**/**', 70 | buildFolder: './public/fonts' 71 | }, 72 | img: { 73 | base: './ichannel-base/assets/img/**/**', 74 | project: './assets/img/**/**', 75 | buildFolder: './public/img' 76 | }, 77 | js: { 78 | base: './ichannel-base/js/**/*.js', 79 | project: './js/**/*.js', 80 | buildName: 'build.js', 81 | buildFolder: './public/js', 82 | mergeFolder: './merged-js', 83 | concatFilesOrder: [ 84 | 'constants.js', 85 | 'config-base.js', 86 | 'config.js', 87 | 'app.js', 88 | 'utils/*', 89 | 'services/*', 90 | 'controllers/**/**', 91 | 'ui/*', 92 | 'views/**/**', 93 | 'bootstrap.js' 94 | ] 95 | }, 96 | views: { 97 | base: './ichannel-base/views/**/*.html', 98 | project: './views/**/*.html', 99 | buildName: 'index.html', 100 | buildFolder: '.', 101 | mergeFolder: './merged-html', 102 | concatFilesOrder: [ 103 | 'index.start.html', 104 | 'body.html', 105 | 'templates/**/**', 106 | 'index.end.html' 107 | ] 108 | } 109 | } 110 | }; 111 | ``` 112 | 113 | #### Путь одной таски 114 | Запуск сборщика 115 | 116 | ``` 117 | E:\OpenServer\domains\jen.a2a.co>gulp 118 | ``` 119 | 120 | projectBasePath/ichannel-base/gulp/tasks/dafault.js 121 | ```js 122 | var gulp = require('gulp'); 123 | 124 | gulp.task('default', [ 125 | 'js:default', 126 | 'scss:default', 127 | 'img:default', 128 | 'views:default', 129 | 'fonts:default' 130 | ]); 131 | ``` 132 | 133 | projectBasePath/ichannel-base/gulp/tasks/sscss:default.js 134 | ```js 135 | var gulp = require('gulp'); 136 | 137 | gulp.task('scss:default', ['scss:merge', 'scss:concat', 'scss:compile', 'scss:cleanup']); 138 | ``` 139 | 140 | Одна из задачь - сборка scss 141 | projectBasePath/ichannel-base/gulp/tasks/scss-compile.js 142 | ```js 143 | var gulp = require('gulp'); 144 | var sass = require('gulp-sass'); 145 | var config = require('../config'); 146 | 147 | gulp.task('scss:compile', ['scss:merge'], function (cb) { 148 | var stream = gulp 149 | .src([config.files.scss.mergeFolder + '/**/**']) 150 | .pipe(sass().on('error', sass.logError)) 151 | .pipe(gulp.dest(config.files.scss.compileFolder)) 152 | ; 153 | 154 | stream.on('end', function () { 155 | cb(); 156 | }); 157 | }); 158 | ``` 159 | 160 | Выполнение сборки проекта 161 | 162 | ![](img/gulp.gif) 163 | 164 | **[Содержание](https://github.com/EvgeniyPolovniy/fron_end_book)** 165 | --------------------------------------------------------------------------------