unitscss

Единицы

Простой и красивый набор компонентов.

https://unitscss.com/

Документ

Английский / 日本語

Особенность

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

• Используйте быстро
  Все, что вам нужно сделать, это просто положить единицы. Несколько компонентов уже были подготовлены, и вы можете выбрать компоненты, которые вы хотите использовать, и применить их на своем веб -сайте.

• Просто и красиво
  Каждое компоненты красиво спроектированы. Дизайн будет периодически обновляться, мы не будем применять большие изменения, но применяем лишь небольшие изменения, такие как настройка маржи.

• Поддержка современного браузера
  Подразделения оптимизированы для использования в современном браузере, таком как Microsoft Edge, Google Chrome, Firefox, Safari, как насчет старых браузеров? ... Мне жаль.

• Отзывчивый веб -дизайн
  Мы используем адаптивный веб -дизайн, чтобы отобразить оптимизированный дизайн на всех устройствах.

• Периодическое обновление
  Единицы по -прежнему остаются бета -версией, она будет периодически обновляться в основной версии. Unitil Основная версия, мы добавим новые компоненты, оптимизируем исходные коды, настраивая его дизайн.

• Поддержка японца
  Потому что разработчики японцы, которые мы можем поддерживать на японском языке. Мы оптимизировали веб -страницы и обновляем документы, написанные на японском языке.

Установка

Сами подразделения могут быть загружены с GitHub, клонируя его или в виде формата ZIP, или вы можете загрузить его через NPM.

$ git clone https://github.com/kokushin/unitscss.git

$ npm install unitscss --save

Давайте загрузим необходимые файлы.

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:400,700 " >
< link rel =" stylesheet " href =" path/to/units.min.css " >

< script src =" path/to/units.min.js " > </ script > 

Использование

Напишите точные фрагменты HTML и дайте им правильные классы, начиная с uc- . Например, в примере ниже вы можете сделать компонент карты, прикрепленную с покрытым изображением.

 < div class =" uc-card _float " >
  < div class =" uc-card-image " style =" background-image:url(https://source.unsplash.com/random) " > </ div >
  < h3 class =" uc-card-title " > Sample card </ h3 >
  < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et. </ p >
  < div class =" uc-btn _primary " > < a href =" # " > Button </ a > </ div >
</ div >

Он будет отображаться в браузере так:

Демо

https://unitscss.com/themes/

Фрагменты

Пожалуйста, проверьте Codepen.

Скачать

Скачать Zip

GitHub

https://github.com/kokushin/units

Участник

@kokushin

Лицензия

Код и документация Copyright 2017 от Kokushin. Код, выпущенный по лицензии MIT.