Метка «markup»

Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

Читать полностью »

image

Когда смотришь на обилие CMS систем, то кажется, что не существует такой деятельности в сети, для которой не существовало бы сопутствующего Web-приложения. Для некоторых же областей количество приложений просто зашкаливает — для совместного редактирования документов (WIKI) их больше двух десятков. Выбирай и пользуйся. Наверняка что-нибудь хорошее найдешь.

Ну, в общем, у меня не получилось.
Читать полностью »

Возможно вы сочтете это глупостью, но я не люблю IDE. Обычно всю работу проделываю в vim+tmux+терминал. Я признаю все преимущества IDE, просто мне удобнее в хорошем текстовом редакторе. Но речь не об этом.

Когда я пишу что-нибудь под андроид — я часто правлю XML (разметку, стили, строки, ...). Так вот в текстовом редакторе это делать не очень удобно. И я решил потратить пару часов и написать генератор XML на основе упрощенного языка разметки (типа lesscss или stylus для CSS). Все-таки NIH — очень уж соблазнительный стимул.Читать полностью »

CSS-свойство position:fixed в Mobile Safari сносно работает начиная c iOS 5. В Android родной браузер частично понимает это свойство начиная с версии системы 2.1, адекватно — с 2.2, полная поддержка — с 3.0. Подробнее: таблица поддержки position:fixed.

HTML:

<div id="topbar">Fixed Title</div>
<div id="content">
	<h2>Start</h2>
	<p>Main content text </p>
	...
	<p>Main content text </p>
	<h2>End</h2>
</div>
<div id="bottombar">Fixed footer</div>

CSS:

#content{
	padding: 50px 0; /* отбиваем высоту баров, чтобы не перекрывать контент вверху и внизу страницы */
}
#topbar,
#bottombar {
	position: fixed;
	left: 0;
	width:100%;
	height: 50px; /* фиксируем высоту для простоты */
	line-height:50px;
	background:#eee;
	text-align: center;
}
#topbar {top: 0;}
#bottombar {bottom: 0;}

Теперь в современных смартах у нас topbar и bottombar «прибиты» соответственно к верху и к низу окна. Проблема позицонирования при первом скролле в iOS решается мини-Javacript'ом:

window.scrollBy(0);

Читать полностью »

Про верстальщиков и дизайнеров
— Если ехать все время на запад, то солнце никогда не взойдет
— Быстро ехать?

Без прелюдий

На мой взгляд, дизайнер должен пройти по следующему пути развития:
1 стадия. Дизайнер может сделать простой концепт, на котором разместить лого заказчика, расположить меню сайта и оформить текст компании. Совет для начинающих дизайнеров: вставляйте реальный текст о компании. Если у вас нет текста о компании, то просите его у заказчика, если не дает, то пишите сами. Многие заказчики видят не только композицию, которую вы пытаетесь показать, но так же еще и любят почитать с «картинки».
2 стадия. Дизайнер, который умеет проектировать интерфейс. Помимо концепта страницы дизайнер может спроектировать интерфейс проекта.
3 стадия. Дизайнер может создать концепт для сайта, спроектировать интерфейс и все это дело самостоятельно сверстать. Да, именно самостоятельно сверстать, без помощи верстальщика.
4.…
Читать полностью »


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