Быстро-CSS: библиотека для быстрой разработки CSS

Быстро-CSS — это библиотека, которая позволяет быстро писать CSS с помощью классов. Проект использует SCSS и Gulp для сборки, что сокращает время, необходимое для написания большого количества базовых стилей CSS.

Как использовать Быстро-CSS в проекте

1. Клонируйте библиотеку на локальный компьютер:

npm install quickly-css --save

2. Скопируйте основной код библиотеки в свой проект:

• Основной код Быстро-CSS находится в папке lib в виде SCSS-кода.
• Скопируйте папку lib в свой проект.
• В HTML-файлах, где требуется использовать CSS, импортируйте файл index.scss из папки lib.

3. Используйте npm для импорта:

• Установите Быстро-CSS с помощью команды:

npm install quickly-css --save

• Импортируйте Быстро-CSS во Vue:

import Vue from 'vue'

//sass
import 'quickly-css/lib/index.scss'

// или
import 'quickly-css/dist/quickly-css.min.css'

• Используйте нативный импорт:

<link src="node_modules/quickly-css/dist/quickly-css.min.css">

4. Основные примеры использования:

• Пример использования класса для создания элемента div с красным текстом:

<div class="w-full text-red">test</div>

Это эквивалентно следующему коду:

<div class="test">test</div>
<style>
.test {
  width: 100%;
  color: #f35958;
}
</style>

5. Создание трёхколоночной структуры с помощью Быстро-CSS:

• Создайте трёхколонную структуру с нуля:

<style>
  .wrapper {
    display: flex;
  }
  .left, .right {
    width: 200px;
    background: #f2f2f2
  }
  .center {
    flex: 1;
    background: #188eee
  }
</style>
<section class="wrapper">
  <div class="left">1</div>
  <div class="center">1</div>
  <div class="right">1</div>
</section>

• С использованием Быстро-CSS:

<!-- use quickly-css -->
<style src="quickly-css/dist/quickly-css.css"></style>

<section class="flex j-between">
  <div class="w-200"></div>
  <div class="flex-1"></div>
  <div class="w-200"></div>
</section>

Преимущества Быстро-CSS:

• Практически не нужно создавать теги style для написания CSS.
• Логика кода становится более понятной.
• Легко поддерживать.
• Размер файла после сборки составляет около 42 КБ.

Для получения дополнительной информации посетите документацию проекта.

Локальная сборка:

Чтобы собрать проект локально, выполните следующие шаги:

1. Скачайте исходный код проекта с помощью git clone:

git clone https://gitee.com/zj1024/quickly-css.git

2. Установите зависимости с помощью npm:

npm install

3. Соберите проект с помощью следующей команды:

npm run build

Проект содержит следующие файлы и папки:

• Blog.md — журнал обновлений.
• CONFIG.md — описание конфигурации проекта.
• DOC.md — документация.
• LICENSE — лицензия.
• README.md — информация о проекте.
• dist — папка с собранными файлами.
• gulpfile.js — файл конфигурации Gulp.
• lib — папка со стилями.
• package-lock.json — файл блокировки зависимостей.
• package.json — конфигурационный файл npm.