Презентация для видео о про-курсе по вёрстке
# bash
cd epic-book/
cd ..
mkdir new-directory
touch src/style.scss
rm -rf new-directory
rm src/style.scss
git init
git add .
git commit -m "Наверстал упущенное"
git remote add origin git@github.com:user/repo.git
git push -u origin master
<!-- БЭМ как методология -->
<section class="promo">
<div class="promo__inner">
<h2 class="promo__title">БЭМ имитирует пространство имён</h2>
<ol class="promo__features">
<li>Случайно повторить селектор сложно, код предсказуем.</li>
<li>Самодокументируется — по классу ясно ЧТО это.</li>
</ol>
<a href="https://ru.bem.info/" class="btn btn--lg">Погнали!</a>
</div>
</section>
//- БЭМ как методология и pug
section.promo
.promo__inner
h2.promo__title БЭМ имитирует пространство имён
ol.promo__features
li Случайно повторить селектор сложно, код предсказуем.
li Самодокументируется — по классу ясно ЧТО это.
a.btn.btn--lg(href='https://ru.bem.info/') Погнали
extends ../pug/layout.pug
block meta
title Epic books
block header
+page-header()
+logo('/')
img(src='img/logo.svg', alt='Epic books', width='64', height='15')
+main-nav('3')
block content
h1 Epic books. Книги, которые стоит прочесть!
// promo.scss
.promo {
margin-bottom: 30px;
background-color: $color-main;
color: $text-color;
&__inner {
max-width: ($screen-lg - 20);
margin: auto;
padding: 0 20px;
}
}
function styles() {
return src('./scss/style.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([
autoprefixer({browsers: ['last 2 version']}),
]))
.pipe(sourcemaps.write('/'))
.pipe(dest('./css/'))
.pipe(browserSync.stream());
}
exports.styles = styles;
// promo.scss
.promo {
<<<<<<< HEAD
display: flex;
=======
display: grid;
>>>>>>> master
margin-bottom: 30px;
background-color: $color-main;
color: $text-color;
}
<picture>
<source type="image/webp" srcset="img/rule-34.webp" />
<img src="img/rule-34.png" width="600" alt="Internet is for..." />
</picture>
<picture>
<source media="(min-width: 1200px)" srcset="img/carpet-desktop.jpg">
<source media="(min-width: 768px)" srcset="img/carpet-tablet.jpg">
<img src="img/carpet.jpg" alt="Ковёр">
</picture>
<svg viewBox="0 0 100 100" width="100" height="100">
<rect fill="#F90" width="100" height="100" rx="4" ry="4"/>
<rect fill="#FFB13B" width="50" height="50" rx="4" ry="4"/>
<rect x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/>
<g fill="#F90">
<circle cx="50" cy="18.4" r="18.4"/>
<circle cx="72.4" cy="27.6" r="18.4"/>
<circle cx="81.6" cy="50" r="18.4"/>
<circle cx="72.4" cy="72.4" r="18.4"/>
</g>
<path d="M63.086 18.385c0-7.227-5.859-13.086-13.1-13.086-7.235 0-13.096 5.859-13.096 13.086-5.1-5.11-13.395-5.11-18.497 0-5.119 5.12-5.119 13.408 0 18.524-7.234 0-13.103 5.859-13.103 13.085 0 7.23 5.87 13.098 13.103 13.098-5.119 5.11-5.119 13.395 0 18.515 5.102 5.104 13.397 5.104 18.497 0 0 7.228 5.86 13.083 13.096 13.083 7.24 0 13.1-5.855 13.1-13.083 5.118 5.104 13.416 5.104 18.513 0 5.101-5.12 5.101-13.41 0-18.515 7.216 0 13.081-5.869 13.081-13.098 0-7.227-5.865-13.085-13.081-13.085 5.101-5.119 5.101-13.406 0-18.524-5.097-5.11-13.393-5.11-18.513 0z"/>
<path fill="#FFF" d="M55.003 23.405v14.488L65.26 27.64c0-1.812.691-3.618 2.066-5.005 2.78-2.771 7.275-2.771 10.024 0a7.086 7.086 0 0 1-5.015 12.099L62.101 44.982H76.59a7.088 7.088 0 0 1 5.011-2.076c3.9 0 7.078 3.179 7.078 7.087 0 3.906-3.178 7.088-7.078 7.088a7.11 7.11 0 0 1-5.011-2.072H62.1l10.229 10.244c1.824 0 3.642.694 5.015 2.086a7.06 7.06 0 0 1 0 10.01c-2.75 2.774-7.239 2.774-10.025 0a7.068 7.068 0 0 1-2.064-5.003L55 62.094v14.499a7.11 7.11 0 0 1 2.084 5.013c0 3.906-3.177 7.077-7.098 7.077-3.919 0-7.094-3.167-7.094-7.077a7.12 7.12 0 0 1 2.081-5.013V62.094L34.738 72.346a7.065 7.065 0 0 1-2.084 5.003 7.08 7.08 0 0 1-10.024 0 7.061 7.061 0 0 1 0-10.012 7.067 7.067 0 0 1 5.012-2.086l10.257-10.242H23.414a7.134 7.134 0 0 1-5.015 2.072c-3.917 0-7.096-3.18-7.096-7.088s3.177-7.087 7.096-7.087c1.94 0 3.725.796 5.015 2.076h14.488L27.646 34.736a7.125 7.125 0 0 1-5.012-2.071 7.08 7.08 0 0 1 0-10.027 7.086 7.086 0 0 1 10.027 0 7.106 7.106 0 0 1 2.083 5.005l10.235 10.252V23.407c-1.27-1.287-2.082-3.053-2.082-5.023 0-3.908 3.175-7.079 7.096-7.079 3.919 0 7.097 3.168 7.097 7.079-.002 1.972-.816 3.735-2.087 5.021z"/>
</svg>
