Верстка \ HTML&CSS

Как мы создали свой frontend фреймворк MarsMan (и зачем)

От автора: для MarsBased 2016 стал годом настоящих испытаний. Весь год мы работали над 16 разными проектами. Я устроился на полный рабочий день только в июне, но сразу был вовлечен в большую часть проектов на этапах дизайна, UX и frontend разработки.

Продолжить чтение

Верстка \ CSS 3

Улучшаем читаемость CSS с помощью пользовательских свойств

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

Продолжить чтение

Верстка \ CSS 3

Создание доступных чекбоксов и радиокнопок на чистом CSS

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

Продолжить чтение

Верстка \ CSS 3

Как создать hover эффект на чистом CSS, привязанный к направлению курсора

От автора: несколько уроков по созданию hover эффектов на чистом CSS, привязанных к направлению курсора. Уроки предназначены для тех, кто имеет хотя бы базовые знания HTML и на продвинутом уровне знают CSS/SASS.

Продолжить чтение

Верстка \ CSS 3

Как работает функция calc()

От автора: CSS3 функция calc() позволяет выполнять математические операции над значениями свойств. Можно, например, не задавать ширину элемента в статических пикселях, а использовать функцию calc(), чтобы указать, что ширина складывается из двух числовых значений.

Продолжить чтение

Верстка \ HTML&CSS

Создание доступного вспомогательного тултипа

От автора: сегодня один из тех дней, когда мне пришлось загуглить очередной вопрос по доступности. Я работаю над новым проектом под названием Provata. Передо мной стала задача создать прикольный и, казалось бы, простой вспомогательный тултип, который пояснял бы читателям/пользователям, что такое Framingham calculator.

Продолжить чтение

Верстка \ CSS 3

Простое использование CSS Grid

От автора: возможно, вы слышали о CSS Grid, так давайте попробуем его. Может быть, вы не знали, с чего начать. Как учить CSS Grid? Rachel сделала замечательную серию демонстраций по Grid. Как только вы изучите основы, вам будет сложно понять, где использовать сетки. На днях я игрался с сетками и наткнулся на довольно простой пример

Продолжить чтение

Верстка \ HTML5

Правила использования ARIA в HTML

От автора: Web Accessibility Initiative Accessible Rich Internet Applications Suite или WAI-ARIA, или просто ARIA – набор инструментов и руководящих принципов по повышению доступности контента и приложений. В частности технология включает набор атрибутов для HTML элементов, которые вставляют в них семантическую информацию, считываемую вспомогательными технологиями.

Продолжить чтение

Верстка \ HTML5

HTML и HTML5 – в чем разница?

От автора: язык гипертекстовой разметки или просто HTML – стандартный язык для создания сайтов. Как и все в мире технологий, HTML с момента появления в конце 1980-х очень быстро развивался. Новичкам в программировании следует учить последнюю версию языка – HTML5. Однако глубокое понимание эволюции языка поможет новичкам и профи оценить прошлое, настоящее и будущее веб-разработки.

Продолжить чтение

Верстка \ CSS 3

Обратный порядок элементов с помощью CSS Flexbox

От автора: CSS становится все более мощным инструментом. Мы почти дошли до той точки, когда порядок HTML элементов на странице не будет важен с точки зрения отображения. С помощью CSS сейчас можно создавать любые макеты, маленькие и большие. Забудем про семантику и доступность, на днях я думал, а можно ли инвертировать отображаемый порядок элементов только с помощью CSS. Раньше для этого нужно было менять DOM.

Продолжить чтение