CSS
Обязательно должна присутствовать "шапка" в каскадных таблицах стилей (CSS) (для каждого независимого шаблона) для корректной работы js:
html{height:100%}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0;overflow-y:scroll;font:17px/24px Verdana;color:#000;background-color:#fff}
header,nav,main,aside,footer{display:block;z-index:5}img{border:none;max-width:100%;height:auto}p{margin:0 0 24px;padding:0}
table{border:none;border-collapse:collapse}table td{padding:0}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.tomain{display:none;width:320px;height:55px;position:fixed;z-index:10000001;margin:auto;left:0;right:0;top:10px}
.overb{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;z-index:10000000;background-color:rgba(0,0,0,.8)}
.overb:hover *{opacity:1}.over{position:fixed;z-index:10000001;overflow-x:hidden}
.fbn{position:fixed;top:1%;right:1%;margin:0;padding:0;width:38px;height:38px;background:none !important;border:none !important;outline:0 !important;box-shadow:none !important;cursor:pointer;opacity:.7;transition:.3s ease}
.fbn:before,.fbn:after{content:'';position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;transform:rotate(45deg);height:34px !important;width:2px !important;background-color:#fff !important;transition:.3s ease}
.fbn:after{transform:rotate(-45deg)}.fbx:hover:before,.fbx:hover:after{transform:rotate(-450deg)}
.fixed{position:fixed !important}
Код специально вынесен в CCS для возможности изменения под конкретный сайт, менять цвета итп. можно, а вот z-index:10000000 нет :) Индекс такой большой, чтоб перекрывал внешние скрипты/сервисы обратного звонока итп.
Шаблоны находятся примерно тут inc/styles/def/_.css
Стили для использования встроенных анимаций итп. вместе с JavaScript библиотекой:
Эффект аккордеона [accordion]
.ac{overflow:hidden;border:1px solid #000;border-radius:6px;box-sizing:border-box}
.ac h2,.ac h3{margin:0;padding:9px 16px;position:relative;font:bold 15px/21px Verdana;color:#000;cursor:pointer;border-top:1px solid #000}
.ac h2:first-of-type,.ac h3:first-of-type{border-top:none}
.ac h2:after,.ac h3:after{content:'';position:absolute;right:9px;display:block;font-size:0;border:6px solid transparent;top:17px;border-top:5px solid #000;border-bottom:0}
.ac .open:after{border-bottom:5px solid #f00;border-top:0}
.ac h2+div,.ac h2+p,.ac h2+ul,.ac h3+div,.ac h3+p,.ac h3+ul{display:none;padding:0 16px;overflow:hidden;border-top:1px solid #000}
.ac h2+div:before,.ac h2+p:before,.ac h3+div:before,.ac h3+p:before{display:block;content:'';height:9px;font-size:0}/*для вертикальных отступов*/
.ac h2+div:after,.ac h2+p:after,.ac h3+div:after,.ac h3+p:after{display:block;content:'';height:9px;font-size:0}/*без прыжков при анимации*/
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.ac h2+div,.ac h2+p,.ac h2+ul,.ac h3+div,.ac h3+p,.ac h3+ul{display:block !important}
*/
ссылка-якорь на стили к accordion
Фиксация элемента при скролле страницы вниз (js задаст класс fixed перечисленным элементам) [fix]
Простое появление без эффектов:
.fixme{display:none;height:35px;position:absolute;z-index:10;left:0;right:0;top:0;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5)}
.fixme.fixed{display:block}
Выезд сверу:
.fixme{position:fixed;z-index:1;height:100px;top:-100px;left:0;right:0;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5);transition:top .5s ease}
.fixme.fixed{top:0}
Появление с нарастанием прозрачности:
.fixme{height:35px;position:absolute;z-index:10;top:-100px;left:0;right:0;opacity:0;transition:opacity .3s ease;background-color:#f00;box-shadow: 0 3px 3px -3px rgba(0,0,0,.5)}
.fixme.fixed{opacity:1;top:0}
ссылка-якорь на стили к fix
Кнопка наверх (к началу страницы) [goup]
.goup{display:none;position:fixed;z-index:100;padding:0;width:44px;height:36px;bottom:10px;right:10px;font:24px/24px Verdana;color:#fff;text-transform:uppercase;border:2px solid #fff;cursor:pointer}
.goup:hover{background:linear-gradient(#000,#ccc)}
ссылка-якорь на стили к goup
Слайдер (карусель) [slide]
.slide{display:inline-block;position:relative;margin:0 auto;line-height:0;overflow:hidden}
.slide div{display:none;width:100%;height:auto;margin:0 auto;position:absolute;top:0;left:0}
.slide div:nth-of-type(1){display:block}
.slide div img{position:relative;z-index:2}
.slide ins{position:absolute;z-index:9;margin:auto;left:0;right:0;bottom:5%;text-align:center;font-size:0}
.slide ins i{display:inline-block;width:8px;height:8px;font-size:0;margin:0 5px;border:2px solid #fff;border-radius:9px;cursor:pointer}
.slide .on{background-color:#fff;border-color:#fff !important}
.slide .fbn{position:absolute;z-index:10;height:100%;top:0;left:0;padding:0 4%;box-shadow:none;border-radius:0}
.slide .fbn:hover{background:rgba(0,0,0,.2);opacity:1}
.slide .fbn:nth-of-type(1){left:auto;right:0;transform:rotate(180deg)}
.slide .fbn:before,.slide .fbn:after{width:5px;height:33px;top:-20px}
.slide .fbn:after{top:20px}
.slide p{position:absolute;z-index:3;margin:auto;left:0;right:0;top:4%;text-align:center;font:bold 38px/38px Verdana;color:#fff;text-shadow:0 1px 1px #735206}
.slide span{display:block;font:16px/18px Verdana;color:#ff7b00}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.slide div{margin:0;display:block !important;position:relative !important}
*/
Ещё вариант с элементами управления вынесенными на уровень
слайдера в блок .slidein и картинкой стрелочек из спрайта:
.slidein{position:relative;margin-top:18vw;line-height:0}
.slide{display:inline-block;position:relative;z-index:1;margin:0 4.6vw;line-height:0;overflow:hidden;box-shadow:0 0 21px rgba(0,3,2,.38);}
.slide div{display:none;width:100%;height:auto;margin:0 auto;position:absolute;top:0;left:0}
.slide div:nth-of-type(1){display:block}
.slide div img{position:relative;z-index:2;}
.slidein ins{position:absolute;z-index:9;margin:auto;left:0;right:0;bottom:-38px;text-align:center;font-size:0;line-height:0}
.slidein ins i{position:relative;top:-4px;display:inline-block;width:8px;height:8px;font-size:0;line-height:0;margin:0 10px;background-color:#bbb;border-radius:16px;cursor:pointer}
.slidein .on{width:17px;height:17px;top:0;background-color:#fff;}
.slidein .fbn{position:absolute;z-index:10;height:100%;top:0;left:0;padding:0 10vw;box-shadow:none;opacity:1 !important;border-radius:0}
.slidein .fbn:before,.slidein .fbn:after{opacity:1;width:31px;height:52px;background:url('../sprite.png') -281px 0 no-repeat;transform:none;}
.slidein .fbn:after{opacity:0;background-position:-311px 0;}
.slidein .fbn:hover:after{opacity:1;}
.slidein .fbn:hover:before{opacity:0;}
.slidein .fbn:nth-of-type(1){left:auto;right:0;/*transform:rotate(180deg) "прыгает" в Firefox*/}
.slidein .fbn:nth-of-type(1):before{background-position:-281px -52px;}
.slidein .fbn:nth-of-type(1):after{background-position:-311px -52px;}
.slide p{position:absolute;z-index:3;margin:auto;left:1%;right:1%;bottom:1%;text-align:center;font:4vw/5vw Verdana;letter-spacing:.2em;padding:4px 0 0;text-transform:uppercase;color:#fff;background-color:#2d2d2d;border-radius:6px}
@media screen and (min-width:1000px){
.slidein{margin-top:6%}
.slide{width:770px}
.slidein .fbn{padding:0 80px;left:50%;margin-left:-530px}
.slidein .fbn:nth-of-type(1){right:auto;margin-left:-60px}
.slide p{width:437px;font:21px/36px Verdana;letter-spacing:.15em;left:0;right:0;bottom:47%;margin:0 auto;padding:7px 0 3px;border-radius:9px}
}
ссылка-якорь на стили к slide
Переключаемые вкладки [tabs]
.tabs{min-width:300px;max-width:600px;margin:0 auto}
.tabs ul:first-of-type{display:block;margin:0;padding:0;font-size:0;line-height:0;list-style:none}
.tabs ul:first-of-type li{display:inline-block;margin-right:2px;padding:0 15px;height:47px;font:21px/47px Verdana;color:#000;background-color:#ccc;text-align:center;cursor:pointer;transition:.3s ease}
.tabs ul:first-of-type li.on{background-color:#a0faa0;color:#3f32bb}
.tabs div{display:none;box-sizing:border-box;padding:15px 3% 16px;background-color:#a0faa0;box-shadow:0 5px 5px -5px #333}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.tabs div{display:block !important}
*/
ссылка-якорь на стили к tabs
Слайдер лента (карусель с блоками внутри) [tape]
.tape,.tape code,.tape ins{position:relative;height:185px;font-size:0;line-height:0;overflow:hidden}
.tape code{display:block;z-index:8}
.tape ins{position:absolute}
.tape div{position:relative;display:inline-block;width:300px;height:185px;background-color:#f0f;margin-right:4px}
.tape div p{position:absolute;top:10px;left:10px;font:bold 38px/38px Verdana;color:#fff}
.tape .fbn{width:60px;position:absolute;z-index:10;height:100%;top:0;left:0;box-shadow:none;border-radius:0;background:rgba(0,0,0,.2)}
.tape .fbn:hover{background:rgba(0,0,0,.3);opacity:1}
.tape .fbn:nth-of-type(1){left:auto;right:0;transform:rotate(180deg)}
.tape .fbn:before,.tape .fbn:after{width:5px;height:33px;top:-20px}
.tape .fbn:after{top:20px}
.tape.vert,.tape.vert code,.tape.vert ins{width:300px;height:313px}
.tape.vert code{height:193px;margin:60px 0}
.tape.vert div{display:block;margin:4px 0 0}
.tape.vert .fbn{width:100%;height:60px;margin:auto;top:0;left:0;right:0}
.tape.vert .fbn:nth-of-type(1){top:auto;bottom:0;transform:rotate(180deg)}
.tape.vert .fbn:after{top:0;left:20px;transform:rotate(135deg)}
.tape.vert .fbn:before{top:0;left:-20px}
@media screen and (min-width:600px){
.tape code{margin:0 60px}
.tape div{margin:0 0 0 4px}
}
/* Фикс для ПУ сайта (по умолчанию)
/a/context/fix.css
.tape{height:auto !important;margin-bottom:10px !important}
*/
ссылка-якорь на стили к tape
Всплывающая/выезжающая подсказка [ff.alert()]
.alert{position:fixed;z-index:10000002 !important;box-sizing:border-box;width:280px;padding:28px 18px 24px;background-color:#fff;font:13px/15px Verdana;color:#2f2f2f;border:1px solid #c3c0c0;box-shadow:inset 0 0 9px #c3c0c0;border-radius:6px}
.alert ins:nth-of-type(1){display:block;position:absolute;left:-9999px;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #e2e2e2;border-top:0;font-size:0}
.alert .fbn{position:absolute;opacity:1;box-shadow:none;background:none}
.alert .fbn:before,.alert .fbn:after{background-color:#555 !important}
@media screen and (min-width:1000px){
.alert{width:400px;padding:28px 24px 24px}
}
ссылка-якорь на стили к alert
Меню (на маленьком расширении выезжает, на большом статично отображается) [ff.menu()]
nav{display:none;padding:54px 0 40px;width:300px;position:absolute;z-index:9;top:0;left:0;background-color:#fff}
nav:before{content:'';display:block;width:100%;height:53px;position:absolute;z-index:1;top:0;left:0;background-color:#f00}
nav span{position:absolute;z-index:2;top:16px;left:30px;font:27px/27px Bookvica;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4)}
nav button{position:absolute !important;z-index:3;top:8px !important;right:5px !important;opacity:1 !important;box-shadow:none !important}
nav button:focus{outline:1px dashed #fff !important}
nav button:hover:before,nav button:hover:after{background-color:#ececec;transform:rotate(-450deg)}
nav a{position:relative;display:block;margin:1px;padding:13px 30px 14px;font:21px/21px Verdana;background-color:#fff;text-decoration:none !important}
nav a:before{content:'';position:absolute;top:0;left:30px;right:30px;border-top:1px solid #cecece}
nav a:first-of-type:before{display:none}
nav a:link,nav a:visited{color:#444}
nav a:active,nav a:hover{color:#555}
nav .da:link,nav .da:visited{color:#cecece;cursor:default !important}
@media screen and (min-width:1000px){
nav{width:980px;display:block !important;text-align:right;height:0;top:55px !important;font-size:0;padding:0;margin:auto;left:0 !important;right:0 !important}
nav span,nav button,nav:before,nav a:before{display:none}
nav a{display:inline-block;height:30px;margin:0 !important;padding:0 20px !important;border-top:none !important;font:bold 15px/30px Verdana;color:#fff !important;text-shadow:0 1px 1px #735206;background:linear-gradient(#111,#ccc);box-shadow:0 6px 6px -4px rgba(0,0,0,.2),0 0 0 2px #fff,0 0 0 1px #ececec}
nav a:first-of-type{border-top-left-radius:6px;border-bottom-left-radius:6px}
nav a:last-of-type{border-top-right-radius:6px;border-bottom-right-radius:6px}
nav a:hover,nav a:active{background:linear-gradient(#111,#ccc)}
nav .da{background:none !important;background-color:#555 !important}
header button:nth-of-type(2){display:none}/*прячем button меню*/
}
ссылка-якорь на стили к menu
Всплывающая/выезжающая форма для обратной связи итп. [ff.mes()]
.mes{box-sizing:border-box;width:300px;border-radius:9px;background-color:#fff;padding:0 10px 25px}
.mes h2{margin:28px 0 27px}
.mes small{font:13px/17px Verdana}
.mes small,.mes h2{display:block;text-align:center}
.mes label{display:block;font:15px/18px Verdana}
.mes textarea:nth-of-type(3){height:100px}
.mes [role='alert']{text-align:center;padding:60px 10px 0}
.mes input[type='text'],.mes .fpass,.mes textarea{box-sizing:border-box;width:100%;height:44px;margin:3px 0 5px;padding:12px 0 0 13px;border-radius:6px;border:1px solid #dadada;font:16px/18px Verdana;color:#111;resize:none}
.mes input[type='text'],.mes .fpass{margin-bottom:12px;padding-top:1px}
input+[role='tooltip'],textarea+[role='tooltip']{display:none;position:absolute;z-index:100;left:10px;right:10px;margin-top:-10px;padding:0 8px;background-color:#fff;font:italic 13px/28px Verdana;color:#f00;border:1px solid #f00;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
input:focus+[role='tooltip'],textarea:focus+[role='tooltip']{display:block}
.mes .keyo,.mes .keyo+a{display:inline-block;vertical-align:middle;margin-right:10px;font:15px/15px Verdana}
.mes button{box-sizing:border-box;display:inline-block;width:100%;margin:14px 0;padding:11px 40px 12px;border:none;border-radius:6px;transition:.2s ease;text-align:center;font:bold 15px/15px Verdana;color:#fff;text-shadow:0 1px 1px #735206;background:linear-gradient(#111,#ccc);cursor:pointer}
.mes button:hover{background:linear-gradient(#111,#ccc)}
/* если добавляем показ языка ввода в поле пароля */
.mes kbd{display:none;position:absolute;right:5%;margin-top:-50px;font:13px/13px Verdana}
.mes .fpass:focus+kbd,.mes .fpass:focus+[role='tooltip']+kbd{display:block}
/* если добавляем кнопку показывать символы в поле пароля */
.mes .fpass{padding-left:40px !important;}
.mes var{position:absolute;left:12px;width:36px;height:41px;margin-top:5px;font-size:0;line-height:0;text-align:center;cursor:pointer}
.mes var i{font-size:17px;line-height:41px;color:#ccc}
.mes select{box-sizing:border-box;height:34px;padding:4px 5px 5px;font:16px/20px Verdana;color:#222;background:linear-gradient(#111,#ccc);border-radius:3px}
.mes select:-moz-focusring{color:transparent;text-shadow:0 0 0 #222}
.mes .fcbox{display:inline-block;margin:20px 4px 0 30px}
.mes .fcbox+input[type='checkbox']{display:inline-block;position:relative;top:3px}
.mes input[type='file']{display:none}
.mes .ffile{height:34px;padding:2px;margin:21px 0 9px;position:relative;border:1px solid #dadada;border-radius:6px}
.mes .ffile span{display:block;margin-top:-24px}
.mes .ffile i{display:block;position:absolute;z-index:1;top:2px;left:12px;font:14px/34px Verdana;overflow:hidden}
.mes .ffile button{display:inline-block;width:auto;padding:10px 30px 10px;margin:0;position:absolute;z-index:2;top:2px;right:2px;font:bold 14px/14px Verdana}
.mes .fdrop{height:70px}
.mes .fdrop i{width:240px;margin:auto;left:0;right:0;top:11px;font:14px/16px Verdana;text-align:center}
.mes .fdrop.fhover{background-color:#ddd}
.mes .fdrop button{width:70px;display:block;margin:auto;top:32px;left:2px}
@-moz-document url-prefix(){
.mes button{padding:10px 40px 13px}
.mes input[type='text'],.mes .fpass,.mes textarea{margin:3px 0 9px;padding:11px 0 0 13px}
.mes input[type='text'],.mes .fpass{padding-top:0}
.mes .ffile i{font:14px/32px Verdana}
.mes .ffile button{padding:9px 30px 11px}
}
@media screen and (min-width:1000px){
.mes{width:360px}
}
ссылка-якорь на стили к mes
Галерея изображений fotobox (кнопка закрыть)
/* Чёрный крестик справа сверху блока с изображением */ .fxb{top:3%;right:13%} .fxb:before,.fxb:after{background-color:#000} ссылка-якорь на стили к fotobox