display-bem's People
display-bem's Issues
Use media query for specific element not for block
Использовать media query для конкретного элемента
.block
&__el1
.....
@include tablet
&__el2
.....
@include tablet
вместо
.block
.....
@include tablet
&__el1
....
&__el2
Use sass import indead of gulp concat
Создай основной файл для sass style.sass и импортируй в нем нужные sass файлы
Make site mobile friendly
- Добавить meta tag https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
- Поправить отображение на мобильных устройствах
- Использовать media query для tab-content__item-link что бы выводилось по 4, по 3(33% от ряда), по 2 в ряд(50%) в зависимости от размеров экрана,
- Использовать media query для пары других блоков, выбирай на свое усмотрение
Menu and buttons hover animation
Сделать плавную анимацию на ховер для меню и кнопок
Для меню добавить при наведении нижнюю полоску 3px
Fix header style
Удалить селектор .header > *
Можно использовать
- Переменную $headerElemPaddingTB: 30px и установить отступы для конкретных блоков header__logo, header__social-mendia ....
- Создать новый класс header__item c нудными оступами
Make the footer menu independent of the main menu
В фоотере меню должно быть не зависимым от главного меню, должно иметь уникальное имя
Move all styles to the separate folder
Переммести все стили в отдельную папку sass or style
Весть js в отдельную папку js/scripts/src
JS вместе со стилями обычно помещают если используются bem-tool, он в основном подходит для очень больших проектов подходит. JS вместе со стилями актуально коглда используют фреемворки с компонентным подходом
Learn flexbox
Потренировать использовать flex переписав home.html с использованием flexbox для большинства элементов
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
JavaScript
- Для элементов jQuery использовать префикс
$. var carousel = $ ('.carousel'); - Не использовать анонимные функции длиннее 2-3-х строк. При ошибке не получим имя функции в отладчике, сложнее читать код, нельзя переиспользовать. Лучше объявить все функции в одном месте.
- Обработчики лучше вешать через on('event', handlerFn)
- Еще лучше использовать делегирование событий. Тогда будет создан один обработчик и будет работать для элементов добавленных после навешивания обработчиков https://learn.jquery.com/events/event-delegation
Use mixin for font size
Использовать миксин для размера шрифта должен принимать размер в пикселях и выводить размер в em с фолбэком на px
.el{
@include font-size(16px);
}
Должен быть вывод
.el{
font-size: 16px;
font-size: 1em;
}
Mixins for media query
Создать миксины для часто используемых размеров экранов, пример tablet, desktop
и использовать так
.block__items{
font-size: 10px;
@include tablet{
font-size: 12px:
}
@include desktop{
font-size: 14px;
}
}
Global box-sizing: border-box;
Применить box-sizing: border-box; для всех элементов
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.