Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

верстка с использованием FLEXbox CSS


sitecreator

Recommended Posts

 

а остальные элементы? 

 

Все с нуля кодить и верстать? Не каждый заказчик на это бюджет выделит  :-)

 

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

И Вы вне конкуренции по вёрстке! Можно цену поставить как на шаблон класса ЛЮКС.

Надіслати
Поділитися на інших сайтах


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

И Вы вне конкуренции по вёрстке! Можно цену поставить как на шаблон класса ЛЮКС.

ахаха

а потом с поддержкой вешайся

так как ни один сторонний модуль в каталоге не будет правильно отображаться, ибо все на бутстрапе

Надіслати
Поділитися на інших сайтах

так как ни один сторонний модуль в каталоге не будет правильно отображаться, ибо все на бутстрапе

Так это хорошо!

Просто поддержка НЕ бесплатная. Заработаете на поддержке.

Элитный продукт, от такой. Не для нищебродов.

Зато преимущество в мобильной выдаче гугла!!!

Надіслати
Поділитися на інших сайтах


@AWARO, потому что это по сути только Grid System из бутстрапа

а остальные элементы? пагинация, табы, попапы, тултипы, формы?

 

Все с нуля кодить и верстать? Не каждый заказчик на это бюджет выделит  :-)

Или оставить бутстрап, а эту сетку сверху прикрутить?

сделав один раз пользуешься много раз)

 

Надіслати
Поділитися на інших сайтах


Чтобы было быстрее чем моя сборка

ZDZJ6h87gPDcfdvI4KW64OO9s6hkmy.png

 

Стили нужно вместить в 10 килобайт

И от jquery отказаться, все на чистый JS переписать   :-)

Надіслати
Поділитися на інших сайтах

 

 

И от jquery отказаться, все на чистый JS переписать 

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

Надіслати
Поділитися на інших сайтах

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

Ну мы тут верстку обсуждаем  :-)

А по серверной части, много куда можно копать, SQL-оптимизации, кеши, CDN,  HTTP/2 даже.

Надіслати
Поділитися на інших сайтах

Ну мы тут верстку обсуждаем  :-)

А по серверной части, много куда можно копать, SQL-оптимизации, кеши, CDN,  HTTP/2 даже.

еще nginx + apache2 

 

и + бубен и ритуальные танцы  :ugeek:

 

Надіслати
Поділитися на інших сайтах

  • 3 weeks later...

Сверстал небольшой блок по этой сетке

80 строк кода - адаптивная верстка на 24 колонки

@import 'smart-grid.less';
@import 'obvious-buttons.less';

@color: #eee;

.reset();

body {
  background: @color;
  font-family: Verdana;
}

.wrapper {
  .wrapper();
  background: #fff;
}

.row {
  .row-flex();
}

.column-left {
  .col();
  .col-5();
  .col-sm-8();
  .col-xs-24();
  background: #eee;
  margin-top: 30px;
  min-height: 200px;
}

.products {
  text-align: center;
  margin-top: 30px;
  .col();
  .col-19();
  .col-sm-16();
  .col-xs-24();

  .row {
    .row-flex();
    .justify-content(center);

    .col{
      .col();
      .col-6();
      .col-lg-8();
      .col-sm-12();
      .col-xs-24();
      border: 1px solid #eee;
      padding: 10px;
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;

      &:hover {
        box-shadow: 0 0 5px darken(@color, 20%);
      }

      img {
        max-width: 100%;
      }

      .name {
        margin: 10px;
      }

      .price {
        font-size: 24px;
        margin: auto 10px 10px 10px;
      }

      .btn {
        text-decoration: none;
      }
    }
  }
}

Сгенерированая верстка http://codepen.io/pashast/pen/bgGvwx

 

Если автор будет развивать, будет неплохо. Пока не хватает многих вещей. Ну или он не все выложил в паблик.

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.