Перейти к содержимому


Фотография
* * * * - 3 Голосов

CSS-фреймворки, гриды, скрипты, утилиты и разные штуки для верстки шаблонов

css less grid верстка фреймворк инструменты

Сообщений в теме: 53

#1 SmetDenis

SmetDenis

Отправлено 23 September 2014 - 08:11

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

Возможно что-то из предложенного из этой темы попадет в сборку J!Blank.pro
И так...
 

The Semantic GRID SYSTEM
Альтернатива для создания грида без предварительно объявленных классов
Используя их less-файл можно сделать несколько колонок буквально в 10-ток строк
Скрипт очень маленький и понятный, использовать просто. На сайте есть несколько примеров использования.
 
@column-width : 60;
@gutter-width : 20;
@columns      : 12;

header  { .column(12); }
article { .column(9); }
aside   { .column(3); }

@media (max-device-width: 960px) {
   article { .column(12); }
   aside   { .column(12); }
}
Работает с jblank, достаточно только добавить его через @import
  • 2
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#2 SmetDenis

SmetDenis

Отправлено 24 September 2014 - 07:52

Ну а что, классика бессмертна и проверена временем! :)


Сетка 960
Её адаптивная версия - http://adapt.960.gs/

А вот и разные реализации на Less
https://github.com/d...turner/960-LESS
https://github.com/a...ee44/960gs.less
https://github.com/n...carnes/960.less


А вот это подсмотрел на JoomlaForum.ru
Мало кода, минимум настроек и заменит вам over 600 строк мешанины в CSS
А если задуматься о media query и немного утилизировать, то можно сделать свой мини фрейм для колонок
@mWidth: 960px;
body {
  min-width: @mWidth;
}
.grid (@size: 1, @col: 12){
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: (@mWidth/@col - 20) + (@size - 1) * (@mWidth/@col);
}
.prefix (@size: 1, @col: 12){
    padding-left: (@mWidth / @col) * @size;
}
.suffix (@size: 1, @col: 12){
    padding-right: (@mWidth / @col) * @size;
}
.push (@size: 1, @col: 12){
    position: relative;
    left: (@mWidth / @col) * @size;
}
.pull (@size: 1, @col: 12){
    position: relative;
    left: (-@mWidth / @col) * @size;
}
.clearboth{
    clear: both;
}
.clearbasic {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.sets(@col) {
    .loop (@index) when (@index <= @col) {
        .grid-@{index} {.grid(@index, @col);}
        .prefix-@{index} { .prefix(@index, @col); }
        .suffix-@{index} { .suffix(@index, @col); }
        .push-@{index} { .push(@index, @col); }
        .pull-@{index} { .pull(@index, @col); }
        .loop(@index + 1);
    }
    .loop (0) {}
    .loop (1);
}
.container(){
    margin-left: auto;
    margin-right: auto;
    width: @mWidth;
    zoom: 1;
    &:before, &:after{
        .clearbasic;
        content: '.';
        font-size: 0;
        line-height: 0;
    }
    &:after{
        .clearboth;
    }
}
.container_12{
    .container();
    .sets(12);
}
.container_16{
    .container();
    .sets(16);
}
.alpha {
  margin-left: 0;
}
.omega {
    margin-right: 0;
}
.clear {
    .clearboth;
    .clearbasic;
}
.clearfix{
    zoom: 1;
    &:before, &:after{
        .clearbasic;
        content: '.';
        font-size: 0;
        line-height: 0;
    }
    &:after{
        .clearboth;
    }
}

  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#3 Cheren-dow

Cheren-dow

Отправлено 25 September 2014 - 16:49

Сделал простую сетку на основе 960-less для шаблона JBlank, для себя возможно кому то пригодится. Посмотреть можно так же на гите.


Сообщение отредактировал Cheren-dow: 25 September 2014 - 16:50

  • 2
Изображение
 

#4 SmetDenis

SmetDenis

Отправлено 01 October 2014 - 20:17

Мало кто знает, что все иконки во всяких бустрапах, UIkit-ах и прочих взяты в основном из Font Awesome

 

В итоге, чтобы пользоваться иконками - не обязательно ставить громоздкий фреймворк.

Можно просто подключить шрифт с небольшим css.

 

Качаем - Смотрим - Используем

 - На английском (оригинал) http://fortawesome.g...o/Font-Awesome/

 - На русском http://fontawesome.veliovgroup.com/


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#5 isay777

isay777

Отправлено 01 October 2014 - 21:02

А я что-то к getuikit привык

с ее безумными классами )))


Сообщение отредактировал isay777: 01 October 2014 - 21:04

  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 Tunga

Tunga

Отправлено 01 October 2014 - 21:06

Мне Т3 очень понравился 

- На английском (оригинал) http://t3-framework.org/

- На русском http://www.t3-framework.ru/


  • 2

JBZoo это круто!


#7 CB9TOIIIA

CB9TOIIIA

Отправлено 06 October 2014 - 18:51

вот эту няшку прикрутишь Денис? :) красота: http://tristanedwards.me/sweetalert
 
MKSYtrv.gif
  • 3

#8 Cheren-dow

Cheren-dow

Отправлено 06 October 2014 - 18:54

вот эту няшку прикрутишь Денис?

А в чем трудности эту красоту подключить в ручную самому? Подключить 2 файла и сделать инициализацию и все работает, 2 мин. делов 


Сообщение отредактировал Cheren-dow: 06 October 2014 - 18:55

  • 0
Изображение
 

#9 CB9TOIIIA

CB9TOIIIA

Отправлено 06 October 2014 - 18:59

да нее... это без проблем, просто в jblank много разного переопределения и вот такие ерроры или сообщение об успешной отправке были бы к месту)

P.S. Согласен прикрутить не проблема, но тема наз-ся: Предлагаю делиться различными интересными скриптами / проектами, которые могут помочь при разработке собственных шаблонов.  Возможно что-то из предложенного из этой темы попадет в сборку J!Blank.pro


  • 1

#10 Cheren-dow

Cheren-dow

Отправлено 06 October 2014 - 19:11

Возможно что-то из предложенного из этой темы попадет в сборку J!Blank.pro

Думаю врятли. Ссылочка, да, пускай хранится - полезно (yes) . А вот видеть в сборке jblank - нет. Таких штучек можно кучу упаковать в шаблон, а они не нужны в чистом шаблоне.


  • 0
Изображение
 





Темы с аналогичным тегами css, less, grid, верстка, фреймворк, инструменты

Click to return to top of page in style!