Jump to content

klierik
 Share

Recommended Posts

Эта тема подбила меня взяться за Грант, и сразу вопрос есть у кого Gruntfile.js заточенный под верстку, а то в js слабоват не могу грамотно сам написать, а так посмотрю пойму.

Link to comment
Share on other sites

Эта тема подбила меня взяться за Грант, и сразу вопрос есть у кого Gruntfile.js заточенный под верстку, а то в js слабоват не могу грамотно сам написать, а так посмотрю пойму.

тут http://htmlforum.ru/index.php?showtopic=48987&hl= был предложен вполне достойный вариант

а тут: http://htmlforum.ru/index.php?showtopic=47141#entry322241 выложен набросок и небольшой мануал.

  • Like 1
Link to comment
Share on other sites

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

Edited by Animkim
Link to comment
Share on other sites

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

 

Пожалуйста  ^_^ Этот gruntfile - солянка из bootstrap'а, подсмотренного и своих соображений. Там еще должен быть imagemin, но не смог победить глюк: на png зависает навсегда. Пришлось исключить, а картинки тупо копируются куда нужно.

 

Если что, отвечу на вопросы. Если есть предложения как сделать лучше, с удовольствием послушаю.

 

 

 

Для новичков, кто еще не знаком с git, вот руководство:

http://hexvolt.blogspot.ru/2014/01/git-1.html

http://habrahabr.ru/post/106912/

 

Мне очень помогло.

  • Like 1
Link to comment
Share on other sites

 

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

 

Пожалуйста  ^_^ Этот gruntfile - солянка из bootstrap'а, подсмотренного и своих соображений. Там еще должен быть imagemin, но не смог победить глюк: на png зависает навсегда. Пришлось исключить, а картинки тупо копируются куда нужно.

 

Если что, отвечу на вопросы. Если есть предложения как сделать лучше, с удовольствием послушаю.

 

 

 

Для новичков, кто еще не знаком с git, вот руководство:

http://hexvolt.blogspot.ru/2014/01/git-1.html

http://habrahabr.ru/post/106912/

 

Мне очень помогло.

 

imagemin проблема с ним была,  watch отказывался отслеживать изменения в папке img, 2 дня боролся с этим, на сто раз проверил все, уже плюнул и запускал руками imagemin и о чудо сегодня все заработало само. 

Edited by Animkim
Link to comment
Share on other sites

Смысл темы? За 5000 рублей свестраю.
 

обращаю внимание гуру на маленькую деталь - это название раздела форума где гуру сейчас написало.

 

  1. htmlforum.ru
  2.  
  3.  Основной форум
  4.  
  5.  Для начинающих
  6.  
  7.  Макеты для вёрстки
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

Link to comment
Share on other sites

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

 

Да я многое у тебя взял. Сам только учусь правильно верстать. На ползунок и слайд я много времени убил

Link to comment
Share on other sites

 

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

 

Да я многое у тебя взял. Сам только учусь правильно верстать. На ползунок и слайд я много времени убил

 

Шрифт исправил и ховеры.

Link to comment
Share on other sites

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

 

1. "Плавают" размеры блоков и размеры шрифтов.

2. Непонял зачем дублируется класс "logo-container" в шапке, если шапка лишь один раз

3. для селектора

.slider-content ul {}

не уж то не нашлось своего класса?

4. слайдер выполнен удачно

5. комментарии в так же закоментированные блоки в сорсе -- избыточно

6. у этих элементов:

<img class="boss-photo" src="css/img/content/boss-photo.jpg" ><p class="first-paragraph">Когда вкладываешь всю душу в то, что создаешь, получаешь поистине бесценный результат. Когда веришь, что нет ничего невозможного, и самые смелые желания обретают форму, понимаешь, твой путь пройден не зря. Мы искренне верим — каждый способен изменить мир к лучшему. Создавая продукты под маркой SPLAT, мы знаем, что всё тепло, вложенное в них, сделает ваш день ярче, счастливее и добрее.</p><p class="content-paragraph">Помогать людям быть здоровыми, красивыми и успешными — наша миссия.</p> <p class="content-paragraph"></p><p class="boss-info">Евгений Демин,</p><p class="boss-info">Генеральный директор SPLAT</p></div>

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

Link to comment
Share on other sites

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

 

1. "Плавают" размеры блоков и размеры шрифтов.

2. Непонял зачем дублируется класс "logo-container" в шапке, если шапка лишь один раз

3. для селектора

.slider-content ul {}

не уж то не нашлось своего класса?

4. слайдер выполнен удачно

5. комментарии в так же закоментированные блоки в сорсе -- избыточно

6. у этих элементов:

<img class="boss-photo" src="css/img/content/boss-photo.jpg" ><p class="first-paragraph">Когда вкладываешь всю душу в то, что создаешь, получаешь поистине бесценный результат. Когда веришь, что нет ничего невозможного, и самые смелые желания обретают форму, понимаешь, твой путь пройден не зря. Мы искренне верим — каждый способен изменить мир к лучшему. Создавая продукты под маркой SPLAT, мы знаем, что всё тепло, вложенное в них, сделает ваш день ярче, счастливее и добрее.</p><p class="content-paragraph">Помогать людям быть здоровыми, красивыми и успешными — наша миссия.</p> <p class="content-paragraph"></p><p class="boss-info">Евгений Демин,</p><p class="boss-info">Генеральный директор SPLAT</p></div>

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

 

Что вы имеете в виду под "Плавают" размеры блоков и размеры шрифтов?

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

У меня к Вам такой вопрос- возможно обойтись без less, bootstrap , т.е. верстать только с помощью html, css, jquery или обязательно хороший верстальщик должен знать всё это, я конечно ознакомилась с этими технологиями , несложно , просто я всегда верстала только на чистом  html, css, всё получалось , может макеты  были не очень сложные. Заранее спасибо.

Link to comment
Share on other sites

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

Edited by pangurban
Link to comment
Share on other sites

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

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

Edited by raptor-dm
Link to comment
Share on other sites

 

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

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

 

Профи на то и есть профи чтобы максимально себе упростить работу, в чем скилл работы без препроцессора ?

Меня сейчас попроси без emmet, автокомплита и sass чо нибудь сбацать я наверное раз 5 это сделаю медленнее.

Пользуйтесь инструментами на здоровье их не глупые люди для вас придумали, нравится jQuery вместо js значит

вам так удобнее, если вам bootstrap облегчает жизнь или stylus то это ведь хорошо.

Сейчас вот понял что на нативном js вряд ли когда нибудь буду писать, самая частая ошибка это синтаксис в js,

ну реально спьяну и на коленке можно было такой яп придумать, cofee-script mast have.

Edited by Sergik+
Link to comment
Share on other sites

У меня к Вам такой вопрос- возможно обойтись без less, bootstrap , т.е. верстать только с помощью html, css, jquery или обязательно хороший верстальщик должен знать всё это, я конечно ознакомилась с этими технологиями , несложно , просто я всегда верстала только на чистом  html, css, всё получалось , может макеты  были не очень сложные. Заранее спасибо.

 

Данное ТЗ составлено специально с повышенным уровнем сложности, так как остальные макеты на форуме в основном для чистого HTML.

Я описывал ТЗ таким образом, что бы желающий склепал не просто очередной макет, а получил максимум новых знаний.

 

Каждый выполняет задание так как хочет и опирается на то что он хочет получить от потраченного своего жизненного времени! ;)

Link to comment
Share on other sites

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

 

Я когда начинал верстать, тоже не сразу стал пользоваться препроцессорами. Потому что не видел в них толка, а не видел потому, что css не превышал 100-200 строк.

И то, что для новичка тренировка навыков, то для более опытного человека уже рутина, с которой и позволяет справиться препроцессор.

Плюс, конечно же, еще в организации файловой структуры посредством @import'a

Link to comment
Share on other sites

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

Как правило при создании, например, больших проектов (длительность разработки от 2 до 6-9 месяцев) будет учитываться всё, а так же время выполнения работы.

Препроцессоры позволяют существенно его экономить (при правильном использовании).

Link to comment
Share on other sites

 

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

 

Я когда начинал верстать, тоже не сразу стал пользоваться препроцессорами. Потому что не видел в них толка, а не видел потому, что css не превышал 100-200 строк.

И то, что для новичка тренировка навыков, то для более опытного человека уже рутина, с которой и позволяет справиться препроцессор.

Плюс, конечно же, еще в организации файловой структуры посредством @import'a

 

Я тоже 100 строк бывает на чистом css делаю.

Link to comment
Share on other sites

  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy