1. Навіщо розробники IBM зробили цей інструмент
2. Сумісність з браузерами
3. Зв'язок дизайну і коду
4. Робота з цілої сторінкою
5. Принцип роботи
6. майбутнє

Від автора: сьогодні із задоволенням хочу вам представити новий open-source інструмент від IBM, який може допомогти в роботі з CSS Grid, під назвою CSS Gridish ! CSS Gridish бере специфікації дизайну сітки вашого продукту і робить кілька ресурсів, які ваша команда може використовувати.

Скетч файл з монтажними областями і настройками сітки / макета для дизайнерів

CSS / SCSS код із застосуванням CSS Grid і фолбека у вигляді CSS Flexbox для разрботчіков

розширення Google Chrome для перевірки вирівнювання сторінок

Мета - допомогти команді адаптувати CSS Grid якомога раніше і активувати більш складні макети. Продемонструвати універсальність інструменту можна прикладами сіток з Bootstrap , Carbon Design System і Material Design .

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Навіщо розробники IBM зробили цей інструмент

Нова специфікація CSS Grid відмінно підходить для веб-дизайну. Тепер дизайнери можуть приділяти осі Y стільки ж уваги, скільки і осі Х раніше. Різні проекти починають документувати перехід на CSS Grid.

Багато команд IBM прагнуть використовувати CSS Grid, але стикаються з проблемами. CSS Gridish вирішує ці проблеми.

Сумісність з браузерами

На даний момент у CSS Grid відмінна підтримка в браузерах (~ 75%). Однак безлічі продуктів все ще потрібно підтримувати старі браузери. Наприклад, ibm.com досі отримує 10% трафіку з IE. Підтримка старих браузерів забирає багато часу і сил.

CSS Gridish створює yourGrid.css, який використовує CSS Grid, але він також створює файл yourGrid-legacy.css. Цей старий файл зберігає тільки CSS Grid код, якщо браузер підтримує його. Якщо браузер не підтримує CSS Grid, користувач отримає Flexbox фолбек. Додайте додаткові класи в yourGrid-legacy.css, і ось вам зворотна сумісність!

Що робити, якщо більше не потрібно підтримувати старі браузери? Потрібно лише переключитися на yourGrid.css, що заощадить кілобайти.

Зв'язок дизайну і коду

З'явилися чудові інструменти, які створюють єдине джерело правди для дизайну і коду - React Sketchapp і Lona . Ці інструменти гарантують, що дизайнери і розробники працюють з одними компонентами.

Ми хочемо перенести єдність команди в сітку. Монтажні області для Sketch і код для веб-розробки генеруються з одного конфиг файлу. Конфиг файл сітки не бездоганний, але ми хочемо, щоб CSS Gridish dspdfk розмови про стандарти сітки в схожих інструментах.

Крім того, деталі дизайну легко губляться при переході в розробку. Тому ми створили розширення для Chrome, щоб можна було подивитися код. Розширення Chrome можна встановити в конфіг файл сітки команди, щоб всі бачили одну мітку і макет з файлу Sketch з однаковими гарячими клавішами (CTRL + G і CTRL + L). Розробникам подобається використовувати розширення з файлом Sketch, який вони реалізують. Дизайнерам подобається дивитися код веб-сторінок з його допомогою.

Робота з цілої сторінкою

За допомогою CSS Grid розробник може слідувати дизайну сітки, коли тільки створює перший шар HTML. Але все стає складніше, коли розробнику потрібно працювати всередині різних областей і в інших вузлах. Це пов'язано з тим, що display: subgrid все ще розвиває підтримку в браузерах.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

CSS Gridish обходить цю проблему, використовуючи вьюпорте одиниці ширини замість відсотків. Ви можете вкладати елементи .yourGrid-grid один в одного скільки завгодно, при цьому зберігаючи колонки і рядки сторінки. Єдиний знайдений нами мінус - браузери по-різному відображають vw одиниці зі скроллбар. Це можна вирішити за допомогою margin в сітці.

Принцип роботи

В якості вхідних даних для CSS Gridish потрібен тільки json файл css-gridish.json. Цей файл приймає специфікації дизайну вашої сітки і варіанти збереження вихідних файлів (де і як). Зараз CSS Gridish робить кілька припущень про дизайн вашої сітки:

Зовнішні роздільники в 2 рази менше внутрішніх

Головні колонки рідкі, а не фіксовані по ширині

Порада: для досягнення кращого результату в Sketch, рекомендую, щоб брейкпоінт, margin і роздільники сітки ділилися на висоту рядка.

CSS Gridish запускається в командному рядку за допомогою npx css-gridish. Після запуску команди створиться папка з усіма файлами, і команда може використовувати сітку! Чим гарний CSS Gridish, так це тим, що він спрощує роботу тим, хто вперше працює з CSS Grid. Після того, як користувачі вивчать класи, описані в документації, вони зазвичай будуть використовувати 2 правила:

. myElement {

grid - column: 1 / span 4; // Span four columns from first row

grid - row: 4 / span 8; // Span eight rows from fourth row

}

Фолбек Flexbox код працює так само, як і більшість grid фреймворків з БЕМ.

За замовчуванням код працює з рідкими колонками і фіксованими рядками. Корисні класи-модифікатори дозволяють працювати навпаки. Форми типу квадрата, що збільшується в залежності від ширини екрану користувача, можна створити з класу рідких рядків.

Один недолік в коді CSS Gridish - для роздільників не використовується CSS Grid властивість gap. Замість цього використовуються класи з padding, який в 2 рази менше роздільників. Так зроблено тому, що інструмент не може ігнорувати роздільники в ситуаціях типу background color і повнорозмірні медіа. Сподіваюся, в наступній версії специфікації CSS Grid вирішать це питання.

майбутнє

CSS Gridish націлений на те, щоб все більше продуктів брали CSS Grid якомога швидше, а перехід для користувачів і команд був набагато легше.

У довгостроковій перспективі це повинно допомогти розвитку ідеї двовимірних бібліотек компонентів. В індустрії склалася епоха бібліотек компонентів, які заповнюють ширину, куди їх поміщає користувач. Тепер за допомогою CSS Grid ми можемо створювати компоненти, які будуть заповнювати і висоту. Це відкриває додаткові творчі можливості для дизайнерів систем і гнучкість командам, які використовують інструмент. Використовуйте CSS Gridish і допомагайте в розробці. Ще стільки роботи!

Автор: James Y Rauhut

джерело: https://medium.freecodecamp.org/

Редакція: Команда webformyself.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Практика верстки сайту на CSS Grid з нуля