Натисніть сюди, щоб переглянути демо-версію та краще зрозуміти, що ми збираємося робити.
>Попередньо дозвольте мені розповісти вам трохи про Susy та Breakpoint.
Susy
Susy є системою сіток, яка надає велику гнучкість для управління макетом сайту. Susy дає вам все, чого не може дати жоден інший фреймворк, як Bootstrap або Foundation. У мене не знайдеться прекрасних слів для опису сили Susy; є пост Целла Лью на css-tricks, що представляє Susy та розповідає наскільки легко ви можете створити за допомогою його макет.
Дозвольте показати трохи того, як можна використовувати Susy для визначення макета. Susy працює з Sass, не Less та це також настроюється. Ось просте та мінімалістське налаштування, яке у вас може бути:
@import "susy" /* Змінюємо глобальні налаштування Susy за замовчуванням */ $susy: ( /* Встановлюємо 12 колонок */ columns: 12, /* Встановлюємо основний контейнер в 1120px */ container: 1024px);
Тепер припустимо, що вам потрібен макет сторінки подібно до поточної, на якій ви читаєте цей текст. Сторінка містить заголовок, який охоплює весь макет, контент зліва займає 8 колонок та бічна панель займає 4 колонки. Написати з Susy ви можете так:
header{ @include span(12); }
.content{ @include span(8); }
.content{ @include span(4); }Просто, чи не так? Жодного зайвого шуму.
Breakpoint
Без медіа-запитів немає і адаптивного дизайну. Breakpoint є простим модулем, який дозволяє використовувати медіа-запити спрощеним та наочним шляхом. Він призначений для допомоги у написанні медіа-запитів у Sass так швидко, наскільки це можливо. Давайте подивимося приклад застосування:
header{ @include breakpoint( 320px){ background-color: $white; }
@include breakpoint( 768px){ background-color: $red; }
@include breakpoint( 1024px){ background-color: $black; }
}Тут просто змінюється колір фону заголовка кожного разу, коли розмір екрану потрапляє в одну з точок зупинки. Це просто. Представивши як це поєднується з Susy, ми збираємося творити магію.
Прочитати більше про breakpoint-sass можна тут.
Макет проекту
Перш ніж йти далі, дозвольте мені показати вам що ми дійсно хочемо тут зробити як приклад:
Я думаю ви зрозуміли сенс. Хоча ця концепція може бути названа еластичним макетом, я думаю, що в нашому випадку правильно ілюструвати те, що ми хочемо отримати. Якщо ви хочете зробити повністю чуйний дизайн, то повинні обдумати кілька елементів, на кшталт зміни меню, додавання/видалення елементів дизайну на основі розміру екрана та ін.
Налаштування проекту
Для цього проекту ми будемо використовувати систему складання Gulp для автоматизації деяких наших завдань. І ми також використовуватимемо Bower для управління нашими пакетами, такими як Susy, Breakpoint. Отже, почнемо.
Крок 1: створіть папку та назвіть її responsive_blog або будь-яким відданим ім'ям.
Крок 2: перейдіть у папку та запустіть npm init, щоб налаштувати файл package.jason. Скажіть yes для всіх кроків.
Крок 3: встановіть Gulp локально шляхом виконання npm install--save-dev gulp.
Крок 4: також встановіть локально такі плагіни — gulp-sass, gulp-minify, gulp-uglify, gulp-rename, gulp-del, browser-sync та ін., запустивши npm install--save-dev <ім'я плагіна> або можете просто вказати їх як залежність у файлі package.json:
<code data-language="javascript">"devDependencies": { "browser-sync": "^2.9.0" , "del": "^2.0.0", "gulp-autoprefixer": "^2.3.1", "gulp-minify-css": "^1.2.1", "gulp plumber": "^1.0.1", "gulp-rename": "^1.2.2", "gulp-sass": "^2.0.4", "gulp-sourcemaps": " ^1.5.2" }Крок 5: створіть ще одну папку всередині responsive_blog та назвіть її src. Вона міститиме наші вихідні файли. Щоб зробити папку ви можете виконати: mkdir src.
Крок 6: створіть файл bower.json, запустивши bower init і сказавши yes для всіх кроків. Потім виконайте bower install susy breakpoint. Це дозволить встановити пакети Bower, зокрема Susy та Breakpoint-sass.
Крок 7: створіть gulpfile.js у тій же папці, запустивши touch gulpfile.js.
Ваша папка проекту має виглядати так:
- responsive_blog/
- node_modules/
- src/
- bower_components
- bower.json
- gulpfile.js
- package.json
Якщо це виглядає красиво, то продовжимо.
Крок 8: перейдіть до папки src і створіть основний файл, запустивши touch index.html.
Крок 9: створіть дві папки css і scss всередині src, запустивши mkdir css scss.
Крок 10: усередині scss створіть новий файл і назвіть його styles.scss. Зараз папка має виглядати так:
- responsive_blog/
- node_modules/
- bower_components/
- src/
- css/
- index.html
- scss/
- styles.scss
- bower.json
- gulpfile.js
- package.json
Відмінна робота!
Код
Ми щойно створили наші папки та файли. Тепер додамо деякий код всередину index.html, gulpfile.js та styles.scss:
index.html
<code data-language="html"><!DOCTYPE html> <html> <head> <title>Responsive Web Design — Blog</title> <meta name="charset" content="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/styles.min.css"> </head> <body> <div class="container"> <header class=""> <h2><a href="" title="">RWD</a></h2> <nav> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">About</a></li> <li><a href="" title="">Contact</a></li> </ul> </nav> </header><!--/header--> <div class="page-content"> <section class="latest-posts"> <h1>Latest tutorials</h1> <article> <!--пост блога--> <h2><a href="" title="">How to create a blog?</a></h2> <p>This shows you how you can create your own blog. <a href="" rel=bookmark>Read more</a></p> <footer> By zooboole | 7k переглядів </footer> </article> <article> <!--пост блога--> <h2><a href="" title="">How to create a blog?</a></h2> <p>This shows you how you can create your own blog. <a href="" rel=bookmark>Read more</a></p> <footer> By zooboole | 7k переглядів </footer> </article> </section><!--/section--> <aside class="popular-posts"> <h1>Popular</h1> <article> <!--пост блога--> <h2><a href="" title="">How to create a blog?</a></h2> <p>This shows you how you can create your own blog. <a href="" rel=bookmark>Read more</a></p> <footer> By zooboole | 7k переглядів </footer> </article> </aside><!--/aside--> </div> <footer class="footer"> 2015 © Responsive Blog, by <a href="http://zooboole.me">zooboole</a> </footer><!--/footer--> </div> <script src="bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="bower_components/breakpoint/jquery.breakpoint.js" type="text/javascript" charset="utf-8"></script> </body> </html>
styles.scss
<code data-language="css">@import "../bower_components/susy/sass/_susy.scss"; @import "../bower_components/breakpoint-sass/stylesheets/breakpoint"; @import "reset"; @import "variables"; //Susy $susy: ( columns: 12, gutters: 1/2, math: fluid, gutter-position: outside,); html,body{ font-family: $font-family-default; font-size:$font-size-default; line-height: $ line-height; color:$color-text; background-color: $color-background; margin:0; padding:0; overflow-x:hidden; }
a {text-decoration: none; }
.container{ @include container($container); background-color:$white; }
.page-content{ padding:3%; margin:0; }
//*********************************** //МАЛЕНЬКІ ПРИСТРОЇ //****** ***************************** @include breakpoint($breakpoint-small) { h1{ color: $color-secondary; font-size: $font-size-title; }
h2 { font-size: 1.2em; margin:0; padding:0; }
//Заголовок сайту header{ @include span(12); background-color:$color-secondary; padding: 0 1%; color: $white; h2{ @include span(12); font-size: 1.5em; padding:0 0.4em; }
nav { @include span (12); }
ul{ list-style-type: none; padding:0; margin:0; padding-left:0.1em; li{ display: inline-block; a { font-size: 1em; display: block; padding: 0.5em; }
}
}
a{ color: $white; &:hover{ color: $black; }
}
}
//Останні пости .latest-posts{ @include span(12); article{ border:1px solid $color-background; padding:0.5em; margin-bottom: 1em; p{ font-size: 0.9em; }
a{ color: darken($color-background, 25%); }
footer { font-size: 0.9em; color:#333; }
}
}
//Популярні пости .popular-posts{ @include span(12); article{ background-color:lighten($color-background, 5%); border:1px solid $color-background; padding:0.5em; margin-bottom: 1em; a{color: darken($color-background, 20%);; }
}
}
//Підвал .footer{ @include span(12); background-color:$color-secondary; font-size: 1em; padding:0.5em 1%; color: $white; a{ color:lighten( $color-primary, 22%); &:hover{ color: $black; }
}
}
}
//*********************************** //СЕРЕДНІ ПРИСТРОЇ //*** ******************************** @include breakpoint($breakpoint-medium){ //Тут ми просто змінимо що необхідно модифікувати, //оскільки попередній стиль застосовується автоматично //Заголовок сайта header{ @include span(12); background-color:$color-primary; h2{ @include span(3); font-size: 3em; }
nav { @include span (8); }
ul{ text-align: right; margin-top:0.4em; li { a { font-size: 1.7em; }
}
}
}
//Останні пости .latest-posts{ @include span(6); article{ h2{ font-size: 1.8em; }
border:1px solid $color-background; padding:0.5em; margin-bottom: 2em; clear: both; p{ font-size: $font-size-default+50; }
a{ color: darken($color-background, 25%); }
footer { font-size: 1.3em; }
}
}
//Популярні пости .popular-posts{ @include span(6); padding-left:1em; article{ h2{ font-size: 1.8em; }
background-color:lighten($color-background, 2%); border:1px solid transparent; padding:0.5em; margin-bottom: 1em; p{ font-size: $font-size-default+50; }
a{ color: darken($color-background, 20%);; }
footer { font-size: 1.3em; }
}
}
//Підвал .footer{ @include span(12); background-color:$color-primary; font-size: 1.5em; }
}
//*********************************** //ВЕЛИКІ ПРИСТРОЇ //***** ****************************** @include breakpoint($breakpoint-large){ //Тут ми просто змінимо що необхідно модифікувати, //бо попередній стиль застосовується автоматично //Заголовок сайта header{ @include span(12); background-color:lighten($color-primary, 15%); padding:0%; }
//Останні пости .latest-posts{ //залишимо порожнім, це означає, що застосовуватиметься попередній стиль }
//Популярні пости .popular-posts{ @include span(6); padding-left:1em; article{ h2{ font-size: 1.8em; }
background-color:lighten($color-background, 2%); border:1px solid transparent; padding:0.5em; margin-bottom: 1em; p{ font-size: $font-size-default+50; }
a{ color: darken($color-background, 20%);; }
footer { font-size: 1.3em; }
}
}
//Підвал .footer{ padding:0em; background-color:lighten($color-primary, 15%); }
} gulpfile.js
<code data-language="javascript">///////////////////////////////////////////////////Включаємо завдання /////////////////////////////////////////////////var gulp=require('gulp'), minifycss=require('gulp-minify-css'), sass=require('gulp-sass'), browserSync=require('browser-sync') , reload=browserSync.reload, autoprefixer=require('gulp-autoprefixer'), plumber=require('gulp-plumber'), del=require('del'), rename=require('gulp-rename'), sourcemaps=require('gulp-sourcemaps'); ////////////////////////////////////////////////////Налаштування змінних //Задаємо paths /////////////////////////////////////////////////var config={ scss :[ 'src/scss/**/*.scss' ], css :[ 'src/css/' ], html :[ 'src/* */
*.html' ], build :[ 'build/' ], src :[ 'src/' ] }; ////////////////////////////////////////////////////Завдання для CSS/Sass /////////////////////////////////////////////////gulp.task('styles',function(){ return gulp.src(config.scss) .pipe(sourcemaps.init()) .pipe(sass() .on(') error', sass.logError)) .pipe(autoprefixer('last 3 versions')) .pipe(minifycss()) .pipe(rename({suffix: '.min'})) .pipe(sourcemaps.write()) .pipe(gulp.dest(''+config.css+'')) .pipe(reload({stream:true})); }); ////////////////////////////////////////////////////Завдання для HTML //////////////////////////////////////////////////gulp.task('html', function(){ return gulp.src(config.html) .pipe(reload({stream:true})); }); ////////////////////////////////////////////////////Завдання Browser-Sync /////////////////////////////////////////////////gulp.task('browserSync', function() { browserSync({ server: { baseDir: config.src }
}); }); ////////////////////////////////////////////////////Завдання складання //Створення папки build, очищення файлів і папок, що не використовуються ////////////////////////////////////////////////////Створення gulp.task('build:create', function(){ return gulp.src(config.src+'**/*') .pipe(gulp.dest(''+config.build+'')); }); //Очистка папки build gulp.task('build:clean',['build:create'], function(){ return del(['build/bower_components/', 'build/scss/', 'build/css/!(*.min.css)', 'build/js/!(*.min.js)' ]); }); //Завдання попереднього перегляду програми gulp.task('build:start', function() { browserSync({ server: { baseDir: config.build }
}); }); //Видаляємо папку build gulp.task('build:delete', function(res){ return del([config.build+'/**'], res); }); //Завдання build gulp.task('build', ['build:create', 'build:clean']); ////////////////////////////////////////////////////Завдання watch //Відстежує будь-які зміни у файлах CSS, JS та HTML ///////////////////////////////////////////////////gulp.task ('watch', function(){ gulp.watch(config.scss, ['styles'])); config.html, ['html']);}); //////////////////////////////////////////////////Завдання за замовчуванням ///////////////////////////////////////////////gulp.task('default', ['watch', 'browserSync','styles','html']);Добре. Ми розробили різні частини проекту. Залишилося лише запустити їх. Як ви, можливо, помітили з gulpfile.js, ми просто повинні поставити свої завдання в роботу.
Тут слід розглянути два випадки:
Розробка
Це час, коли ви все ще кодуєте та вносите зміни до коду. У нашому випадку досить просто виконати:
<code>gulp
Якщо ви використовуєте мої файли, виконайте таке:
<code>npm install bower install gulp
При цьому завантажуються всі плагіни та необхідні пакети, після чого gulp виконає завдання, які відстежують будь-які зміни та автоматично перезавантажують сторінку.
Якщо ви хочете побачити, як я отримав шлях до Susy і Breakpoint запустіть bower list--path.
Але є дещо з точками зупинки, про що мені слід попередити. Ви повинні використовувати breakpoint-sass замість breakpoint. При імпорті його у ваші стилі будьте обережні.
Публікація
Етап, коли ви закінчили кодування і хочете отримати кінцевий продукт. Ми маємо завдання build. Щоб їх використовувати, виконайте такі команди.
Створення програми:
<code>gulp build
Запустити фінальну програму:
<code>gulp build:start
Якщо ви бажаєте видалити папку build:
<code>gulp build:delete
Резюме
Це просто приклад того, як я б розпочав створення такого сайту. Це лише один робочий процес та техніка серед множини. Я чекаю, що ви дізналися чотири основні речі з цього уроку: робочий процес із системою складання Gulp, як створити адаптивний сайт, як Susy та Breakpoint дозволяє нам писати семантичний HTML і як вказати спочатку мобільні пристрої при проектуванні адаптивного сайту.
Визнаю, що пропустив багато в коді, знайте, що це для ясності мети, а іноді я сам не розібрався, як поводитися з цим, тому що все ще вчуся, як добре використовувати Susy і Breakpoint. Якщо у вас є будь-які ідеї, як щось поліпшити, я буду радий прийняти їх.
Перш за все, ви також повинні бути обізнані про існування Susy і Breakpoint для вашого наступного проекту.Це чудові інструменти, які можуть зробити ваше життя простіше.