Домашняя » Инструментарий » 10 легких альтернатив Bootstrap & Foundation

    10 легких альтернатив Bootstrap & Foundation

    Выбор подходящего фреймворка, который идеально подходит для ваших проектов, может быть немного ошеломляющим - есть из чего выбирать. Возможно, вы захотите выбрать популярные варианты, такие как Bootstrap или Foundation, но если ваш сайт будет довольно простым, вам не понадобится большинство строительных блоков и материалов включен в пакет по умолчанию.

    Хорошая новость заключается в том, что есть несколько альтернатив, которые значительно уступают Bootstrap или Foundation. Большинство из этих платформ поставляются с только правильное количество стилей и компонентов чтобы помочь вам начать работу, позволяя вам расширять их в нужном вам направлении для вашего проекта.

    Вот 10 легких альтернатив Bootstrap и Foundation что вы должны использовать для создание небольших сайтов.

    Больше на Hongkiat.com:

    • Начало работы с Twitter Bootstrap
    • Использование Bootstrap 3 с Sass
    • Инструмент начальной загрузки: создание макетов начальной загрузки HTML
    • Работа с плагином Bootstrap: модальное окно
    • Bootstrap Tool: создайте мегаменю с YAMM3

    1. Скелет

    Скелет наконец-то получил подтяжку лица. Это полная реконструкция с нуля, и все же она все еще такая же легкая, как и раньше. Новая сеточная система Skeleton теперь использует философию, ориентированную на мобильные устройства, которая гарантирует, что макет занимает центральное место независимо от того, насколько мал экран устройства.

    Все компоненты, которые были включены в более раннюю версию - кнопки, формы и элементы ввода - все еще присутствуют, но основные стили оформления теперь установлены в рем единица измерения.

    2. CardinalCSS

    CardinalCSS - это CSS-фреймворк, построенный с акцентом на производительность, удобочитаемость и, самое главное, удобство обслуживания CardinalCSS использует некоторые современные подходы, такие как mobile-first, для формирования сетки; и CSS Box Model, которая позволяет легко определять ширину и высоту элемента.

    CardinalCSS также поставляется с несколькими вспомогательными классами, которые позволяют быстро применять стили к элементу, например, буквицы который применяет эффект буквицы для первого символа в абзаце.

    3. ConciseCSS

    ConciseCSS - это фреймворк CSS - без раздувания. Это компактный фреймворк, построенный на основе Sass, LESS и Stylus, который прокладывает свой золотой путь к удобству сопровождения CSS. Но, если вы предпочитаете простой простой ванильный CSS, вы также можете иметь это.

    Точно так же ConciseCSS также поставляется с базовыми стилями для основных элементов, таких как заголовки, абзацы, таблицы, формы и набор классов помощников для создания пользовательского интерфейса кнопки..

    4. PowertoCSS

    PowertoCSS - это легкий и прочный каркас внешнего интерфейса. Имена классов, которые используются для построения сетки и применения стилей, просты и легко запоминаются, например,. .кнопка. Вы также можете добавить свою собственную тему. Отправляйтесь в их StarterKit, чтобы начать.

    5. Сильный

    Furtive - это CSS-фреймворк для мобильных устройств, созданный на основе передовых веб-стандартов, таких как использование Flexbox для сетки и рем блок для определения размеров элементов (включая размер шрифта). Furtive сохраняет небольшой размер CSS, не поддерживая старые браузеры (* cough * Internet Explorer), поскольку они требуют некоторого взлома CSS. Следовательно, Furtive является идеальной основой, если вы разрабатываете сайт для будущего.

    6. BassCSS

    BassCSS предлагает легкий набор стилей базовых элементов, утилит, макетов и стилей цвета в модульной форме для создания адаптивного веб-приложения. Файлы SCSS включены, чтобы легко настроить стиль. Вы можете играть с типографикой, пробелами, точками останова и элементами пользовательского интерфейса.

    7. Мюллер

    Mueller - это модульная адаптивная сеточная система, построенная на основе Sass и Compass. С помощью Мюллера вы можете построить сетку, добавив классы прямо к элементам HTML, или, если вы предпочитаете, чтобы элементы HTML были аккуратными и чистыми, используя Сетка () функция. Сетка Мюллера может использоваться совместно с библиотекой Masonry Javascript для создания макета в стиле Pinterest.

    8. Туктук

    Tuktuk - это уникальное имя для фреймворка. По сравнению с Bootstrap или Foundation, Tuktuk намного легче, поскольку в него входит только необходимое количество компонентов для создания презентабельного веб-сайта, в том числе для системы сетки, базовых стилей для типографики, таблиц и нескольких пользовательских интерфейсов, таких как navbar и модальности.

    9. База

    База построена на основе LESS и Sass и включает в себя только самые важные компоненты для создания веб-сайтов: сетку и базовое оформление элементов HTML. Base не поставляется с компонентами Javascript, но обеспечивает большую совместимость с браузером, так что работает даже с IE7.

    10. Тост

    Последний из нашего списка - Тост. С помощью таблицы стилей SCSS, включенной в пакет, Toast позволяет легко настраивать имена классов сетки, желоб и даже базу столбцов. Например, если вы хотите, чтобы сетка состояла из 9 базовых столбцов вместо 12, вы можете сделать это. Toast - это минимальный CSS-фреймворк с очень гибкими конфигурациями, удовлетворяющими вашим требованиям..