Внимание! Форум временно закрыт. Все вопросы вы можете задать на странице MaxSite CMS в Github

Об именовании CSS-классов

Свободное общение.
Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 23 сен 2014, 13:55

Понятно, что какой-то мануал может быть. Но пока мало предложений о том, что именно включить в состав фреймворка. Пока мы находимся в разных плоскостях. Я веду речь о любой верстке, а не только в пределах MaxSite CMS. Я уже предлгал — поставьте LPF и попробуйте этими/другими/не важно хелперами сделать простую страницу. Можно взять css-фреймворк, uikit или бутстрап — опять же не важно. Но будет понятен механизм и принцип написания html-кода. Это немного другой подход, чем мы делали до этого, но именно он будет приоритетным в вебстроительстве на ближайшие годы.

В MaxSite CMS уже есть mso-helpers.less. Но он слишом слабенький и спорный. Нужно отработать новый. И отмечу, что мы используем less — а значит можно подключать только тот код, который понадобится в шаблоне. Точно также, как и значения цветов, отступов и прочих настраиваемых параметров. Каждый вебмастер сделает это под свой шаблон, как ему будет нужно.

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 23 сен 2014, 19:19

В терминах css-фреймворов такие классы называются utility. В теории всю страницу можно сверстать только такими классами, без дополнительного css-кода. Именно такая возможность создала взрывную популярность бутстрапу.

На англ. (свежак в тему): http://davidtheclark.com/on-utility-classes/

Хелперы фреймворков:
http://getuikit.com/docs/utility.html
http://getbootstrap.com/css/#helper-classes
http://foundation.zurb.com/docs/utility-classes.html
http://groundworkcss.github.io/groundwo ... lpers.html
https://github.com/suitcss/utils

В статье, кстати приведен пример классов с padding — «pad-». Действительно, осттупы могут быть ведь не только для box (блоки), но и для inline-элементов. Поэтому можно выделить шаблонные «pad-» и «mar-» в отдельную группу:

Код: Выбрать все

.pad-small {}
.pad-tr-large {}
.mar-large {}
.mar-rl-large {}

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 24 сен 2014, 21:12

Попробуем вот что сделать. Пусть есть некий несложный дизайн http://wbloger.com/uploads/screenshot/sample-1.png Задача сделать верстку только хелперами. Сложные элементы, вроде слайдера мы не трогаем (оставляем пустой блок, там все равно будет своя спецификация).

Есть смелые?

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 26 сен 2014, 20:10

Мой предварительный результат: http://wbloger.com/uploads/screenshot/sample-2.png Больше похоже на прототипирование, где не выставлены точные цвета, размеры и т.п.

Верстка только HTML-кодом.

Код: Выбрать все

<div class="layout-center"><div class="bg-red-dark padding">

   <div class="grid flex vcenter">
      <div class="w60">
         <h3 class="normal upper text-white">Заголовок</h3>
      </div>
      
      <div class="text-right">
         <a class="( button flat inline ) ( padding-tb-small padding-rl ) bold" href="#">Download Now</a>
      </div>
   </div>
   
</div></div>

<div class="layout-center"><div class="padding-tb-large padding-rl-small">

   <div class="grid flex">
      <div class="w50">
         <img src="http://placehold.it/250x70" width="250" height="70" alt="Лого">
      </div>
      
      <div class="text-right">
         <div class="( icon phone-square ) text-nowrap text-gray">Contact: 09-09-09</div>
         <div class="text-medium padding-t-small">
            <a href="#" class="icon facebook-square text-gray"></a>
            <a href="#" class="icon twitter-square text-gray"></a>
            <a href="#" class="icon github-square text-gray"></a>
            <a href="#" class="icon google-plus-square text-gray"></a>
         </div>
      </div>
   </div>
   
</div></div>

<div class="layout-center"><div class="">

   <div class="box-cap">
      заглушка слайдера
   </div>
   
</div></div>

<div class="layout-center"><div class="bg-white">

   <div class="padding">
      <h1 class="text-center">Заголовок</h1>
      <p class="text-center"><?= mso_lorem(50) ?>
   </div>


   <div class="grid flex text-center padding bg-yellow-light">
      <div class="w20">
         <i class="icon cog text-large"></i>
         <h2 class="normal padding-small">Заголовок</h2>
         <p><?= mso_lorem(20) ?></p>
      </div>
      
      <div class="w20">
         <i class="icon shopping-cart text-large"></i>
         <h2 class="normal padding-small">Заголовок</h2>
         <p><?= mso_lorem(20) ?></p>
      </div>
      
      <div class="w20">
         <i class="icon cloud text-large"></i>
         <h2 class="normal padding-small">Заголовок</h2>
         <p><?= mso_lorem(20) ?></p>
      </div>
      
      <div class="w20">
         <i class="icon youtube text-large"></i>
         <h2 class="normal padding-small">Заголовок</h2>
         <p><?= mso_lorem(20) ?></p>
      </div>
      
   </div>

   <div class="grid flex padding">
   
      <div class="w48">
         <h2>Галерея</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w48">
         <h2>Отзывы</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
   </div>
   
   
   <div class="grid flex padding">
   
      <div class="w22">
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w22">
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w22">
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w22">
         <div class="box-cap">заглушка</div>
      </div>
      
      
   </div>
   
   
   <div class="grid flex padding">
   
      <div class="w48">
         <h2>Trusted By</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w48">
         <h2>Services</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
   </div>
   
   <div class="grid flex padding">
   
      <div class="w48">
         <h2>Subscribe</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w23">
         <h2>New Ofers</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
      <div class="w22">
         <h2>Other products</h2>
         <div class="box-cap">заглушка</div>
      </div>
      
   </div>
   
   
   <div class="grid flex vcenter bg-gray-dark text-gray-light padding">
      <div class="w60">
         <p class="normal">Copyright</p>
      </div>
      
      <div class="text-right">
         <div class="text-medium padding-t-small">
            <a href="#" class="icon facebook-square text-gray-light"></a>
            <a href="#" class="icon twitter-square text-gray-light"></a>
            <a href="#" class="icon github-square text-gray-light"></a>
            <a href="#" class="icon google-plus-square text-gray-light"></a>
         </div>
      </div>
   </div>
   
   
</div></div>


Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 26 сен 2014, 20:26

Для себя, чтобы не забыть.

.box-cap — заглушка. Блок серым цветом и min-height: 200px.

Цвета white black gray blue green yellow red fuchsia и их -light -dark как 30% отклонение.

Для размера текста text-medium, text-small и text-lagrge. Бо, нужно как-то увеличивать размеры иконок и некоторых других элементов. Подумай, может сделать text-size150, text-size200, text-size300 — будет понятней?

.normal сбрасывает отступы и интерлиньяж. Так проще при центровке и отступах. Как вариант заменить на .reset?

Ширину .wX имеет смысл делать в шагом в 1%.

Отступы на привычные padding-XX и margin-XX — исчезла неопределенность. margin, похоже вообще не будет встречаться... Убрать?

.grid.flex может быть имеет смысл заменить на один класс .grid-flex. Меньше каскадность.

Подумать с кнопками.
Подумать с формами.

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 27 сен 2014, 13:10

Хочу уточнить по формам: нужен какой-то аналог .fform или пусть каждый по своему колбасится?

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 08 окт 2014, 11:51

Адаптивность.

Типовой вариант:

Код: Выбрать все

      <div class="w24 w32-tablet w100-phone">
         <p><?= mso_lorem(60) ?></p>
      </div>
      
      <div class="w24 w32-tablet w100-phone">
         <p><?= mso_lorem(50) ?></p>
      </div>



Где

w24 — ширина без условий.
w32-tablet — ширина для tablet
w100-phone — ширина для phone

В первую очередь меня беспокоит количество breakpoint. На практике, как кажется, достаточно задать три точки:

Код: Выбрать все

@SCREEN_DESKTOP: ~"(max-width: 1140px)";
@SCREEN_TABLET: ~"(max-width: 768px)";
@SCREEN_PHONE: ~"(max-width: 480px)";


В разных фреймворках используются разные значения px (пока это не важно).

1. Есть варианты задавать в px, а можно в em (foundation-5.4.0). Кто знает в чем преимущество задания в em?

2. Достаточно ли три точки? На деле получется что @SCREEN_DESKTOP мы вообще не используем (дефолт), а @media прописываем только для tablet и phone.

3. Что делать с «резиновым браузером»? Пример: есть колонка в 50%. На десктопе это (предположим) 500px. Сжимаем браузер до планшета + 1px, в этом случае теже 50% уже 380px. То есть почти на 30% меньше — текст, картинки, естественно, сбились. Кто как решает эту проблему?

4. Значения breakpoint — кто какие использует?

Аватар пользователя
Cuprum
Модератор
Сообщений: 766
Зарегистрирован: 01 фев 2009, 21:22

Re: Об именовании CSS-классов

Сообщение Cuprum » 09 окт 2014, 21:33

Задание ширины через em? Это что-то новенькое ;) Вот margin и padding можно задавать в em. А если ширина через em - тут видимо резон в том чтобы установить оптимальную длину строки и от нее уже отталкиваться.

Если задавать ширину в процентах, можно ее еще ограничить max-width и min-width. Должно помочь.
По поводу точек - а может вообще не привязываться жестко к ширине экрана? Что-то вариантов там дофига...

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 10 окт 2014, 10:57

Ширина у нас и так выставляется в процентах с max-width.

Проблема в том, что неясно какой использовать подход в адаптивном дизайне.

Можно привязываться к конкретным устройствам. Например phone — max-width 480px и tablet - 768px — как типовые значения.

Но, у нас есть браузеры, которые не распахнутые на всю ширину. Например у меня обычно браузер около 1000px. При этом, текст, чтобы было удобно читать сужаю его так, чтобы колонки с текстом была не шире 700-800px. В данном случае это уже условие для tablet.

То есть либо мы привязываемся к некому устройству и задаем две точки (480 и 768), либо привязываемся к условным точкам, по которым и делаем @media-«переверстку».

На практике это так:

Код: Выбрать все

// максимальная ширина модульной сетки
@layout_max_width: 992px;

// 4 точки равномерно
@r1: (@layout_max_width / 4);
@r2: (@r1 * 2);
@r3: (@r1 * 3);

@SCREEN_W1: ~"(max-width: @{r1})";
@SCREEN_W2: ~"(max-width: @{r2})";
@SCREEN_W3: ~"(max-width: @{r3})";
@SCREEN_W4: ~"(max-width: @{layout_max_width})";


Что в итоге превращается (с этой шириной):

Код: Выбрать все

@media (max-width: 248px) {
  ...
}
@media (max-width: 496px) {
  ...
}
@media (max-width: 744px) {
  ...
}
@media (max-width: 992px) {
  ...
}


Это фактически означает деление сайта на 4 колонки и верстку по ним, без привязки к любому устройству.

Вот не знаю, насколько этот подход оправдан. Визуально, конечно, это хорошо выглядит и удобно верстать.

Kudesnik
Сообщений: 23
Зарегистрирован: 14 окт 2009, 12:09

Re: Об именовании CSS-классов

Сообщение Kudesnik » 10 окт 2014, 11:11

На мой взгляд, неудачное решение использовать в названиях классов имена «phone», «tablet», «desktop». Они уже сейчас не соответствуют действительности, так как есть телефоны с шириной больше 768px и 1140px. С учетом развития ретина дисплеев мобильные устройства будут наращивать ширину экранов.
Правильнее было использовать в названиях классов условные размеры, например:
xs 320­­
s 480
m 768
l 1024
xl 1600
xxl 1920
xxxl 2560


Вернуться в «Курилка»

Кто сейчас на форуме

Пользователь просматривает форум: нет зарегистрированных пользователей

cron