Git Product home page Git Product logo

design-system-15's Introduction

bem

Дизайн система

В этом репозитории находится мое решение тестового задания «Реализуйте дизайн-систему» для 15-й Школы разработки интерфейсов (осень 2019, Москва).

Правила дизайн-системы описываются в терминах методологии БЭМ. Для обозначения сущностей интерфейса используется соглашение по именованию.

Инструменты

  • Yarn
  • Webpack
  • PostCSS
  • Autoprefixer
  • Mocha
  • Karma
  • Chai
  • Eslint
  • Prettier
  • Stylelint
  • Babel
  • Browserslist (default)

Команды CLI

Для использования команды yarn необходимо установить Yarn

yarn install - установка зависимостей

yarn dev - запустить проект локально. Адрес локального сервера http://localhost:8080/[pagename]

yarn build - сборка проекта.

yarn test - запуск тестов

Файловая структура

├── build - собранные файлы проекта
├── node_modules - node.js пакеты
├── res - дополнительные ресурсы, собираются в папку build*
│   └──  img
├── src
│   ├── templates
│   │   ├── collect.html
│   │   ├── content.html
│   │   ├── content-blocks.html
│   │   ├── index.html
│   │   ├── product.html
│   │   └── template-layout.js - разметка страниц в формате BEMJSON
│   ├── script.js - код реализующий интерактивность блоков
│   ├── style.css - стили для всех блоков и модификаторов
│   └── template-engine.js - функция шаблонизации
├── test
│   └── test.js - набор тестов для шаблонизатора
├── .editroconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── karma.conf.js - конфигурация тест раннера
├── package.json
├── postcss.config.js
├── README.md
├── wallaby.js
├── webpack.common.js - основная конфигурация сборщика
├── webpack.dev.js - конфигурация для разработки
├── webpack.prod.js - для полной сборки проекта
├── yarn.lock

Описание

Пакетный менеджер

В проекте используется пакетный менеджер Yarn из за его надежности и скорости установки пакетов.

Сборщик

Собирается проект при помощи Webpack из за его популярности, большого количества дополнительных инструментов и обширной документации.

Линтеры

За качеством кода слежу при помощи stylelint для css, eslint и prettier для JavaScript. .editorconfig контролирует кавычки, отступы и переносы строк.

Стили

Основа стилевого оформления блоков дизайн системы базируется на методологии БЭМ и кастомных свойств CSS. Для упрощения написания стилей используется PostCSS и плагины

  • autoprefixer - для автоматической расстановки префиксов в слабо поддерживаемых браузерами свойствах
  • postcss-nested - для возможности использовать & при написании модификаторов блоков/элементов.

Шаблонизатор

Шаблонизатор это переписанная в синтаксисе ES6 версия этого репозитория. Используются только самые необходимые функции. Шаблонизация происходит на клиенте. Принцип работы. В импортируемую функцию из файла template-engine.js передается объект в синтаксисе BEMJSON. В файле src/templates/template-layout.js пример работы функции и все необходимые демонстрационные страницы. test/test.js тесты для шаблонизатора.

Тесты

Для тестирования используется тест фреймворк mocha в связке с karma, chai и babel для ES6 модулей. Можно использовать wallaby.js.

Лицензия

MIT

design-system-15's People

Contributors

dependabot[bot] avatar wwwtsv avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.