53 replies to this topic

[SmetDenis]

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

Возможно что-то из предложенного из этой темы попадет в сборку 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

[SmetDenis]

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


Сетка 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;
    }
}

[Cheren-dow]

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

Edited by Cheren-dow, 25 September 2014 - 16:50.

[SmetDenis]

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

 

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

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

 

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

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

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

[isay777]

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

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

Edited by isay777, 01 October 2014 - 21:04.

[Tunga]

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

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

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

[CB9TOIIIA]

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

[Cheren-dow]

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

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

Edited by Cheren-dow, 06 October 2014 - 18:55.

[CB9TOIIIA]

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

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

[Cheren-dow]

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

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