klierik

@Roger, @Bassline, Я не сразу использовал Grunt. В тот момент когда была написана данная тема, я использовал $ lessc и мониторинг файлов на базе другого ПО. На данный момент сибираю все Grunt`ом. Спасибо что обратили на этой внимание. Обновил пост. понятия не имею что это.

Grunt я предлагал для тех кто хочет углубится в среду разработки и получить знания, которые позволят в будущем работать одновременно с многими проектами используя более гибкие инструменты благодоря консоле, чем аналогичное ПО с интерфейсом. А вот касается lesscss.org - то с ним, все таки, проще. Не говоря о софте. Каждый для себя сам выберает насколько глубоко хочет углубится в обучении

в таком случае рендеринг страницы будет проводится по правилам QuirksMode Не обязательно. Но мне свойственно закрывать < img src="..." /> так как привык и визуально при быстром чтении кода слеш помогает быстрее распознать тег как закрытый. Вообще если валидатор не ругается в рамках определенного стандарта, то все будет окей.

1. в начале переключить режим браузера в режим эмуляции 2. вернутся на таб с инспектором

можно попробовать. я с ним не работал. я использовал 960 последний раз пару лет назад. надо пробовать...

набросок с рабочей средой LESS 2 CSS: https://github.com/klierik/htmlforum-fabrique-example Так же мини-мануал для что бы оно заработало (мануал написан для консоли в среде osx/linux/*nix систем): Grunt compile environmentRequirements- http://nodejs.org/- http://gruntjs.com/getting-started$ npm install -g grunt-cli Open skin folder (перейти в директорию с проектом)$ cd /path-to-project-folder/htmlforum-fabrique-example Run install (запустить команду в консоли для установки модулей)$ npm install Compile less (для компилирования less в css)$ grunt less Watch less (мониторинг изменений файлов и автоматический запуск компилирования less в css)$ grunt Как собрать (сбилдить) bootstrap Перейти с директорию в которой хранится bootstrap $ cd/htmlforum-fabrique-example/bootstrapЗапустить установку модулей $ npm installСобрать/сбилдать bootstrap из исходных файлов $ grunt distПодробнее о bootstrap: https://github.com/twbs/bootstrap

<div class="clear"></div>это старый родход. вместо него корректнее использовать сброс обтекания через :after .wrap span {}для того что бы применить правило, браузер в начале выберет все <span> а потом каждый опросит о родителе. .wrap .title { ... } будет правильнее .subscribe {border-bottom: 1px solid #b79257 !important;background: url(images/subscribe.png) no-repeat !important;}тут 2 строчки и в каждой ошибка. 1) что бы не требовалось использование !important, в данном случае правила для этого блока должны идти после .wrap{} в CSS файле. 2) фон для всех блоков поместить в один файл и реализовать через Sprite. <p class="login"><input name="login" required></p><p class="password"><input name="login" type="password" required></p><p class="checkbox"><input name="login" type="checkbox" value="remember"><b>Запомнить меня</b></p><p class="enter"><button type="submit"><span>Войти</span></button></p>Использование тега <p> -- не по назначению. <p> -- это абзац, а для новой строки достаточно <div> <br />Данный тег использовать в оформлении ошибка. Для новой строки есть div ul>li и прочие конструкции. .wrap {}Многим блокам применяется этот клас, но я так и не понял зачем. Он ничего не делает, его стили наоборот сбрасываются, в чем смысл? В вёрстке не надо достигать 1:1 с макетом для контентных данных так как это избыточно. В реалиях никто это повторять не будет. В блок прийдет текст как есть без каких либо сбросов и тому подобного. Так что это: http://take.ms/HDeej избыточная робота которая не будет иметь ничего общего в реальной ситуации. .faq_body_in -- этот блок можно было бы сделать UL>LI .wrap.tags -- О_О у меня даже мыслей никогда не было именно так реализовать облако тегов. Посмотрел бы как это делают -- проще и не заморачиваются. Всё что требуется в данном случае так это нечто типа: <a href="#" style="font-size: 120%">CMS</a>, значение выставляется логикой серверно скрипта. .nav li .first-child.nav li > :first-child {} -- не? В общем работа вроде и не плохая, но большое кол-во ошибок допущено что бы сделать макет 1:1. Некоторые подходы устарели. Куча лишних классов, структура сайта реализована не продуманно, не оптимально. Поддерживать http://testx.96.lt/wev_ref2_style.css невозможно. Никакой тебе структуры, комментариев, выделение блоков, отступа строк для формирование глубины. Пример читабельного CSS файла: http://take.ms/uTel0 Хотя я рекомендую начать осваивать LESS/SASS, так как оформлять стили с их помощью удобнее. Так же почитать про ошибки по ссылке в подписи.

а про ноутбуки и планшеты ну подумал? у меня 15" и не влазит

px - универсальное решение.

и iPhone. Но надо учитывать что на базе того же Android выпускаются телефона у которых плотность не уступает Apple. Мой друг купил более полугода назад у которого плотность превышала Retina display, хоть и незначительно.

да

Сколько скажет столько и заплатят.

Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только А вообще консоль -- это друг разработчика. не понял сути вопроса.

а, если смотреть в таком направлении, то ситуация иначе (я не совсем корректно понял о чем ты говорил). я на практике сталкиваюсь с ситуацией когда весь ресурс, как правило, имеет один шрифт (не важно кастои или дефолтный), который задается, например, в <body>. а конент менеджера помещается в <div> с соответствующим классом, который выступает в роли контейнера как раз для такого типа данных. но, менеджеру ничего не мешает установить свой шрифт для этого контента в том же редакторе. в таком случае свойство будет указано в аттрибуте style="" и будет иметь приоритет над дефолтными стилями сайта. т.е. тем самым контент может иметь как дефолтный шрифт страницы или же указанный непосредственно в редакторе. я не встречал такого заказчика. Но, к примеру, мне попадалось ТЗ где в PDF был описан каждый элемент страницы а так же его работа при тех или иных действиях пользователя. Пускай техническая часть там была достаточно сухо описана, но зато был очень хорошо описана функциональная часть (хотя даже в таком случае покрывается все-го навсего около 50% всех возможных ньюансов, которые возникают в будущем при разработки).

@SKSKSS2013, я думаю если кто-то желал бы сделать это бесплатно то уже откликнулся бы. если для тебя данная фича жизненно важная, то что тебе мешало за год накопить сумму что бы ее для тебя реализовал разработчик? или трата средств на ПО это ниже твоего достоинства?

я не понял в чем причина и не нашел проблемных областей. в подписи есть ссылка "как правильно задать вопрос" -- советую начтаь от туда

Как было сказанно в первом посте, за основу я взял ТЗ с выше указанного веб-ресурса. Я изменил его формулировку, а само задание составил таким образом что бы оно отвечало не только на вопрос "что делать", но и "как делать". С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован. Не будем забывать что на "фротне"то у нас весь текст или его часть отображаться как кастомным шрифтом так и иметь кастомное форматирование и/или дизайн отдельных элементов контента. Данное ТЗ носит обучающий характер да и только. Большую часть данного задания, как я уже говорил выше, я взял с выше указанного ресурса. Недавно в одной из веток форума один из новичков жаловался что к макетам нет ТЗ от чего возникло желание закрыть данный пробел. В действительности некоторые пункты в задании скорее всего будут отсутствовать, так как заказчик или не будет разбиратся в предметной области или будет думать что "это и так понятно".

@Bassline, совершенно верно. классы в рамках таких данных это достаточно редкая ситуация, когда совсем никак -- но надо.

отписал на email указанный в профиле

пиши в личку

сам градиент делается элементарно. вот в помощь: http://www.colorzilla.com/gradient-editor/ вообще кнопка не сложная. деталей много, но при помощи (возможно) одного добавочного внутренего тега и :before :after сделать можно.

в данном случае 100% -- блок подстаривается под ширину окна браузера, а не контента. проблему можно решить, например, поместив весь сайт в таблицу с одной ячейкой. таблице задать 100% ширины.

1. подключить jQuery 2. скрипт вставить в конце страницы

в данный момент разговор идет про контенте и его форматирование. вот пример редактора: http://www.tinymce.com/tryit/basic.php "Tools -> Source code" -- тут можно посмотреть как контент форматируется. теги используются по их прямому назначению. форматирование добивается элементарно и понятно. контент в вебе ничем не отличается от контента в газете или книге -- там нет 100500 отступом между разными абзацами. есть некий стандарт в рамках одной, например, книги для отступов и они используют везде. советую ознакомится с данным примером и взять за основу.

@zdarovyi, ууу, ну тут сказать куда встатить чесслово ну никак нельзя. нет тут телепатов. у меня в подписе есть ссылка как правильно задать вопрос. возможно прочитав тему, сможешь нам предоставить больше информации по поводу того как организован ресурс, с которым проблема. иначе помочь нет возможности.