Матвей Земсков

Заметки веб-мастера

Четверг, 27 февраля 2020 21:37

Milligram.css – Минималистичная библиотека для frontend-разработчиков

Оцените материал
(2 голосов)

В пользовательских CSS-библиотеках нет недостатка – вы можете выбрать любую: от Bootstrap до Foundation. А если вам нужна простая и легкая библиотека для использования в новых проектах? Многие из существующих CSS-библиотек не подойдут, так как они тяжелы изо того, что они содержат излишние возможности. Хорошо, что есть Milligram – супер-легкая альтернатива, которая «весит» всего 8 Кб в сжатом виде. Вы можете установить его через Bower или NPM, также загрузить и разместить локально или подключить через CDN.

Milligram.css – Минималистичная библиотека для frontend-разработчиков

По умолчанию библиотека построена на основе Normalize, поэтому вам нужно будет включить и эту библиотеку тоже. На домашней странице Milligram есть удобное руководство по работе с Milligram, которое поможет вам быстро освоиться.

Если вашей целью является его тестирование, попробуйте подключить файлы библиотеки непосредственно из действующего CDN, а не загружать их локально. Таким образом, вы сможете настроить пример проекта в CodePen или другой облачной среде IDE.

Библиотека использует бесплатный шрифт Roboto (https://fonts.google.com/specimen/Roboto), размещенный Google Fonts, для всего текста. Вы можете использовать Milligram без Roboto, но тогда ваши тексты не будут выглядеть так же изящно.

Дополнительная возможности по нормализации и использование шрифта Google могут показаться ненужными. Но ведь все они могут быть размещены на внешних CDN, поэтому вам не нужно беспокоиться о времени их загрузки с вашего сервера.

Для всех основных элементов страницы в Milligram по-умолчанию есть свое форматирование. Например, его имеют:

  • Заголовки и абзацы
  • Нумерованные и маркированные списки
  • Цитаты
  • Таблицы
  • Поля формы
  • Изображения с подписями
  • И еще кое-что!

Загляните на домашнюю страницу Milligram.css, чтобы найти примеры исходного кода и получить ссылки на CDN. Вы также можете увидеть демонстрацию всех встроенных стилей Milligram для основных элементов страницы, которые в может начать использовать в индивидуальных стилях вашего проекта.

Демо-страница

Оригинал статьи: Milligram.css – Minimalist Frontend Library for Developers

Перевод: Земсков Матвей

Прочитано 3430 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх