Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Edited by Animkim

Share this post


Link to post
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/

 

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Смысл темы? За 5000 рублей свестраю.
 

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

 

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

Share this post


Link to post
Share on other sites

 

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

 

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

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

 

 

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

 

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

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

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

 

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

 

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

 

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

Share this post


Link to post
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>

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

Share this post


Link to post
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>

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

 

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

Share this post


Link to post
Share on other sites
Что вы имеете в виду под "Плавают" размеры блоков и размеры шрифтов?

наложи поверх разметки дизайн и увидешь: http://take.ms/s8UO5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Edited by pangurban

Share this post


Link to post
Share on other sites

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

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

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

Edited by raptor-dm

Share this post


Link to post
Share on other sites

 

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

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

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

 

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

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

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

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

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

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

Edited by Sergik+

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

Share this post


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

 

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

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

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

Share this post


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

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

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

Share this post


Link to post
Share on other sites

 

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

 

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

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

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

 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
    • By artaka
      Работаю верстальщиком за небольшую плату (100-300руб в зависимости от работы) Связь со мной : 
      VK vk.com/artakagrand
      Telegram @artakagrand
      email fefsert@gmail.com
      Примеры работ:
      http://teslamodelx.epizy.com
      http://teslamodelx.epizy.com/infoblog/index.html
      http://teslamodelx.epizy.com/blog/index.php
  • Member Statistics

    46,298
    Total Members
    3,128
    Most Online
    Govt_sm80
    Newest Member
    Govt_sm80
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors