Архив метки: css

Как не надо делать open-source фреймворки

Пост скорее не «пожаловаться», а как напоминание о том, какие проблемы могут быть в open-source проекте, который позиционирует себя как «The most advanced UX framework for enterprise applications».

Выбираю фреймворк для одного небольшого приложения. Наткнулся на Grommet (от HP) — https://github.com/grommet/grommet

Поразительно насколько недружелюбен продукт в точки зрения кастомизируемости и использования в целом:

  1. Использование SASS блокирует возможность изменения базовых переменных фреймворка по своему усмотрению.
    1. Проблема была в том, что встроенный кастомный шрифт не имел кириллицы. Да и в целом, не было необходимости в кастомной шрифте. Я захотел использовать системные, однако потерпел неудачу.
    2. Если бы это был Less или Stylus, то изменить базовый шрифт было бы просто как @import ‘~framework.less’ и $base-font: ‘…’. В SASS так сделать нельзя, т.к. значение переменной определяется в месте её использования.
  2. Развесистый список зависимостей в package.json, который тянет на 150 Мб и 7-8 тысяч файлов. В то время как просто хочется подключить фреймворк и использовать его компоненты, а не заниматься его разработкой. «Используй bower поставку» скажете вы, и будете правы, однако bower-поставка фреймворка лишена разбиения на компоненты. Придется подключать 1.5 Мб  JS + 220 Кб CSS (минифицированные).
  3. CSS не разбит на модули. Подключил CSS фреймворка — получай стили всех компонент, даже если тебе нужна только треть из списка всех компонент.
  4. Мало внятной документации по инструменту «быстрого старта» — grommet-toolbox. Из-за простой необходимости использования express js пришлось от него отказаться, т.к. он это не поддерживает.

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

Пришел к выводу, что проще собрать свой boilerplate из компонентов общего назначения: сборка, типографика, гриды, роутер и т.д.

Коробочный вариант «все в одном» приемлем, только если ты работаешь в компании, где он используется.

Internet explorer 10 (+ windows phone 8): проблемный z-index

Если у вас есть невидимые элементы управления:

ie10 example

 

на клик по которым надо что-то сделать, то учтите следующий баг на Internet Explorer 10 (который воспроизводится и на windows phone 8):

он игнорирует z-index «пустых» элементов.

То есть клик попадёт на красный элемент, а не на контрол, который расположен над ним.

Чтобы это поправить, можно просто добавить контролам стиль:

 background-color: rgba(0, 0, 0, 0); 

К слову, просто

transparent

не сработает.

Да, дорогой читатель, ослик всё так же держит верстальщиков в тонусе.)

Это решение совершенно случайно обнаружил тут.

Ускорение всех действий на Internet Explorer 10+ в Windows Phone

Для того, чтобы переходы по ссылкам, разнообразные кнопки, слайдеры и пр. быстро работали на windows phone необходимо сделать следующее:

1. Добавить мета-тег, удаляющий серое выделение активного блока:

 <meta name="msapplication-tap-highlight" content="no"/> 

2. На все активные элементы поставить следующие стили:


-ms-touch-action: none; /* IE 10 */
touch-action: none; /* IE >= 11 */
user-select: none;