Giter VIP home page Giter VIP logo

ui-kit's Introduction

task-two-ui-kit

Great UI-KIT for your site

Installation

  1. Clone repository
git clone https://github.com/Maksimus-Prime/task-two-ui-kit.git
  1. Install dependencies using npm (I use Node.js v6.10.2)
npm install

Run

Development

npm run dev

Production

npm run prod

ESLint

npm run eslint

Look at the result. You can look at simple site with elements from the UI-KIT as well.

ui-kit's People

Contributors

kinda-neat avatar

Watchers

 avatar

ui-kit's Issues

Console.log

Где-то в проекте он есть.

Уже вложенные блоки внутри блоков

Прошу обратить внимание на messaging, зачем тут два вложенных блока? У нас идеология, что каждый блок — в отдельной папке. так что тут либо разноси по разным компонентам, либо делай это все элементами :)

require img

Можешь пояснить зачем нужно
2017-10-05 11-33-21

font-family

2017-10-05 11-53-16

У тебя по-моему нигде Arial не указан.

А можно без float?

В некоторых местах используется float можно убрать. Это касается и первого макета. Тогда без него можно убрать и clearfix. Особенно если это нужно выставить два блока рядом. В этом случае можно просто менять display с inline-block на block и обратно.

Папку vendor не коммитят

Папку vendor, опять же, не коммитят, потому же, почему остальные зависимости. Надо использовать те же зависимости, но установить из через npm и получать через require

tick-box

Определенно нужно разбить на два отдельных элемента.

Папки node_modules не должно быть закоммичено

Папку с зависимостями проекта не коммитят в гит, вместо этого коммитят package.json с описанием зависимостей. Чтобы не хранить кучу файлов в гите. Часто там очень много файлов, я встречался с node_modules > 1 Гб.

Почистить main.js

Все подключаемые библиотеки импортить в тех компонентах, где они используются.
Jquery можно оставить глобально. И по возможности использовать import, а не require

Уйти от цифр в названиях

Например, шаги signup назвать по смыслу, что там в шагах делается. От цифр в именах файлов, классов и тд надо уходить по максимуму

Outline

Не убраны дефолтные outline у инпутов. Этот пункт есть в стандартах.

Инпут вываливается

В макете со всеми элементами конкретно layout-search-drop-user-profile-container-left__search выпадает за края.

На каждой странице должен быть всего один блок

Сейчас на каждой странице идет как минимум блок самой страницы и внутри блок с постфиксом content. А почему вложенный блок, а не элемент __content? И почему у index.pug целая куча влоденных блоков и это не в рамках всех страниц сделано (не в той же папке)? :)

Немного не валидно

.select2.select2-container.select2-container--default { width: 100% !important; }

Лучше через префикс указывать вид/тип компонента, а не через цифру .

элементы и модификаторы в БЭМ

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

Название модификаторов в БЭМе

.arrow-button__arrow_disabled_true
Получается, что как будто два модификатора на одном элементе: disabled и true. Также можно использовать дефис в этом случае. И конкретно здесь true можно убрать. Это будет уже достаточно ясно

Слайдеры.

На самом деле необязательное issue. Больше "на подумать", "Задание со звездочкой" и тд.

Попробуй объединить реализацию этих слайдеров в один компонент. Который в зависимости от переданных компонентов будет выдавать нужную реализацию слайдера. А тебя щас два отдельных элемента для каждого слайдера и у них есть общие классы со схожими стилями. Это же дублирование и чем больше слайдеров, тем больше это будет проявляться и тем больше придется копипастить js,pug,less файлы из одной папки в папку для нового слайдера и там все подправлять. Они по этому и названы щас не очень: slider-a slider-b.

PS. Есть еще 1 косячок
2017-10-05 11-02-44

Но это ошибка в выбранной библиотеке, наверно, не целесообразно будет ее править.

Папку public не коммитят

public не коммитят, потому что её контент вычисляется динамически и

  1. Нет смысла хранить то, что можно собрать одной командой на основе имеющегося кода
  2. Там может быть много файлов, которые будут отжирать место на диске, долго скачиваться и так далее
  3. При мёрже веток постоянно будут конфликты

Вместо этого в package.json добавляют команду build, при помощи которой (npm run build) эта папка собирается из исходников

Календарь

TODAY ( у тебя "ANOTHER DAY") должна быть кнопкой, которая кликается и по клику выставляется текущая дата. Да, это сложно понять по макету, но это так...

БЭМ в main-page

У тебя получается, что два блока в main.pug: main-page и main-page-content. Можно сделать через один.
И left - right у main-page-content будет модификатором.

eslint должен быть унаследован от airbnb

Обязательно проверь, что все правильно настроено, сделай специально какюу-нибудь ошибку именно из правил airbnb и должен тебе линтер подсветить в IDE это и через консоль выдать варнинг. Сейчас у тебя много мелочей из-за которых ощущение, что ты вообще линтером не проходился по проекту :)

Видеоплеер

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

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.