Jump to content



Toggle %s Welcome to JBZoo community !

English: Please, sign in for contact JBZoo techsupport. Accesses in your Email, which came after the purchase.

Russian: Для того чтобы обратиться в русскую техническую поддержку JBZoo — авторизуйтесь с помощью доступов, которые пришли к вам в письме после покупки. Внимание! Доступ туда имеют только тарифы со знаком «плюс». Подписки JBZoo без "+" форум расценивает как забаненные, поэтому для общения в публичном разделе используйте отдельный аккаунт (легко зайти через социальную сеть). Если форум вас не пускает, почистите куки браузера


Photo
* * * * - 3 votes

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

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

53 replies to this topic

#1 SmetDenis

SmetDenis
  • Administrators
  • User rate: 134.3
  • posts: 15865
  • topics: 198

Posted 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
Есть вопрос — создайте СВОЮ новую тему!

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


#2 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 134.3
  • posts: 15865
  • topics: 198

Posted 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
Есть вопрос — создайте СВОЮ новую тему!

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


#3 Cheren-dow

Cheren-dow
  • JBZoo Partner
  • User rate: 96.8
  • posts: 5057
  • topics: 31

Posted 25 September 2014 - 16:49

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


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

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

#4 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 134.3
  • posts: 15865
  • topics: 198

Posted 01 October 2014 - 20:17

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

 

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

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

 

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

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

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


  • 0
Есть вопрос — создайте СВОЮ новую тему!

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


#5 isay777

isay777
  • JBZoo Partner
  • User rate: 110.4
  • posts: 1767
  • topics: 209

Posted 01 October 2014 - 21:02

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

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


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

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

#6 Tunga

Tunga
  • JBZoo User (rus)
  • User rate: 8.7
  • posts: 539
  • topics: 117

Posted 01 October 2014 - 21:06

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

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

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


  • 2

JBZoo это круто!


#7 CB9TOIIIA

CB9TOIIIA
  • JBZoo Promotion
  • User rate: 203.3
  • posts: 1747
  • topics: 202

Posted 06 October 2014 - 18:51

вот эту няшку прикрутишь Денис? :) красота: http://tristanedwards.me/sweetalert
 
MKSYtrv.gif
  • 3
b3sky9c.jpg Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru 0_a5dfa_59170f8b_orig.png JBZoo чат (ninja) (skype) J! Club ¯\_(ツ)_/¯  / 0_a8adc_9b13e908_orig.png Хаки, костыли и ускоряшки для Zoo

#8 Cheren-dow

Cheren-dow
  • JBZoo Partner
  • User rate: 96.8
  • posts: 5057
  • topics: 31

Posted 06 October 2014 - 18:54

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

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


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

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

#9 CB9TOIIIA

CB9TOIIIA
  • JBZoo Promotion
  • User rate: 203.3
  • posts: 1747
  • topics: 202

Posted 06 October 2014 - 18:59

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

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


  • 1
b3sky9c.jpg Админ Joomla-support.ru (wfh) / Мой скайп: (skype) cb9t.ru 0_a5dfa_59170f8b_orig.png JBZoo чат (ninja) (skype) J! Club ¯\_(ツ)_/¯  / 0_a8adc_9b13e908_orig.png Хаки, костыли и ускоряшки для Zoo

#10 Cheren-dow

Cheren-dow
  • JBZoo Partner
  • User rate: 96.8
  • posts: 5057
  • topics: 31

Posted 06 October 2014 - 19:11

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

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


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





Click to return to top of page in style!