Інструменти для верстки

30

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

Верстати з зручністю

Інструменти для верстки дозволяє писати код швидше. Робити менше, а отримувати більше. Це ключове правила успішного розробника. Перше, що потрібно мати програму для написання коду. Тут є багато варіантів для вибору – від блокнота до комплексного пакету повністю візуальному створення сайтів. Блокнот в даному випадку є самим простим, хоча і неймовірно незручним способом писати код. Ніякої підсвітки, ніякого функціоналу і зручності.

Отже, вам потрібно вибрати програму для редагування коду. Notepad++ і SublimeText – найпопулярніші програми, які вибирають веб-розробники. Вони підтримують безліч плагінів. Підсвічування коду, підтримка синтаксису десятків мов, можливість згортання коду – все це базові можливості цих програм.

Також є більш потужні програми, які включають в себе тисячі готових сценаріїв і купу додаткових можливостей. Такі програми можуть бути платними. Купувати чи ні – справа ваша, але для серйозної розробки, це те, що потрібно. Хоча на слабкому комп’ютері такий софт запускати не варто.

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

Хороші інструменти і сервіси для швидкої і правильної верстки

WinMerge – ця корисна річ показує вам, які відмінності є в різних варіантів з версткою. Ви можете завантажити різні версії та програма покаже, де відмінності. Може стати в нагоді веб-аналітику.

Ultimate CSS Gradient Generator – інструмент, який обов’язково повинен бути в арсеналі фронтенд-розробника. Лінійні градієнти – хороше нововведення CSS3. Вони дозволяють навіть без зображень зробити дуже гарний дизайн для сайту. Але самому прописувати градієнти дуже складності. У них є безліч параметрів, таких, як: колір, поворот, колорстопы.

На прописування складного градієнта може піти півгодини-годину. Набагато простіше створювати їх у візуальному режимі. Саме таку можливість представляє даний сервіс. Він не тільки дає змогу краще розібратися в тому, як робити градієнти, але і генерує валідний кросбраузерність код, а також володіє підтримкою градієнта в старих браузерах і навіть в IE9. Сервіс дуже простий у використанні і безумовно заслуговує похвали. Користуватися ним можна тут: colorzilla.com/gradient-editor/.

color.hailpixel.com/ — ось такий цікавий сайт був знайдений мною на просторах мережі. Вірніше, сайтом це назвати складно. На цій сторінці ви зможете за рахунок пересування курсору миші отримувати мільйони різних квітів. Колір можна зберегти, можна прописати параметри вручну. Загалом, цей сайт може стати в нагоді як веб-дизайнерам, так і верстальникам, які постійно мають справу з кольором.

Рис. 1. Сервіс швидкої збірки кольорів

CSSReset – невеликий файл, який повністю скидає всі налаштування за замовчуванням для CSS. Наприклад, скидаються всі відступи. Також цей файл додає повноцінну підтримку нових HTML5-елементів. Корисно додавати в свої проекти, якщо ви не хочете самостійно прописувати подібні налаштування.

В інструменти для верстки сайту можна також віднести різноманітні генератори форм. Наприклад, Form Builder. В інтерфейсі цього сервісу ви налаштовуєте всі параметри і отримуєте код форми. Таким чином, ви можете економити час на верстці складних форм.

Moqups – неймовірне HTML5 додаток, яке дозволяє дуже швидко створити каркас на новій версії HTML. Не секрет, що більшість верстальників звикли створювати скелет по-старому – за допомогою звичайних, нічим не примітних блоків.

З появою нових стандартів стало більше правильних робити розмітку за допомогою елементів HTML5, тому що вони семантичні.

Fontsquirrel – мабуть, один з кращих генераторів шрифтів. Дозволяє створити повністю готову папку з файлами шрифту на основі лише одного ttf файлу, який ви йому надасте. Вам залишиться тільки скинути файли в свій проект і підключити шрифт.

На цьому з інструментами поки закінчуємо. Звичайно, тут представлені лише деякі корисні сервіси. Хотілося б ще відзначити сайт border-image.com/, на якому можна швидко згенерувати декоративну рамку і взагалі розібратися з цією властивістю.

Препроцессоры, системи збирання

Які ще є інструменти для верстки шаблону? Це деякі препроцессоры, постпроцессоры і системи складання.

Autoprefixer – CSS-постпроцесор, що звільняє вас від необхідності прописувати вендорные префікси. Не секрет, що багато веб-розробники ненавидять ці префікси. Використовуйте цей корисний інструмент, якщо ви з їх числа.

З препроцесорів можна відзначити SASS, LESS та Stylus. Це спроба додати програмування в CSS. З допомогою цих чудових інструментів можна створювати свої власні невеликі фреймворки та структурувати великі проекти. Звичайно, щоб працювати з препроцессорами, потрібно вивчити хоча б один з них.

Системи збирання – це ще одні чудові інструменти для полегшення роботи з версткою. З найбільш популярних можна виділити Grunt і Gulp. Завдяки цим системам ви можете перезавантажувати сторінку без оновлення, оптимізувати JavaScript і CSS код, стискати зображення і багато чого іншого. Найголовніше, навчитися працювати з ними.

Фреймворки, бібліотеки

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

Для вашого проекту також може стати в нагоді иконочный шрифт FontAwesome, який здобув популярність. Це сотні векторних іконок, які можна підключити до свого сайту.

Рис. 2. Иконочные шрифти – сучасний підхід до вставки іконок на свої сайти

Розглянуті нами інструменти показують, наскільки серйозний рівень вийшла веб-розробка. Можливо, у найближчі роки з’явиться щось нове, але вже на даний момент корисних програм і сервісів вистачає сповна.