Рубрика «верстка» - 10

image

Раньше термин «компьютерная грамотность» по своей сути означал умение работать с офисным пакетом, но жизнь не стоит на месте, и теперь всё больше экспертов (и даже звезда НБА Крис Бош) заявляют о том, что крайне важным навыком для широкого круга людей становится умение программировать.

При этом программирование — огромная область знаний, только небольшая часть которой может действительно пригодиться обычному человеку (то есть «не-технарю»). Мы считаем, что основу «новой компьютерной грамотности» должно составить знание вёрстки. В сегодняшнем топике мы рассмотрим примеры того, как изучение веб-технологий может помочь представителям не-технических профессий.Читать полностью »

голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о «липких» блоках, новом свойстве для изображений object-fit, продвинутом использовании CSS-счетчиков, ключевом слове currentColor, и о том, есть ли анимация в z-index.
Читать полностью »

Пришла мне тут как-то мысль освоить PHP, а, как известно, лучший способ изучить язык – это создать на нем велосипед фреймворк. При ковырянии в различных форумах и топиках заинтересовала меня одна методология, которую пропагандируют в уважаемой компании «Яндекс» — БЭМ. Кто ещё не в курсе этой методологии, почитайте на официальной страничке. Так же на Хабре есть публикация «Верстка для самых маленьких. Верстаем страницу по БЭМу» от читателя xnim, в котором все объяснятся на конкретном примере. «Яндекс» написали свои модули и скрипты сборки проектов, однако выполнены они все на Node.js, а вот на PHP обнаружить что-то подобное мне не удалось (хотя, признаюсь честно, я особо и не искал). К тому же, PHP, как объектно-ориентированный язык, дает интересные возможности.

BemPHP: реализация методологии БЭМ средствами PHP - 1
Читать полностью »

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design».

Атомарный веб-дизайн - 1

Мы не проектируем страницы, мы проектируем системы компонент. — Stephen Hay

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

Многое было сказано насчeт создания систем дизайна, и наибольший акцент делается, в основном, на установление цветов, типографии, сеток, текстур и т.п. Такой тип мышления, несомненно, важен, но я чуть меньше заинтересован в этих аспектах дизайна, потому что, по большому счeту, они всегда субъективны. В последнее время меня больше озадачил вопрос о том, из чего состоят наши интерфейсы, и как мы можем проектировать их более систематично.
Читать полностью »

Существуют разные подходы для организации sass-архитектуры, какую бы вы не выбрали, главное, чтобы она была.

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

Bem, Smacss, Oocss, Organic-css должны давать вам гибкость мысли, чтобы построить свой проект.
Читать полностью »

Одиннадцатиклассница, или тестируем баги вёрстки - 1

В современном вебе несправедливо мало внимания уделяется хоть сколько-нибудь автоматизированному тестированию UI. Особенно это касается статической вёрстки. На проекте 2ГИС Онлайн мы попытались частично восполнить этот пробел. Какие полезные практики мы приобрели, и о каких хороших библиотеках мы узнали, расскажем далее.
Читать полностью »

При верстке макета всегда всплывает множество интересных и потенциально проблемных моментов, которые казались дизайнеру элементарными, но на самом деле таили за собой опасное. Все это можно было бы предотвратить, если бы клиент не строил из себя архитектора всей системы, а дизайнер относился к сайтам не как к журналу, а как к сайтам, продумывая взаимодействие с пользователем, создавая грамотную архитектуру, которая логически непротиворечива и действительно дружелюбна к пользователю. Нужен кто-то, кто обладает определенной IT-культурой, в то же время является и дизайнером, и верстальщиком, и немного программистом, даже архитектором БД. Наверное, это тот, которого все называют UI/UX-дизайнером. Такого человека сложно найти, стоит он дорого и путь к такому званию долгий. Поэтому в типичном случае все происходит проще и вместо инженерного подхода наблюдается некоторая разновидность подхода эволюционного. К сожалению, этого бывает достаточно, это даже можно поддерживать, но только если вы не перфекционист.
Читать полностью »

голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о градиентных границах, режимах наложения, о том, как рациональнее сверстать стандартную иконку меню. А так же откроем для себя заново старое css-свойство visibility и рассмотрим новое медиа-выражение @Supports.
Читать полностью »

На Хабрахабре уже не раз поднимался вопрос о том, что популярные на сегодняшний день жизненные циклы разработки веб-интерфейсов, прямо говоря, устарели. Последний раз его обсуждали в публикации «Дизайн в браузере», но так и не пришли к единому мнению.

Настало время наконец-то найти ответы на два главных вопроса: “Кто виноват?” и “Что делать?” в вечной борьбе дизайна и верстки…

Дизайн vs. Верстка?
Читать полностью »

Доброго всем дня!

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

Основным достоинством LaTeX изначально являлось освобождение пишущего от необходимости думать о расположении текста на страничке: автор пишет контент, а движок размещает всё в нужных местах.

Отсюда непреодолимое желание начать сверлить пилой и пилить буравчиком решить при помощи LaTeX задачу, требующую полного контроля расположения текста на странице. Классический пример — вёрстка визиток, которой мы и займёмся.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js