Какой сетки лучше всего использовать с меньшим количеством CSS? [закрыто

StackOverflow https://stackoverflow.com/questions/3987307

Вопрос

Я хотел бы использовать сетку (например, Blueprint/960.gs/...) с Меньше (.js) Но, похоже, есть некоторые проблемы, когда вы решите пойти так:

Например, с помощью Blueprint: таблица стилей Hacks IE предостерегает для использования классов контейнера/SPAN-X в качестве микшинов, учитывая, что смешанные классы не будут отображаться в элементах HTML. Например, положить

#content { .container; }

В вашей таблице. Бесполезной таблице, хакеры IE не будут применены (и это имеет смысл).

Поэтому мне было интересно, если кто -то уже «перенес», переносит »план или 960 г меньшего количества CSS? Я смотрю на Google, но не нашел ни одного (я попробовал себя, но, учитывая используемые селекторы Hacks/CSS/CSS, преобразование нетривиально).

PS: Еще один вопрос похож, но автор решил самостоятельно начать структуру, я бы предпочел использовать «популярную» структуру

Изменить: пример проблемы при применении классов из меньшего файла (микшины): в 960.gs у вас есть правило:

.container_12 .grid_3{
    width:220px;
}

HTML (упрощенный):

<div id="main">
  <div id="col1">
  </div>
  <div id="col2">
  </div>
</div>

С меньшими затратами было бы неплохо определить макет в таком листе стилей:

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

Но это не сработает (правило не будет применяться к COL1 и COL2), поскольку меньше не имеет ни малейшего понятия о том, что #COL1 находится в #Main (селектор #Main #COL1 не делает улов Посмотреть)

Это было полезно?

Решение 3

Редактировать 13/07/2012: Bootstrap Twitter - мой новый любимый выбор.

РЕДАКТИРОВАТЬ: Еще один, который выглядит очень красиво: http://semantic.gs/

Я еще не проверял это, но http://centage.peruste.net/ это структура меньше. JS CSS.

Другие советы

Вы не можете гнездо #col1 и #col2 в #main?

#main {
   #col1 {.alpha; .grid_3;}
   #col2 {.omega; .grid_3;}
}

Должен дать выход #main #col1 {rendered CSS code}

Я использую Blueprint с меньшим количеством, и он прекрасно работает. Только одна вещь, которую вам нужно сделать. В вашем HTML убедитесь, что база div имеет class="container". Анкет Если вы это сделаете, остальное будет работать без каких -либо сбоев.

Переименовать свой экран.css на экран.

@import "screen.less";
#header {     
    .span-24; .last; // Now, Have Fun! :D
         }

Мне нравится использовать меньшую структуру с {меньше}. Просто потому что это смущает людей до крайности ...

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top