«Flexbox first». Верстка таблиць і тексту флексбоксами

Флексбокс впевнено крокує по планеті — настає епоха комфортного веб-розробки. У цій статті я розповім про незвичайний спосіб верстки всього флексбоксами, і поділюся готовим кодом для верстки таблиць і тексту флексбоксами.

Три методу позиціонування:
image

1) Флексбокс за замовчуванням. Замість звичайного класичного потоку можна використовувати флексбокс-форматування. Результат буде аналогічний, крім можливості float-обтікання, без якого цілком можна обійтися.

2) Абсолютна або фіксоване розташування відносно батьківського контейнера або вікна. Для того щоб у кожному контейнері можна було так позиціонувати елементи — для кожного елемента за замовчуванням position:relative.

3) Зсув щодо свого становища, і трансформації. Зміщення через position:relative не анимируется, тому краще використовувати translate.

Графічна композиція — це комбінація цих трьох методів + ефекти і прозорість.

*
{
position:relative;
display:flex;
}

title,script,style
{
display:none; //Властивість display приймає тільки два значення — flex або нічого
} 

От і все! Це дуже простий фреймворк, але він значно спрощує верстку.

Читати далі →

Введення в систему 8-піксельних сіток

Будь-якого дизайнера, над чим би він не працював — сайтами, журналами або мобільними додатками, напевно, доводилося чути термін «сітка». Існують сітки для всіляких варіантів розташування контенту. Ми застосовуємо стовпчик сітки, щоб вибудовувати контент по горизонталі, сітки базових ліній, щоб вирівнювати блоки тексту по вертикалі, гнучкі (soft) та жорсткі (hard) сітки — в залежності від того, наскільки суворо збираємося їх дотримуватися. Я зацікавився системою 8-піксельних сіток, коли почув, з яким захопленням говорить про неї Брін Джексон, і вирішив подивитися, які переваги вона може дати моїм дизайнам (і чи взагалі).




Читати далі →

Я полюбив верстку після цього: Zeplin в бою

Іноді я питав себе і Гугл: «Чому мені буває соромно бути верстальником». Ну, знаєте, коли не міг на око визначити, який переді мною шрифт: open sans з font-weight: bold, або open sans bold з font-weight: normal — небудь випадково дізнавався, що «ой, забули тобі сказати, масштаб був не 1920x1080, а 2560x1440».

Звичайно ж як — скидають .psd і крутись як хочеш.



Навесні 2015-го, прийшовши в uKit, я дізнався про Sketch — і побачив, як шаблони стали з'являтися з красивими і однаковими мітками розмірів відносно один одного і дуже докладним описом.

Тоді мені захотілося більшого. І буквально через кілька місяців вийшов Zeplin 1.0. Це додаток змінило моє уявлення про верстку в цілому — тому що воно по-справжньому робить життя верстальника щасливою.


Читати далі →

Про верстку, логіці, диваків і порталах МТС

Ремарка — даний текст є лише моє особисте оцінне судження і не претендує на абсолютну істину.

Передісторія. Осіння ніч, відсутність роботи, інтернет. Скінчився. Як зазвичай це буває, закінчився трафік на мтс-ном тариф.

«Гаразд», — подумав я, спробую оплатити з мобільного.

На дворі 2016 рік, це має бути просто і зручно. Компанія МТС так не думала.

Читати далі →

Верстка: відображаємо користувальницький контент

Під призначеним для користувача контентом у цій статті ми розуміємо будь-який текст на сторінці, автором якого є користувач. Найчастіше це коментарі, користувацькі записи на стіні» в мікроблозі, інформація «про себе» у профілі і все в такому роді. Завдання не те щоб дуже складна, але вимагає уважності і гарного розуміння основ верстки. У цій статті зроблена спроба зібрати воєдино те найважливіше, що потрібно знати про верстку, що включає власний текст.



Читати далі →

Як швидко створити індивідуальну Головну сторінку за допомогою сітки Bootstrap і бібліотеки jQuery

image

Як ми знаємо, перша думка людини виявляється самим вірним. І це працює в усьому: думка про машину, одязі, архітектурі і т. д. З веб-ресурсами – те ж саме. При відкритті будь-якого сайту, в першу чергу ми звертаємо увагу на головну сторінку цього сайту і буквально за пару секунд ми розуміємо, будемо ми далі залишатися на цьому сайті чи ні.

Мені хотілося б поділитися з вами завданням, яке поставили мені і моїй команді. Реалізувати її довелося з усією відповідальністю (що, втім, звичайна справа в розробці).

Так як наш сайт розрахований на користувачів різного калібру, потрібно було спроектувати і розробити все так, щоб догодити кожному. Тобто, з одного боку, дизайн повинен бути витриманий в дусі мінімалізму, а, з іншого боку, виглядати якісно і дорого для залучення солідних користувачів.

Що було далі? Дивіться під катом!

Читати далі →

Sketchode: погляд з боку

image

Я розробник з невеликої незалежної студії, який займається типовими для нашої професії завданнями і, відповідно, стикається з типовими проблемами. Одна з найактуальніших — налагоджене, стабільну і продуктивну взаємодію з дизайнером при спільній роботі над проектом. Зараз вже для всіх очевидно, що застава гладкою командної роботи — це грамотна механізація окремих її етапів, що підтверджує і насищення ринку відповідним. Зокрема, цілу нішу утворює софт для оптимізації роботи з дизайном на стороні розробника — адже практика показує, що в сучасних реаліях забезпечувати левову частку співробітників дорогими графічними редакторами з повним пакетом функцій заради, фактично, перегляду та «розбору» для більшості компаній занадто накладно.

Як правило, розробники зупиняється на варіантах, які перевірені часом і більш-менш на слуху, начебто Avocode або Zeplin. Проте я намагаюся не упускати можливості спробувати і менш відомі програми в пошуках оптимального співвідношення ціни-якості, і, якщо пощастить, цікавих рішень. У цій статті мова піде про Sketchode — плагіні для Sketch, реліз якого відбувся цієї весни, і мій досвід роботи з ним. Вдалий або невдалий — розберемося по ходу справи.

Читати далі →

4 шляхи юного регіонального розробника, які я пройшов у студентські роки

Я ріс в депресивному селищі міського типу, де більшість хлопців, подорослішавши, обирало шлях впевненою деградації. Років з 11 мене переслідував страх, що я буду таким же, як це більшість.



Але в 13 років батьки купили мені комп'ютер, і життя почало змінюватися: я швидко став місцевим эникейщиком, у якого дорослі дядьки і тітки запитували, як встановити «віндовс на процесор». В 15 я задався питанням, як написати свою гру. Запитав двоюрідного брата, який вже став «шанованою людиною» і робив сайти в Москві. Брат привіз підручник Лафоре по C++ і сказав: «Вивчай програмування».

Програмування стало для мене тим самим світлом в кінці тунелю: я чітко знав, що ось закінчиться школа, — і я поїду у велике місто, щоб працювати в хорошій компанії. Але шлях цей виявився непростим, ніж я очікував.


Читати далі →

Верстаємо чуйний сайт правильно з Fronzy media-queries

Кращий працівник — лінивий працівник, тому що він прагне виконати поставлене завдання максимально просто. Завдання, рішення якої конвертувалося в методологію Fronzy media-queries, можна описати так:
  1. Створити міксини в SCSS-документі для швидкого оголошення медіа-запитів
  2. Використовувати ці міксини в інших проектах
Наприклад, ми хочемо, щоб деякі стилі css-документі застосовувалися тільки для смартфонів з шириною екрана менш 600px. В css-документі ми напишемо цей код:

@media screen and (max-width: 600px) { ... } // три точки - місце для стилів

Але є більш коротка форма запису.
Читати далі →

12 маловідомих фактів про CSS (продовження)

Більше року тому я опублікував 12 маловідомих фактів про CSS переклад на хабре), і донині це була одна із самих популярних статей на SitePoint. З тих пір я збирав більше цікавинок і маленьких порад по CSS для нової публікації. Ми ж усі знаємо, що кожен успішний фільм повинен сприяти виходу новомодного сиквела, вірно?


Автор ілюстрації SitePoint/Natalia Balska.

Отже, давайте подивимося на підбірку вже цього року дюжини маловідомих фактів про CSS. Я впевнений, що багатьом з вас відомі, принаймні, деякі з них, але ви можете дати мені знати в коментарях скільки фактів виявилися для вас новими.

Примітка перекладача0. Так, я бачив опублікований пару годин тому переклад цієї ж статті. Але мені совість не дозволить видалити багатоденна праця з-за запізнення на пару годин :) загалом, на ваш суд.

1. Оригінальна стаття рясніє робочими демонстраціями з CodePen. Хабр, на жаль, не підтримує вставки з подібних ресурсів, а замінювати робочі динамічні приклади статичними картинками, думаю, не має сенсу. Тому стаття вийшла трохи «лисій» простирадлом, але, я сподіваюся, зацікавлені читачі будуть відкривати відсутні приклади посилання в новому вікні.

2. Хоча я маю безпосереднє відношення до верстки, переклад вийшов великим і не таким простим, як здалося спочатку. Зауваження щодо помилок, опечаткам, термінології і т. п. прохання надсилати особистим повідомленням в хабрапочту.

Читати далі →