├── README ├── _www ├── css │ ├── reset.css │ ├── skin.css │ └── style.css ├── favicon.ico └── index.html ├── _xtensions ├── ie │ ├── ie.css │ └── pie │ │ ├── PIE.js │ │ ├── license.txt │ │ └── readme.txt ├── scripts │ └── flexslider │ │ ├── LICENSE.txt │ │ ├── demo.html │ │ ├── flexslider.css │ │ ├── jquery.flexslider-min.js │ │ └── readme.txt └── snippets │ ├── dropdown_menu.txt │ ├── responsive_navigation │ ├── footer_anchor.html │ ├── jquery.mobilemenu.min.js │ ├── select_menu.html │ ├── side_flyout.html │ └── toggle_menu.html │ └── sticky_footer.txt ├── aim └── skin.css ├── bigcoloridea ├── Blue │ └── skin.css ├── Dark-Blue │ └── skin.css ├── Orange │ └── skin.css ├── Pink │ └── skin.css ├── Purple │ └── skin.css └── Red │ └── skin.css ├── blackberry └── skin.css ├── fresh └── skin.css ├── fruitjuice └── skin.css ├── glimpse └── skin.css ├── humble └── skin.css ├── illusion └── skin.css ├── isimple └── skin.css ├── liner └── skin.css ├── maple └── skin.css ├── mentol └── skin.css ├── moderndark ├── Blue │ └── skin.css ├── Green │ └── skin.css ├── Orange │ └── skin.css ├── Pink │ └── skin.css ├── Purple │ └── skin.css ├── Red │ └── skin.css └── Yellow │ └── skin.css ├── nightroad └── skin.css ├── passion └── skin.css ├── simplesoft └── skin.css ├── simpleswiss └── skin.css ├── simploid └── skin.css ├── snobbish └── skin.css ├── solution └── skin.css ├── stylus └── skin.css └── teawithmilk └── skin.css /README: -------------------------------------------------------------------------------- 1 | "Simpliste" is a simple responsive HTML5 template 2 | 3 | http://cssr.ru/simpliste/ 4 | 5 | Copyright (c) 2012 Renat Rafikov 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | 12 | How to use: 13 | 14 | 1. Choose a skin 15 | 2. Copy "skin.css" into "_www/css" folder 16 | 3. Open "index.html" -------------------------------------------------------------------------------- /_www/css/reset.css: -------------------------------------------------------------------------------- 1 | /* CSS reset. Based on HTML5 boilerplate reset http://html5boilerplate.com/ */ 2 | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; } 3 | audio[controls], canvas, video { display:inline-block; *display:inline; *zoom:1; } 4 | html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 5 | body { margin: 0; font-size: 14px; line-height: 1.4; } 6 | body, button, input, select, textarea { font-family:sans-serif; } 7 | a:focus { outline:thin dotted; } 8 | a:hover, a:active { outline:0; } 9 | abbr[title] { border-bottom:1px dotted; } 10 | b, strong { font-weight:bold; } 11 | blockquote { margin:1em 40px; } 12 | dfn { font-style:italic; } 13 | hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } 14 | ins { background:#ff9; color:#000; text-decoration:none; } 15 | mark { background:#ff0; color:#000; font-style:italic; font-weight:bold; } 16 | pre, code, kbd, samp { font-family:monospace, monospace; _font-family:'courier new', monospace; font-size:1em; } 17 | pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; } 18 | q { quotes:none; } 19 | q:before, q:after { content:""; content:none; } 20 | small { font-size:85%; } 21 | sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } 22 | sup { top:-0.5em; } 23 | sub { bottom:-0.25em; } 24 | ul, ol { margin:1em 0; padding:0 0 0 2em; } 25 | dd { margin:0 0 0 40px; } 26 | nav ul, nav ol { list-style:none; margin:0; padding:0; } 27 | img { border:0; -ms-interpolation-mode:bicubic; } 28 | svg:not(:root) { overflow:hidden;} 29 | figure { margin:0; } 30 | form { margin:0; } 31 | fieldset { border:0; margin:0; padding:0; } 32 | legend { border:0; *margin-left:-7px; padding:0; } 33 | label { cursor:pointer; } 34 | button, input, select, textarea { font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle; } 35 | button, input { line-height:normal; *overflow:visible; } 36 | button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; -webkit-appearance:button; } 37 | input[type="checkbox"], input[type="radio"] { box-sizing:border-box; } 38 | input[type="search"] { -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } 39 | button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; } 40 | textarea { overflow:auto; vertical-align:top; } 41 | input:valid, textarea:valid { } 42 | input:invalid, textarea:invalid { background-color:#f0dddd; } 43 | table { border-collapse:collapse; border-spacing:0; } 44 | .hidden { display:none; visibility:hidden; } 45 | .clearfix:before, .clearfix:after { content:""; display:table; } 46 | .clearfix:after { clear:both; } 47 | .clearfix { zoom:1; } 48 | /* End CSS reset */ -------------------------------------------------------------------------------- /_www/css/skin.css: -------------------------------------------------------------------------------- 1 | /* Skin "Simple" by Renat Rafikov */ 2 | body { 3 | font-family:arial, sans-serif; 4 | color:#333; 5 | } 6 | 7 | a { color:#004dd9; } 8 | a:hover { color:#ea0000; } 9 | a:visited { color:#551a8b; } 10 | 11 | ul li, ol li { 12 | padding:0 0 0.4em 0; 13 | } 14 | 15 | 16 | .container { 17 | max-width:1300px; 18 | margin:0 auto; 19 | } 20 | 21 | .header { 22 | margin:1px 0 3em 0; 23 | padding:2em 2% 0 2%; 24 | } 25 | 26 | .logo { 27 | float:left; 28 | display:inline-block; 29 | padding:0 0 1em; 30 | border-bottom:1px solid #000; 31 | font-size:18px; 32 | color:#ea0000; 33 | } 34 | 35 | .menu_main { 36 | width:50%; 37 | float:right; 38 | text-align:right; 39 | margin:0.3em 0 0 0; 40 | } 41 | .menu_main a, 42 | .menu_main a:visited { 43 | } 44 | .menu_main a:hover, 45 | .menu_main a:hover:visited { 46 | } 47 | .menu_main li { 48 | display:inline-block; 49 | margin:0 0 0 7px; 50 | } 51 | .menu_main li.active, 52 | .menu_main li.active a { 53 | color:#000; 54 | text-decoration:none; 55 | cursor:default; 56 | } 57 | 58 | 59 | .info { 60 | padding:0 0 1em 2%; 61 | } 62 | 63 | .hero {} 64 | .hero h1 { 65 | font-size:26px; 66 | font-family:georgia, serif; 67 | font-style:italic; 68 | color:#EA0000; 69 | } 70 | 71 | .article {} 72 | 73 | .footer { 74 | border-top:1px solid #666; 75 | padding:2em 2% 3em 2%; 76 | color:#666; 77 | } 78 | 79 | .copyright { 80 | width:49%; 81 | float:left; 82 | font-family:georgia, serif; 83 | font-style:italic; 84 | } 85 | 86 | .menu_bottom { 87 | width:50%; 88 | float:right; 89 | text-align:right; 90 | margin:0; 91 | padding:0; 92 | } 93 | .menu_bottom a, 94 | .menu_bottom a:visited { 95 | } 96 | .menu_bottom a:hover, 97 | .menu_bottom a:hover:visited { 98 | } 99 | .menu_bottom li { 100 | display:inline-block; 101 | margin:0 0 0 7px; 102 | } 103 | .menu_bottom li.active, 104 | .menu_bottom li.active a { 105 | color:#666; 106 | text-decoration:none; 107 | cursor:default; 108 | } 109 | 110 | h1, h2 { 111 | font-weight:normal; 112 | color:#000; 113 | } 114 | h1 { 115 | font-size:22px; 116 | } 117 | h3, h4, h5, h6 { 118 | font-weight:bold; 119 | color:#000; 120 | } 121 | 122 | .form label { 123 | display:inline-block; 124 | padding:0 0 4px 0; 125 | } 126 | 127 | a.button, 128 | .button { 129 | border:1px solid #d00303; 130 | text-align:center; 131 | text-decoration:none; 132 | -webkit-border-radius:4px; 133 | -moz-border-radius:4px; 134 | border-radius:4px; 135 | -webkit-box-shadow:#000 0px 0px 1px; 136 | -moz-box-shadow:#000 0px 0px 1px; 137 | box-shadow:#000 0px 0px 1px; 138 | background:#ea0000; 139 | background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ea0000), to(#d00303)); 140 | background:-webkit-linear-gradient(#ea0000, #d00303); 141 | background:-moz-linear-gradient(#ea0000, #d00303); 142 | background:-ms-linear-gradient(#ea0000, #d00303); 143 | background:-o-linear-gradient(#ea0000, #d00303); 144 | background:linear-gradient(#ea0000, #d00303); 145 | color:#fff; 146 | padding:12px 20px; 147 | font-family:verdana, sans-serif; 148 | text-shadow:1px 1px 1px #d03302; 149 | display:inline-block; 150 | } 151 | a.button:hover, 152 | .button:hover { 153 | color:#fff; 154 | background:-webkit-gradient(linear, 0 0, 0 bottom, from(#d00303), to(#ea0000)); 155 | background:-webkit-linear-gradient(#d00303, #ea0000); 156 | background:-moz-linear-gradient(#d00303, #ea0000); 157 | background:-ms-linear-gradient(#d00303, #ea0000); 158 | background:-o-linear-gradient(#d00303, #ea0000); 159 | background:linear-gradient(#d00303, #ea0000); 160 | } 161 | a.button:active, 162 | .button:active { 163 | color:#8c1515; 164 | text-shadow:1px 1px 1px #ffaeae; 165 | -webkit-box-shadow:#a10000 0px -3px 3px inset; 166 | -moz-box-shadow:#a10000 0px -3px 3px inset; 167 | box-shadow:#a10000 0px -3px 3px inset; 168 | } 169 | 170 | .table { 171 | width:100%; 172 | } 173 | .table th { 174 | padding:5px 7px; 175 | font-weight:normal; 176 | text-align:left; 177 | font-size:1.2em; 178 | background:#ffffff; 179 | background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#F7F7F7)); 180 | background:-webkit-linear-gradient(#ffffff, #F7F7F7); 181 | background:-moz-linear-gradient(#ffffff, #F7F7F7); 182 | background:-ms-linear-gradient(#ffffff, #F7F7F7); 183 | background:-o-linear-gradient(#ffffff, #F7F7F7); 184 | background:linear-gradient(#ffffff, #F7F7F7); 185 | } 186 | .table td { 187 | padding:5px 7px; 188 | } 189 | .table tr { 190 | border-bottom:1px solid #ddd; 191 | } 192 | .table tr:last-child { 193 | border:0; 194 | } 195 | 196 | .warning { 197 | border:1px solid #ec252e; 198 | color:#fff; 199 | padding:8px 14px; 200 | background:#EA0000; 201 | -webkit-border-radius:8px; 202 | -moz-border-radius:8px; 203 | border-radius:8px; 204 | } 205 | .success { 206 | border:1px solid #399f16; 207 | color:#fff; 208 | background:#399f16; 209 | padding:8px 14px; 210 | -webkit-border-radius:8px; 211 | -moz-border-radius:8px; 212 | border-radius:8px; 213 | } 214 | .message { 215 | border:1px solid #f1edcf; 216 | color:#000; 217 | background:#fbf8e3; 218 | padding:8px 14px; 219 | -webkit-border-radius:8px; 220 | -moz-border-radius:8px; 221 | border-radius:8px; 222 | } 223 | 224 | 225 | @media only screen and (max-width:480px) { /* Smartphone custom styles */ 226 | } 227 | 228 | @media only screen and (max-width:768px) { /* Tablet custom styles */ 229 | } -------------------------------------------------------------------------------- /_www/css/style.css: -------------------------------------------------------------------------------- 1 | /* "Simpliste" template. Renat Rafikov. http://cssr.ru/simpliste/ */ 2 | 3 | @import url('reset.css'); 4 | @import url('skin.css'); 5 | 6 | 7 | /* Columns 8 | ------- 9 | .col_33 | .col_33 | .col_33 10 | .clearfix 11 | ------- 12 | .col_75 | .col_25 13 | .clearfix 14 | ------- 15 | .col_66 | .col_33 16 | .clearfix 17 | ------- 18 | .col_50 | .col_50 19 | .clearfix 20 | ------- 21 | .col_100 22 | ------- 23 | */ 24 | .col_25 { 25 | width:23%; 26 | margin:0 2% 0 0; 27 | float:left; 28 | } 29 | .col_33 { 30 | width:31%; 31 | margin:0 2% 0 0; 32 | float:left; 33 | } 34 | .col_50 { 35 | width:48%; 36 | margin:0 2% 0 0; 37 | float:left; 38 | } 39 | .col_66 { 40 | width:64%; 41 | margin:0 2% 0 0; 42 | float:left; 43 | } 44 | .col_75 { 45 | width:73%; 46 | margin:0 2% 0 0; 47 | float:left; 48 | } 49 | .col_100 { 50 | width:98%; 51 | margin:0 2% 0 0; 52 | } 53 | 54 | .col_25.wrap { width:25%; margin:0;} 55 | .col_33.wrap { width:33%; margin:0;} 56 | .col_50.wrap { width:50%; margin:0;} 57 | .col_66.wrap { width:66%; margin:0;} 58 | .col_75.wrap { width:75%; margin:0;} 59 | .col_100.wrap { width:100%; margin:0;} 60 | /* End columns */ 61 | 62 | 63 | /* Helper classes */ 64 | .center {text-align:center;} 65 | .left {text-align:left;} 66 | .right {text-align:right;} 67 | 68 | .img_floatleft {float:left; margin:0 10px 5px 0;} 69 | .img_floatright {float:right; margin:0 0 5px 10px;} 70 | 71 | .img {max-width:100%;} 72 | /* End helper classes */ 73 | 74 | a.button { color:auto; } 75 | 76 | @media only screen and (max-width:480px) { /* Smartphone */ 77 | .header { 78 | margin-bottom:0; 79 | } 80 | 81 | .logo{ 82 | display:block; 83 | float:none; 84 | text-align:center; 85 | } 86 | 87 | .menu_main { 88 | width:100%; 89 | text-align:center; 90 | float:none; 91 | padding:0; 92 | margin:1em 0 0 0; 93 | } 94 | 95 | .menu_main a { 96 | display:inline-block; 97 | padding:7px; 98 | } 99 | 100 | .copyright { 101 | width:100%; 102 | float:none; 103 | text-align:center; 104 | } 105 | 106 | .footer { 107 | padding-bottom:0; 108 | } 109 | 110 | .menu_bottom { 111 | width:100%; 112 | float:none; 113 | text-align:center; 114 | margin:1em 0 0 0; 115 | padding:0; 116 | } 117 | .menu_bottom a { 118 | display:inline-block; 119 | padding:6px; 120 | } 121 | 122 | .form textarea { 123 | width:100%; 124 | } 125 | .form label { 126 | padding:10px 0 8px 0; 127 | } 128 | } 129 | 130 | 131 | @media only screen and (max-width:768px) { /* Tablet */ 132 | .col_25, 133 | .col_33, 134 | .col_66, 135 | .col_50 , 136 | .col_75 { 137 | width:98%; 138 | float:none; 139 | } 140 | 141 | .form label { 142 | padding:10px 0 8px 0; 143 | } 144 | } 145 | 146 | 147 | @media print { /* Printer */ 148 | * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } 149 | a, a:visited { color:#444 !important; text-decoration:underline; } 150 | a[href]:after { content:" (" attr(href) ")"; } 151 | abbr[title]:after { content:" (" attr(title) ")"; } 152 | pre, blockquote { border:1px solid #999; page-break-inside:avoid; } 153 | thead { display:table-header-group; } 154 | tr, img { page-break-inside:avoid; } 155 | img { max-width:100% !important; } 156 | @page { margin:0.5cm; } 157 | p, h2, h3 { orphans:3; widows:3; } 158 | h2, h3{ page-break-after:avoid; } 159 | 160 | .header, .footer, .form {display:none;} 161 | .col_33, .col_66, .col_50 { width:98%; float:none; } 162 | } -------------------------------------------------------------------------------- /_www/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafikov/Simpliste/6e88fa88ea1c8792e00b1b34afdf9db5f1d83588/_www/favicon.ico -------------------------------------------------------------------------------- /_xtensions/ie/ie.css: -------------------------------------------------------------------------------- 1 | /* Skin styles for IE */ 2 | 3 | /* 4 | IE < 8 not supported by Simpliste skins. But you can manually fix some problems using the styles below. Either copy them into your style.css file or make links to ie.css file from your site pages. 5 | "/" is a hack used to apply styles to IE 7 and below. 6 | */ 7 | 8 | /* For IE 7 "inline-block" property has to be replaced with "inline" */ 9 | .menu_main li, 10 | .menu_bottom li { 11 | /display:inline; 12 | } 13 | 14 | /* If you don't like the way headers' default styles look in IE 7 */ 15 | h1,h2,h3,h4,h5,h6 { 16 | /display:block; 17 | /clear:both; 18 | /margin:0.7em 0; 19 | } 20 | 21 | /* End skin styles for IE */ -------------------------------------------------------------------------------- /_xtensions/ie/pie/license.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010 Jason Johnston CSS3 PIE is licensed under the terms of the Apache License Version 2.0, or alternatively under the terms of the General Public License (GPL) Version 2. You may use PIE according to either of these licenses as is most appropriate for your project on a case-by-case basis. The terms of each license can be found in the main directory of the PIE source repository: Apache License: http://github.com/lojjic/PIE/blob/master/LICENSE-APACHE2.txt GPL2 License: http://github.com/lojjic/PIE/blob/master/LICENSE-GPL2.txt -------------------------------------------------------------------------------- /_xtensions/ie/pie/readme.txt: -------------------------------------------------------------------------------- 1 | http://css3pie.com/ PIE script makes IE 6-9 understand some of CSS3 properties: border-radius box-shadow linear-gradient (with -pie- prefix only) Script requires jQuery http://jquery.com/ To use it copy PIE.js to the javascript files folder, include link to the script in your pages in this way And invoke the script on elements with CSS3 properties. You can do it by adding special class to every such element (.rounded in example) or by listing existing classes in your javascript block ('.menu_main a, .menu_bottom a') $(function() { if (window.PIE) { $('.rounded').each(function() { PIE.attach(this); }); } }); PS Sometimes you will need to change the "position" property of the elements with PIE applied to "relative", it will help you to avoid some bugs: .rounded { position:relative; } -------------------------------------------------------------------------------- /_xtensions/scripts/flexslider/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011 Tyler Smith 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /_xtensions/scripts/flexslider/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 26 | 27 | 28 | 29 |
30 |
31 | 47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /_xtensions/scripts/flexslider/flexslider.css: -------------------------------------------------------------------------------- 1 | .flexslider { 2 | width:100%; 3 | margin:0; 4 | padding:0; 5 | } 6 | 7 | .flexslider .slides>li { 8 | display:none; 9 | } 10 | .flexslider .slides img { 11 | max-width:100%; 12 | display:block; 13 | } 14 | .flex-pauseplay span { 15 | text-transform:capitalize; 16 | } 17 | .slides:after { 18 | content:"."; 19 | display:block; 20 | clear:both; 21 | visibility:hidden; 22 | line-height:0; 23 | height:0; 24 | } 25 | 26 | html[xmlns] .slides { 27 | display:block; 28 | } 29 | * html .slides { 30 | height:1%; 31 | } 32 | 33 | .flexslider { 34 | background:#fff; 35 | border:4px solid #fff; 36 | position:relative; 37 | -webkit-border-radius:5px; 38 | -moz-border-radius:5px; 39 | -o-border-radius:5px; 40 | border-radius:5px; 41 | zoom:1; 42 | } 43 | .flexslider ul {list-style:none; margin:0; padding:0;} 44 | .flexslider .slides { 45 | zoom:1; 46 | } 47 | .flexslider .slides>li { 48 | position:relative; 49 | } 50 | .flex-container { 51 | zoom:1; 52 | position: relative; 53 | } 54 | 55 | /* Caption style */ 56 | /* IE rgba() hack */ 57 | .flex-caption { 58 | background:none; 59 | -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); 60 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); 61 | zoom:1; 62 | } 63 | .flex-caption { 64 | width:96%; 65 | padding:2%; 66 | position:absolute; 67 | left:0; 68 | bottom:0; 69 | background:rgba(0,0,0,.3); 70 | color:#fff; 71 | text-shadow:0 -1px 0 rgba(0,0,0,.3); 72 | font-size:14px; 73 | line-height: 18px; 74 | } 75 | 76 | /* Direction Nav */ 77 | .flex-direction-nav li a { 78 | width:52px; 79 | height:50px; 80 | margin:-13px 0 0; 81 | display:block; 82 | background:#d4d4d4; 83 | position:absolute; 84 | top:50%; 85 | cursor:pointer; 86 | text-indent:-9999px; 87 | -webkit-border-radius: 6px; 88 | -moz-border-radius: 6px; 89 | border-radius: 6px; 90 | -webkit-box-shadow:rgba(0,0,0,0.3) 0px 2px 2px; 91 | -moz-box-shadow:rgba(0,0,0,0.3) 0px 2px 2px; 92 | box-shadow:rgba(0,0,0,0.3) 0px 2px 2px; 93 | } 94 | .flex-direction-nav li .next { 95 | right:-21px; 96 | } 97 | .flex-direction-nav li .next:before { 98 | content:""; 99 | position:absolute; 100 | right:15px; 101 | top:8px; 102 | width:0; 103 | height:0; 104 | border-top:18px solid transparent; 105 | border-bottom:18px solid transparent; 106 | border-left:18px solid #6a6a6a; 107 | } 108 | .flex-direction-nav li .next:after { 109 | content:""; 110 | position:absolute; 111 | right:24px; 112 | top:17px; 113 | width:0; 114 | height:0; 115 | border-top:9px solid transparent; 116 | border-bottom:9px solid transparent; 117 | border-left:9px solid #d4d4d4; 118 | } 119 | 120 | .flex-direction-nav li .prev { 121 | left:-20px; 122 | } 123 | .flex-direction-nav li .prev:before { 124 | content:""; 125 | position:absolute; 126 | left:15px; 127 | top:8px; 128 | width: 0; 129 | height: 0; 130 | border-top:18px solid transparent; 131 | border-bottom:18px solid transparent; 132 | border-right:18px solid #6a6a6a; 133 | } 134 | .flex-direction-nav li .prev:after { 135 | content:""; 136 | position:absolute; 137 | left:24px; 138 | top:17px; 139 | width: 0; 140 | height: 0; 141 | border-top:9px solid transparent; 142 | border-bottom:9px solid transparent; 143 | border-right:9px solid #d4d4d4; 144 | } 145 | 146 | .flex-direction-nav li .disabled { 147 | opacity:.3; 148 | filter:alpha(opacity=30); 149 | cursor: default; 150 | } 151 | 152 | /* Control Nav */ 153 | .flex-control-nav { 154 | width:100%; 155 | position:absolute; 156 | bottom:-30px; 157 | text-align:center; 158 | } 159 | .flex-control-nav li { 160 | margin:0 0 0 5px; 161 | display:inline-block; 162 | zoom:1; 163 | /display:inline; 164 | } 165 | .flex-control-nav li:first-child { 166 | margin:0; 167 | } 168 | .flex-control-nav li a { 169 | width:12px; 170 | height:12px; 171 | display:block; 172 | background:#ffffff; 173 | cursor:pointer; 174 | text-indent:-9999px; 175 | border:1px solid #bbbbbb; 176 | -webkit-border-radius: 6px; 177 | -moz-border-radius: 6px; 178 | border-radius: 6px; 179 | } 180 | .flex-control-nav li a:hover { 181 | background:#82c5e7; 182 | border:1px solid #82c5e7; 183 | } 184 | .flex-control-nav li a.active { 185 | border:0; 186 | display:block; 187 | background:#289aca; 188 | cursor:default; 189 | border:1px solid #289aca; 190 | } -------------------------------------------------------------------------------- /_xtensions/scripts/flexslider/jquery.flexslider-min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery FlexSlider v1.8 3 | * http://flex.madebymufffin.com 4 | * Copyright 2011, Tyler Smith 5 | */ 6 | (function(a){a.flexslider=function(c,b){var d=c;d.init=function(){d.vars=a.extend({},a.flexslider.defaults,b);d.data("flexslider",true);d.container=a(".slides",d);d.slides=a(".slides > li",d);d.count=d.slides.length;d.animating=false;d.currentSlide=d.vars.slideToStart;d.animatingTo=d.currentSlide;d.atEnd=(d.currentSlide==0)?true:false;d.eventType=("ontouchstart" in document.documentElement)?"touchstart":"click";d.cloneCount=0;d.cloneOffset=0;d.manualPause=false;d.vertical=(d.vars.slideDirection=="vertical");d.prop=(d.vertical)?"top":"marginLeft";d.args={};d.transitions="webkitTransition" in document.body.style;if(d.transitions){d.prop="-webkit-transform"}if(d.vars.controlsContainer!=""){d.controlsContainer=a(d.vars.controlsContainer).eq(a(".slides").index(d.container));d.containerExists=d.controlsContainer.length>0}if(d.vars.manualControls!=""){d.manualControls=a(d.vars.manualControls,((d.containerExists)?d.controlsContainer:d));d.manualExists=d.manualControls.length>0}if(d.vars.randomize){d.slides.sort(function(){return(Math.round(Math.random())-0.5)});d.container.empty().append(d.slides)}if(d.vars.animation.toLowerCase()=="slide"){if(d.transitions){d.setTransition(0)}d.css({overflow:"hidden"});if(d.vars.animationLoop){d.cloneCount=2;d.cloneOffset=1;d.container.append(d.slides.filter(":first").clone().addClass("clone")).prepend(d.slides.filter(":last").clone().addClass("clone"))}d.newSlides=a(".slides > li",d);var m=(-1*(d.currentSlide+d.cloneOffset));if(d.vertical){d.newSlides.css({display:"block",width:"100%","float":"left"});d.container.height((d.count+d.cloneCount)*200+"%").css("position","absolute").width("100%");setTimeout(function(){d.css({position:"relative"}).height(d.slides.filter(":first").height());d.args[d.prop]=(d.transitions)?"translate3d(0,"+m*d.height()+"px,0)":m*d.height()+"px";d.container.css(d.args)},100)}else{d.args[d.prop]=(d.transitions)?"translate3d("+m*d.width()+"px,0,0)":m*d.width()+"px";d.container.width((d.count+d.cloneCount)*200+"%").css(d.args);setTimeout(function(){d.newSlides.width(d.width()).css({"float":"left",display:"block"})},100)}}else{d.transitions=false;d.slides.css({width:"100%","float":"left",marginRight:"-100%"}).eq(d.currentSlide).fadeIn(d.vars.animationDuration)}if(d.vars.controlNav){if(d.manualExists){d.controlNav=d.manualControls}else{var e=a('
    ');var s=1;for(var t=0;t"+s+"");s++}if(d.containerExists){a(d.controlsContainer).append(e);d.controlNav=a(".flex-control-nav li a",d.controlsContainer)}else{d.append(e);d.controlNav=a(".flex-control-nav li a",d)}}d.controlNav.eq(d.currentSlide).addClass("active");d.controlNav.bind(d.eventType,function(i){i.preventDefault();if(!a(this).hasClass("active")){(d.controlNav.index(a(this))>d.currentSlide)?d.direction="next":d.direction="prev";d.flexAnimate(d.controlNav.index(a(this)),d.vars.pauseOnAction)}})}if(d.vars.directionNav){var v=a('");if(d.containerExists){a(d.controlsContainer).append(v);d.directionNav=a(".flex-direction-nav li a",d.controlsContainer)}else{d.append(v);d.directionNav=a(".flex-direction-nav li a",d)}if(!d.vars.animationLoop){if(d.currentSlide==0){d.directionNav.filter(".prev").addClass("disabled")}else{if(d.currentSlide==d.count-1){d.directionNav.filter(".next").addClass("disabled")}}}d.directionNav.bind(d.eventType,function(i){i.preventDefault();var j=(a(this).hasClass("next"))?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.keyboardNav&&a("ul.slides").length==1){function h(i){if(d.animating){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=d.getTarget("next")}else{if(i.keyCode==37){var j=d.getTarget("prev")}}if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}}}}a(document).bind("keyup",h)}if(d.vars.mousewheel){d.mousewheelEvent=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel";d.bind(d.mousewheelEvent,function(y){y.preventDefault();y=y?y:window.event;var i=y.detail?y.detail*-1:y.wheelDelta/40,j=(i<0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.slideshow){if(d.vars.pauseOnHover&&d.vars.slideshow){d.hover(function(){d.pause()},function(){if(!d.manualPause){d.resume()}})}d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed)}if(d.vars.pausePlay){var q=a('
    ');if(d.containerExists){d.controlsContainer.append(q);d.pausePlay=a(".flex-pauseplay span",d.controlsContainer)}else{d.append(q);d.pausePlay=a(".flex-pauseplay span",d)}var n=(d.vars.slideshow)?"pause":"play";d.pausePlay.addClass(n).text((n=="pause")?d.vars.pauseText:d.vars.playText);d.pausePlay.bind(d.eventType,function(i){i.preventDefault();if(a(this).hasClass("pause")){d.pause();d.manualPause=true}else{d.resume();d.manualPause=false}})}if("ontouchstart" in document.documentElement){var w,u,l,r,o,x,p=false;d.each(function(){if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",g,false)}});function g(i){if(d.animating){i.preventDefault()}else{if(i.touches.length==1){d.pause();r=(d.vertical)?d.height():d.width();x=Number(new Date());l=(d.vertical)?(d.currentSlide+d.cloneOffset)*d.height():(d.currentSlide+d.cloneOffset)*d.width();w=(d.vertical)?i.touches[0].pageY:i.touches[0].pageX;u=(d.vertical)?i.touches[0].pageX:i.touches[0].pageY;d.setTransition(0);this.addEventListener("touchmove",k,false);this.addEventListener("touchend",f,false)}}}function k(i){o=(d.vertical)?w-i.touches[0].pageY:w-i.touches[0].pageX;p=(d.vertical)?(Math.abs(o)0)?(Math.abs(o)/r+2):1)}d.args[d.prop]=(d.vertical)?"translate3d(0,"+(-l-o)+"px,0)":"translate3d("+(-l-o)+"px,0,0)";d.container.css(d.args)}}}function f(j){d.animating=false;if(d.animatingTo==d.currentSlide&&!p&&!(o==null)){var i=(o>0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(i)&&Number(new Date())-x<550&&Math.abs(o)>20||Math.abs(o)>r/2){d.flexAnimate(i,d.vars.pauseOnAction)}else{d.flexAnimate(d.currentSlide,d.vars.pauseOnAction)}}this.removeEventListener("touchmove",k,false);this.removeEventListener("touchend",f,false);w=null;u=null;o=null;l=null}}if(d.vars.animation.toLowerCase()=="slide"){a(window).resize(function(){if(!d.animating){if(d.vertical){d.height(d.slides.filter(":first").height());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.slides.filter(":first").height()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{d.newSlides.width(d.width());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.width()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}})}d.vars.start(d)};d.flexAnimate=function(g,f){if(!d.animating){d.animating=true;d.animatingTo=g;d.vars.before(d);if(f){d.pause()}if(d.vars.controlNav){d.controlNav.removeClass("active").eq(g).addClass("active")}d.atEnd=(g==0||g==d.count-1)?true:false;if(!d.vars.animationLoop&&d.vars.directionNav){if(g==0){d.directionNav.removeClass("disabled").filter(".prev").addClass("disabled")}else{if(g==d.count-1){d.directionNav.removeClass("disabled").filter(".next").addClass("disabled")}else{d.directionNav.removeClass("disabled")}}}if(!d.vars.animationLoop&&g==d.count-1){d.pause();d.vars.end(d)}if(d.vars.animation.toLowerCase()=="slide"){var e=(d.vertical)?d.slides.filter(":first").height():d.slides.filter(":first").width();if(d.currentSlide==0&&g==d.count-1&&d.vars.animationLoop&&d.direction!="next"){d.slideString="0px"}else{if(d.currentSlide==d.count-1&&g==0&&d.vars.animationLoop&&d.direction!="prev"){d.slideString=(-1*(d.count+1))*e+"px"}else{d.slideString=(-1*(g+d.cloneOffset))*e+"px"}}d.args[d.prop]=d.slideString;if(d.transitions){d.setTransition(d.vars.animationDuration);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.slideString+",0)":"translate3d("+d.slideString+",0,0)";d.container.css(d.args).one("webkitTransitionEnd transitionend",function(){d.wrapup(e)})}else{d.container.animate(d.args,d.vars.animationDuration,function(){d.wrapup(e)})}}else{d.slides.eq(d.currentSlide).fadeOut(d.vars.animationDuration);d.slides.eq(g).fadeIn(d.vars.animationDuration,function(){d.wrapup()})}}};d.wrapup=function(e){if(d.vars.animation=="slide"){if(d.currentSlide==0&&d.animatingTo==d.count-1&&d.vars.animationLoop){d.args[d.prop]=(-1*d.count)*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{if(d.currentSlide==d.count-1&&d.animatingTo==0&&d.vars.animationLoop){d.args[d.prop]=-1*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}}d.animating=false;d.currentSlide=d.animatingTo;d.vars.after(d)};d.animateSlides=function(){if(!d.animating){d.flexAnimate(d.getTarget("next"))}};d.pause=function(){clearInterval(d.animatedSlides);if(d.vars.pausePlay){d.pausePlay.removeClass("pause").addClass("play").text(d.vars.playText)}};d.resume=function(){d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed);if(d.vars.pausePlay){d.pausePlay.removeClass("play").addClass("pause").text(d.vars.pauseText)}};d.canAdvance=function(e){if(!d.vars.animationLoop&&d.atEnd){if(d.currentSlide==0&&e==d.count-1&&d.direction!="next"){return false}else{if(d.currentSlide==d.count-1&&e==0&&d.direction=="next"){return false}else{return true}}}else{return true}};d.getTarget=function(e){d.direction=e;if(e=="next"){return(d.currentSlide==d.count-1)?0:d.currentSlide+1}else{return(d.currentSlide==0)?d.count-1:d.currentSlide-1}};d.setTransition=function(e){d.container.css({"-webkit-transition-duration":(e/1000)+"s"})};d.init()};a.flexslider.defaults={animation:"fade",slideDirection:"horizontal",slideshow:true,slideshowSpeed:7000,animationDuration:600,directionNav:true,controlNav:true,keyboardNav:true,mousewheel:false,prevText:"Previous",nextText:"Next",pausePlay:false,pauseText:"Pause",playText:"Play",randomize:false,slideToStart:0,animationLoop:true,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:"",start:function(){},before:function(){},after:function(){},end:function(){}};a.fn.flexslider=function(b){return this.each(function(){if(a(this).find(".slides li").length==1){a(this).find(".slides li").fadeIn(400)}else{if(a(this).data("flexslider")!=true){new a.flexslider(a(this),b)}}})}})(jQuery); -------------------------------------------------------------------------------- /_xtensions/scripts/flexslider/readme.txt: -------------------------------------------------------------------------------- 1 | http://flex.madebymufffin.com/ 2 | 3 | Flexslider is a fully responsive jQuery slider plugin. It's supported in all major browsers, has custimizable animations, multiple slider support, Callback API, and more. 4 | 5 | You can see demo to understand how it works. 6 | 7 | Include link to flexslider.css or copy its content into your skin.css file. Styles in flexslider.css are edited to work better with Simpliste. 8 | 9 | Create your sliders in html file: 10 | 11 |
    12 |
      13 |
    • 14 | 15 |
      • 16 |
    • 17 | 18 |
      • 19 |
    • 20 | 21 |
      • 22 |
    23 |
    24 | 25 | Include links to scripts and call flexslider on your blocks with sliders: 26 | 27 | 32 | 33 | -------------------------------------------------------------------------------- /_xtensions/snippets/dropdown_menu.txt: -------------------------------------------------------------------------------- 1 | This is the common way to create a dropdown menu which shows on hover by using CSS. Include in your skin.css /* Dropdown menu */ .menu_main li { position:relative; } .menu_main li ul { display:none; background:#fff; padding:10px 3px; border:1px solid #ddd; text-align:left; width:6em; -webkit-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px; -moz-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px; box-shadow:rgba(0,0,0,0.2) 0px 4px 6px; } .menu_main li ul li { display:block; margin:0; line-height:1.1; } .menu_main li ul a{ display:block; padding:3px; } .menu_main li ul a:hover{ background:#f1f1f1; } .menu_main li:hover ul { display:block; position:absolute; right:-1em; top:100%; } /* End dropdown menu */ Example of usage in html file. Add new lavel ul in your .menu_main -------------------------------------------------------------------------------- /_xtensions/snippets/responsive_navigation/footer_anchor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 26 | 27 | 28 | 29 | 30 |
    31 | 32 |
    33 | 34 | 35 | 44 |
    45 | 46 | 47 |
    48 |
    49 |
    50 |

    The footer navigation anchor with link in the header

    51 |

    Top navigation can hide data on mobile devices with small resolutions. To avoid this, we can place a link to the footer navigation and hide the navigation in the header. Sometimes there is only one navigation block used to achive this result, which has fixed positioning or absolutely positioned for desktop devices.

    52 | 53 |

    Try changing width of your browser window to see this method in action. And use the source code of this page as your guide.

    54 |
    55 |
    56 | 57 | 58 |
    59 |
    60 |

    HTML

    61 |

    62 | Add a link in your header with link_nav class and #go_nav href value. Name it as you like. It's Menu in this demo. 63 |

    64 | 65 |
    pop-uptext
    1. <nav class="menu_main">
    2.   <a href="#go_nav" class="link_nav">Menu</a>
    3.   <ul>
    4.     <li class="active"><a href="#">About</a></li>
    5.     <li><a href="#">Skins</a></li>
    6.     <li><a href="#">Samples</a></li>
    7.     <li><a href="#">Contacts</a></li>
    8.   </ul>
    9. </nav>
    74 | 75 |

    Add id go_nav to your footer navigation.

    76 | 77 |
    pop-uptext
    1. <nav class="menu_bottom">
    2.   <ul id="go_nav">
    3.     <li class="active"><a href="#">About</a></li>
    4.     <li><a href="#">Skins</a></li>
    5.     <li><a href="#">Samples</a></li>
    6.     <li><a href="#">Contacts</a></li>
    7.   </ul>
    8. </nav>
    85 | 86 | 87 |

    CSS

    88 | 89 |

    Add styles for desktop and mobile phones.

    90 | 91 |
    pop-uptext
    1. .link_nav {
    2.   display:none;
    3. }
    4.     
    5. @media only screen and (max-width:480px) { /* Smartphone custom styles */
    6.   .link_nav {
    7.     display:block;
    8.   }
    10.   .menu_main ul {
    11.     display:none;
    12.   } 
    13. }
    104 | 105 |
    106 | 107 | 108 |
    109 | 110 |
    111 |
    112 | 113 | 125 | 126 |
    127 | 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /_xtensions/snippets/responsive_navigation/jquery.mobilemenu.min.js: -------------------------------------------------------------------------------- 1 | (function(a){function f(a){document.location.href=a}function g(){return a(".mnav").length?!0:!1}function h(b){var c=!0;b.each(function(){if(!a(this).is("ul")&&!a(this).is("ol")){c=!1;console.log(c)}});return c}function i(){return a(window).width() li").each(function(){var c=a(this),d=c.find("a").attr("href"),f=function(){return c.parent().parent().is("li")?c.parent().parent().find("a").attr("href"):null};c.find(" ul, ol").length&&l(c.find("> ul, > ol"));c.find(" > ul li, > ol li").length||c.find("ul, ol").remove();!k(f(),e)&&k(d,e)?c.appendTo(b.closest("ul#mmnav").find("li:has(a[href="+f()+"]):first ul")):k(d)?e.push(d):c.remove()})}function m(){var b=a('
      ');c.each(function(){a(this).children().clone().appendTo(b)});l(b);console.log(b);return b}function n(b,c,d){d?a('").appendTo(c):a('").appendTo(c)}function o(c,d){var e=a('');n(c,e,b.groupPageText);c.children("ul, ol").each(function(){a(this).children("li").each(function(){n(a(this),e)})});e.appendTo(d)}function p(c){var e=a('