├── .github ├── .htaccess └── workflows │ └── main.yml ├── .gitignore ├── .gitmodules ├── Gruntfile.js ├── README.md ├── bower.json ├── casper.js ├── config.rb ├── css ├── cssc-buttons.css ├── cssc-common.css ├── cssc-content.css ├── cssc-default.css ├── cssc-effects.css ├── cssc-forms.css ├── cssc-grid.css ├── cssc-images.css ├── cssc-layouts.css ├── cssc-navigation.css ├── cssc-print.css ├── cssc-push.css ├── cssc-tables.css ├── cssc-tabs.css ├── cssc-triggers.css ├── debug.css ├── demo.css ├── main.css └── project.css ├── csscommon.min.css ├── full-screen.php ├── images ├── 100x100-black.png ├── 12x10-blue.gif ├── 300x100-black.png ├── 300x100-grey.png ├── 300x60-blue.gif ├── 50x50-green.gif ├── 900x100-cat.jpg ├── ___x100 │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── css-sprite-2x-s285d1784ea.png ├── css-sprite-2x │ ├── icn-like.png │ ├── icn-share-fb.png │ ├── icn-share-twitter.png │ └── icn-user.png ├── css-sprite-s77ae137a15.png ├── css-sprite │ ├── icn-like.png │ ├── icn-share-fb.png │ ├── icn-share-twitter.png │ └── icn-user.png ├── fork_me.png ├── icn-settings.png └── wide-image.jpg ├── inc ├── blocks │ ├── common.php │ ├── html.php │ └── lead-about.php ├── controller.php ├── pages │ ├── 404.php │ ├── about.php │ ├── cssc-effects.php │ ├── cssc-forms.php │ ├── cssc-grid.php │ ├── cssc-layouts.php │ ├── cssc-navigation.php │ ├── cssc-tables.php │ ├── debug.php │ └── responsive-layout.php └── partials │ ├── footer.php │ └── header.php ├── index.php ├── js ├── classes │ └── dk-jsu-tabs.js ├── events.js ├── html5.js ├── mootools-1.4.5.min.js └── selectivizr-min.js ├── package.json ├── responsive.php ├── screenshots ├── cssc_button-active_6.png ├── cssc_button-hover_5.png ├── cssc_button_2.png ├── cssc_content_text_0.png ├── cssc_content_titles_quotes_labels_1.png ├── cssc_form_boxes_3.png └── cssc_form_twoboxes_4.png └── scss ├── cssc-buttons.scss ├── cssc-common.scss ├── cssc-content.scss ├── cssc-default.scss ├── cssc-effects.scss ├── cssc-forms.scss ├── cssc-grid.scss ├── cssc-images.scss ├── cssc-layouts.scss ├── cssc-navigation.scss ├── cssc-print.scss ├── cssc-push.scss ├── cssc-tables.scss ├── cssc-tabs.scss ├── cssc-triggers.scss ├── project.scss ├── project └── _base.scss └── utilities ├── _plugins.scss ├── _retina-sprites.scss ├── list-files.rb └── remove-all-comments.rb /.github/.htaccess: -------------------------------------------------------------------------------- 1 | deny from all 2 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: [ master ] 4 | 5 | jobs: 6 | run_pull: 7 | name: run pull 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - name: install ssh keys 12 | # check this thread to understand why its needed: 13 | # https://stackoverflow.com/a/70447517 14 | run: | 15 | install -m 600 -D /dev/null ~/.ssh/id_rsa 16 | echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa 17 | ssh-keyscan -H ${{ secrets.SSH_HOST }} > ~/.ssh/known_hosts 18 | - name: connect and pull 19 | run: ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "cd ${{ secrets.WORK_DIR }} && git pull && exit" 20 | - name: cleanup 21 | run: rm -rf ~/.ssh 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .sass-cache 4 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "scss/csscommon"] 2 | path = scss/csscommon 3 | url = git@github.com:Darklg/SassCSSCommon.git 4 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.loadNpmTasks('grunt-shell'); 4 | grunt.loadNpmTasks('grunt-contrib-concat'); 5 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 6 | 7 | grunt.initConfig({ 8 | pkg: grunt.file.readJSON('package.json'), 9 | concat: { 10 | css: { 11 | src: [ 12 | 'css/cssc-default.css', 13 | 'css/cssc-common.css', 14 | 'css/cssc-content.css', 15 | 'css/cssc-buttons.css', 16 | 'css/cssc-forms.css', 17 | 'css/cssc-tables.css', 18 | 'css/cssc-grid.css', 19 | 'css/cssc-push.css', 20 | 'css/cssc-navigation.css', 21 | 'css/cssc-layouts.css', 22 | 'css/cssc-tabs.css', 23 | 'css/cssc-images.css', 24 | 'css/cssc-print.css', 25 | 'css/cssc-effects.css', 26 | 'css/cssc-triggers.css' 27 | ], 28 | dest: 'csscommon.css' 29 | }, 30 | }, 31 | cssmin: { 32 | css: { 33 | src: 'csscommon.css', 34 | dest: 'csscommon.min.css' 35 | } 36 | }, 37 | shell: { 38 | regressiontest: { 39 | command: 'casperjs test casper.js' 40 | }, 41 | postuglify: { 42 | command: 'rm csscommon.css;', 43 | stdout: true 44 | } 45 | } 46 | }); 47 | grunt.registerTask('default', [ 48 | 'concat:css', 49 | 'cssmin:css', 50 | 'shell:postuglify' 51 | ]); 52 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSSCommon 2 | 3 | A (simple) CSS Starter, like Twitter's Bootstrap or Normalize.css 4 | 5 | ## How to use 6 | 7 | * Use directly https://github.com/Darklg/SassCSSCommon as a submodule or a dependency (Recommended) 8 | * Use the cssc-* prefixed files in the css/ folder. 9 | 10 | ## Licence MIT 11 | 12 | Copyright (c) 2012 Kevin Rocher 13 | 14 | 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: 15 | 16 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 17 | 18 | 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. 19 | 20 | ## Other resources 21 | 22 | Thanks to 23 | 24 | * Billy Barker ( http://www.billybarker.net/ ) for his icons ( https://www.iconfinder.com/iconsets/30_Free_Black_ToolBar_Icons ) ! 25 | * Unsplash ( http://unsplash.com/ ) for their amazing pictures. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSSCommon", 3 | "version": "1.0.0", 4 | "homepage": "http://www.csscommon.com/", 5 | "authors": [ 6 | "Kévin Rocher / Darklg" 7 | ], 8 | "description": "CSSCommon is a minimalist & modular CSS Framework", 9 | "main": "csslisible.min.css", 10 | "keywords": [ 11 | "css", 12 | "framework", 13 | "boilerplate", 14 | "reset", 15 | "responsive" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "css/debug.css", 21 | "css/demo.css", 22 | "css/main.css", 23 | "images", 24 | "inc", 25 | "js", 26 | "node_modules", 27 | "scss", 28 | ".gitignore", 29 | "config.rb", 30 | "README.md", 31 | "Gruntfile.js", 32 | "bower.json", 33 | "package.json", 34 | "full-screen.php", 35 | "index.php", 36 | "responsive.php" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /casper.js: -------------------------------------------------------------------------------- 1 | /* Init PhantomCSS */ 2 | var phantomCSS = require('./node_modules/phantomcss/phantomcss.js'); 3 | phantomCSS.init({ 4 | addLabelToFailedImage: false, 5 | libraryRoot: './node_modules/phantomcss/', 6 | }); 7 | 8 | /* Start casper */ 9 | casper.start().viewport(1280, 800); 10 | 11 | /* Test content */ 12 | casper.thenOpen('http://git.dev/CSSCommon/', function() { 13 | phantomCSS.screenshot('#cssc-content-text', 'cssc_content_text'); 14 | phantomCSS.screenshot('#cssc-content-titles-quotes-labels', 'cssc_content_titles_quotes_labels'); 15 | }); 16 | 17 | /* Test forms */ 18 | casper.thenOpen('http://git.dev/CSSCommon/index.php?p=cssc-forms', function() { 19 | phantomCSS.screenshot('#set_form_block', 'cssc_button'); 20 | phantomCSS.screenshot('#cssc-forms-input', 'cssc_form_boxes'); 21 | phantomCSS.screenshot('#cssc-forms-twoboxes', 'cssc_form_twoboxes'); 22 | }); 23 | 24 | casper.then(function() { 25 | this.mouse.move('#set_form_block'); // Test for :hover 26 | }); 27 | casper.then(function() { 28 | this.mouse.down('#set_form_block'); // Test for :active 29 | }); 30 | casper.on('mouse.move', function(resource) { 31 | phantomCSS.screenshot('#set_form_block', 'cssc_button-hover'); 32 | }); 33 | casper.on('mouse.down', function(resource) { 34 | phantomCSS.screenshot('#set_form_block', 'cssc_button-active'); 35 | }); 36 | 37 | /* Generate PNG Diffs */ 38 | casper 39 | .then(function now_check_the_screenshots() { 40 | phantomCSS.compareAll(); 41 | }) 42 | .then(function end_it() { 43 | casper.test.done(); 44 | }) 45 | .run(function() { 46 | phantom.exit(phantomCSS.getExitStatus()); 47 | }); -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | require File.join(File.dirname(__FILE__), '/scss/utilities/list-files.rb') 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "scss" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | output_style = :expanded 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | line_comments = false 19 | 20 | preferred_syntax = :scss -------------------------------------------------------------------------------- /css/cssc-buttons.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Name: Default Buttons 4 | URL: http://github.com/Darklg/CSSCommon 5 | Version: 2.5.2 6 | License: MIT 7 | */ 8 | /* ---------------------------------------------------------- 9 | Button : core 10 | ---------------------------------------------------------- */ 11 | .buttonreset, 12 | .cssc-button { 13 | display: inline-block; 14 | z-index: 1; 15 | position: relative; 16 | -webkit-appearance: none; 17 | -webkit-box-sizing: border-box; 18 | -moz-box-sizing: border-box; 19 | box-sizing: border-box; 20 | margin: 0; 21 | padding: 0; 22 | border: 0; 23 | border-radius: 0; 24 | text-align: center; 25 | text-decoration: none; 26 | font: inherit; 27 | white-space: nowrap; 28 | vertical-align: inherit; 29 | background: transparent; 30 | -webkit-background-clip: padding-box; 31 | cursor: pointer; 32 | -webkit-user-select: none; 33 | -moz-user-select: none; 34 | user-select: none; 35 | -webkit-user-drag: none; 36 | -moz-user-drag: -moz-none; 37 | user-drag: none; 38 | } 39 | .buttonreset::-moz-focus-inner, 40 | .cssc-button::-moz-focus-inner { 41 | padding: 0; 42 | border: 0; 43 | } 44 | .buttonreset:hover, .buttonreset:focus, 45 | .cssc-button:hover, 46 | .cssc-button:focus { 47 | text-decoration: none; 48 | outline: 0; 49 | } 50 | .buttonreset[disabled], 51 | .cssc-button[disabled] { 52 | cursor: default; 53 | } 54 | 55 | .cssc-button { 56 | padding: 0 1.5em; 57 | font-family: sans-serif; 58 | font-style: normal; 59 | font-weight: normal; 60 | line-height: 2.5; 61 | vertical-align: middle; 62 | background: #fff; 63 | } 64 | 65 | /* Icons 66 | -------------------------- */ 67 | .cssc-button:before, 68 | .cssc-button:after { 69 | vertical-align: 0; 70 | } 71 | .cssc-button:before { 72 | margin-right: 0.5em; 73 | } 74 | .cssc-button:after { 75 | margin-left: 0.5em; 76 | } 77 | 78 | .cssc-button-icn-large:before, .cssc-button-icn-large:after { 79 | font-size: 1.15em; 80 | } 81 | 82 | /* Buttons' modes 83 | -------------------------- */ 84 | .cssc-button--wide { 85 | display: block; 86 | width: 100%; 87 | } 88 | 89 | /* ---------------------------------------------------------- 90 | Utilities 91 | ---------------------------------------------------------- */ 92 | /* Container 93 | -------------------------- */ 94 | .cssc-button-container { 95 | z-index: 1; 96 | position: relative; 97 | text-align: center; 98 | } 99 | 100 | .cssc-button-container:before { 101 | content: ''; 102 | z-index: 1; 103 | position: absolute; 104 | top: 50%; 105 | left: 0; 106 | width: 100%; 107 | height: 1px; 108 | border-top: 1px solid #ddd; 109 | } 110 | 111 | .cssc-button-container .cssc-button { 112 | z-index: 2; 113 | position: relative; 114 | } 115 | 116 | /* Double button 117 | -------------------------- */ 118 | .cssc-button.cssc-button-double { 119 | height: auto; 120 | } 121 | 122 | .cssc-button-double > * { 123 | display: block; 124 | } 125 | 126 | /* Buttons group 127 | -------------------------- */ 128 | .button-group { 129 | display: inline-block; 130 | vertical-align: middle; 131 | } 132 | 133 | .button-group .cssc-button:not(:last-child) { 134 | border-top-right-radius: 0; 135 | border-bottom-right-radius: 0; 136 | } 137 | 138 | .button-group .cssc-button + .cssc-button { 139 | margin-left: -1px; 140 | border-top-left-radius: 0; 141 | border-bottom-left-radius: 0; 142 | } 143 | 144 | /* ---------------------------------------------------------- 145 | Button : Theme 146 | ---------------------------------------------------------- */ 147 | /* Default themes 148 | -------------------------- */ 149 | .cssc-button--default { 150 | height: 25px; 151 | padding: 0 8px; 152 | border: 1px solid #ccc; 153 | border-radius: 3px; 154 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); 155 | font: 12px/25px sans-serif; 156 | color: #333; 157 | background: #e0e0e0 no-repeat 0 0; 158 | background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.1) 100%); 159 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.1))); 160 | background-image: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.1) 100%); 161 | background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.1) 100%); 162 | background-image: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.1) 100%); 163 | background-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.1) 100%); 164 | } 165 | 166 | .cssc-button--default:focus, 167 | .cssc-button--default:hover { 168 | border-color: #bbb; 169 | color: #000; 170 | background-position: 0 12px; 171 | } 172 | 173 | .cssc-button--default:active { 174 | border-color: #888; 175 | background-position: 0 25px; 176 | } 177 | 178 | .cssc-button--default[disabled], 179 | .cssc-button--default[disabled]:focus, 180 | .cssc-button--default[disabled]:hover, 181 | .cssc-button--default[disabled]:active { 182 | border: 1px solid #ccc; 183 | color: #333; 184 | opacity: 0.66; 185 | background: #e0e0e0; 186 | } 187 | 188 | /* Buttons' sizes 189 | -------------------------- */ 190 | .cssc-button--small { 191 | height: 20px; 192 | padding: 0 5px; 193 | font-size: 11px; 194 | line-height: 20px; 195 | } 196 | 197 | .cssc-button--medium { 198 | height: 30px; 199 | padding: 0 10px; 200 | font-size: 13px; 201 | line-height: 30px; 202 | } 203 | 204 | .cssc-button--big { 205 | height: 35px; 206 | padding: 0 15px; 207 | font-size: 14px; 208 | line-height: 35px; 209 | } 210 | 211 | /* Buttons' themes 212 | -------------------------- */ 213 | .error-button, 214 | .success-button { 215 | text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); 216 | color: #fff; 217 | } 218 | 219 | .error-button:hover, 220 | .error-button:focus, 221 | .success-button:focus, 222 | .success-button:hover { 223 | color: #fff; 224 | } 225 | 226 | .error-button { 227 | border-color: #f55; 228 | background-color: #f66; 229 | } 230 | 231 | .success-button { 232 | border-color: #1a1; 233 | background-color: #0a0; 234 | } 235 | 236 | .round-button { 237 | border-radius: 99px; 238 | } 239 | 240 | /* Buttons with an icon 241 | -------------------------- */ 242 | .btn-phone:before { 243 | content: '☎'; 244 | } 245 | 246 | .btn-eject:before { 247 | content: '⏏'; 248 | } 249 | 250 | .btn-download:before { 251 | content: '⬇'; 252 | } 253 | 254 | .btn-play:before { 255 | content: '▶'; 256 | } 257 | 258 | .btn-go:after { 259 | content: '▶'; 260 | } 261 | 262 | .btn-img:before { 263 | content: url(../images/12x10-blue.gif); 264 | } 265 | 266 | /* ---------------------------------------------------------- 267 | Double button 268 | ---------------------------------------------------------- */ 269 | .cssc-button--default.cssc-button-double { 270 | padding: 10px 40px; 271 | } 272 | 273 | .cssc-button--default.cssc-button-double > strong { 274 | font-size: 20px; 275 | line-height: 25px; 276 | } 277 | 278 | .cssc-button--default.cssc-button-double > span { 279 | font-size: 12px; 280 | line-height: 16px; 281 | color: #676767; 282 | } 283 | -------------------------------------------------------------------------------- /css/cssc-content.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Content 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 2.3.1 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Content organization 9 | ---------------------------------------------------------- */ 10 | .content-container { 11 | position: relative; 12 | padding: 20px; 13 | } 14 | 15 | /* Large Area 16 | -------------------------- */ 17 | .large-content-area { 18 | position: relative; 19 | margin-right: -20px; 20 | margin-left: -20px; 21 | } 22 | 23 | /* Quickhacks 24 | -------------------------- */ 25 | .center { 26 | text-align: center; 27 | } 28 | 29 | /* ---------------------------------------------------------- 30 | Content text 31 | ---------------------------------------------------------- */ 32 | .cssc-content { 33 | -moz-box-sizing: border-box; 34 | box-sizing: border-box; 35 | width: 100%; 36 | max-width: 61em; 37 | font-size: 13px; 38 | line-height: 1.3; 39 | } 40 | 41 | .cssc-content:after { 42 | content: ''; 43 | display: table; 44 | clear: both; 45 | } 46 | 47 | /* Text 48 | -------------------------- */ 49 | .cssc-content p, 50 | .cssc-content ul, 51 | .cssc-content li { 52 | font: inherit; 53 | -webkit-hyphens: auto; 54 | -moz-hyphens: auto; 55 | hyphens: auto; 56 | word-wrap: break-word; 57 | } 58 | 59 | /* Titles 60 | -------------------------- */ 61 | .cssc-content h2, 62 | .cssc-content h3, 63 | .cssc-content h4 { 64 | margin-bottom: 0.5em; 65 | font: inherit; 66 | font-size: 1.1em; 67 | font-weight: bold; 68 | } 69 | .cssc-content h2 { 70 | font-size: 1.8em; 71 | } 72 | .cssc-content h3 { 73 | font-size: 1.4em; 74 | } 75 | .cssc-content * + h2, 76 | .cssc-content *:not(h2):not(h4) + h3, 77 | .cssc-content *:not(h2):not(h3) + h4 { 78 | margin-top: 1em; 79 | } 80 | 81 | /* Lists 82 | -------------------------- */ 83 | .cssc-content ul { 84 | list-style: inside disc; 85 | } 86 | .cssc-content ul ul { 87 | list-style-type: circle; 88 | } 89 | .cssc-content ol { 90 | list-style: inside decimal; 91 | } 92 | 93 | /* Definition lists 94 | -------------------------- */ 95 | .cssc-content dd + dt { 96 | margin-top: 0.5em; 97 | } 98 | .cssc-content dt { 99 | font-weight: bold; 100 | } 101 | 102 | /* Medias 103 | -------------------------- */ 104 | .cssc-content > video, .cssc-content > iframe { 105 | width: 100%; 106 | } 107 | .cssc-content .alignleft { 108 | float: left; 109 | margin: 0 1em 0.5em 0; 110 | } 111 | .cssc-content .aligncenter { 112 | display: block; 113 | margin-right: auto; 114 | margin-left: auto; 115 | } 116 | .cssc-content .alignright { 117 | float: right; 118 | margin: 0 0 0.5em 1em; 119 | } 120 | 121 | /* Margins 122 | -------------------------- */ 123 | .cssc-content ul ul, 124 | .cssc-content ol ol { 125 | margin-bottom: 0; 126 | padding-left: 1em; 127 | } 128 | .cssc-content blockquote p { 129 | margin-bottom: 0.5em; 130 | } 131 | 132 | .cssc-content p, 133 | .cssc-content blockquote, 134 | .cssc-content table, 135 | .cssc-content address, 136 | .cssc-content > iframe, 137 | .cssc-content > video, 138 | .cssc-content dl, 139 | .cssc-content ol, 140 | .cssc-content ul, 141 | .cssc-content, 142 | .cssc-block { 143 | margin-bottom: 1.3em; 144 | } 145 | 146 | .cssc-content dl:last-child, 147 | .cssc-content ol:last-child, 148 | .cssc-content ul:last-child, 149 | .cssc-content blockquote:last-child, 150 | .cssc-content blockquote p:last-child, 151 | .cssc-content p:last-child, 152 | .cssc-block:last-child { 153 | margin-bottom: 0; 154 | } 155 | 156 | /* Content module 157 | -------------------------- */ 158 | .cssc-content-module { 159 | margin-bottom: 20px; 160 | border: 1px solid #ddd; 161 | border-radius: 4px; 162 | background-color: #fff; 163 | -webkit-background-clip: border-box; 164 | -moz-background-clip: border-box; 165 | background-clip: border-box; 166 | } 167 | 168 | .cssc-content-module:last-child { 169 | margin-bottom: 0; 170 | } 171 | 172 | .cssc-content-module .cssc-cm-title { 173 | margin: 0; 174 | padding: 0 15px; 175 | border-bottom: 1px solid #ddd; 176 | border-radius: 4px 4px 0 0; 177 | font-weight: bold; 178 | line-height: 30px; 179 | background-color: #F0F0F0; 180 | -webkit-background-clip: border-box; 181 | -moz-background-clip: border-box; 182 | background-clip: border-box; 183 | } 184 | 185 | .cssc-content-module .cssc-cm-main { 186 | padding: 15px; 187 | } 188 | 189 | .cssc-content-module .cssc-cm-title + .cssc-cm-main { 190 | border-top: 1px solid #eee; 191 | } 192 | -------------------------------------------------------------------------------- /css/cssc-default.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Name: Default 4 | URL: http://github.com/Darklg/CSSCommon 5 | Version: 2.9.8 6 | License: MIT 7 | */ 8 | /* ---------------------------------------------------------- 9 | Reset 10 | ---------------------------------------------------------- */ 11 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 12 | a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 14 | form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 15 | audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, 16 | menu, nav, section, video, abbr, eventsource, mark, meter, time, progress, output, bb { 17 | margin: 0; 18 | padding: 0; 19 | border: 0; 20 | font: inherit; 21 | font-size: 100%; 22 | vertical-align: baseline; 23 | outline: 0; 24 | background: transparent no-repeat top left; 25 | } 26 | 27 | ol, 28 | ul { 29 | list-style: none; 30 | } 31 | 32 | blockquote, 33 | q { 34 | quotes: none; 35 | } 36 | blockquote:before, blockquote:after, 37 | q:before, 38 | q:after { 39 | content: ''; 40 | } 41 | 42 | a, 43 | ins { 44 | text-decoration: none; 45 | } 46 | 47 | /* ---------------------------------------------------------- 48 | Normalize 49 | ---------------------------------------------------------- */ 50 | /* HTML5 Default behavior 51 | -------------------------- */ 52 | article, 53 | aside, 54 | audio, 55 | canvas, 56 | datagrid, 57 | details, 58 | dialog, 59 | figure, 60 | figcaption, 61 | footer, 62 | header, 63 | hgroup, 64 | menu, 65 | main, 66 | nav, 67 | section, 68 | video { 69 | display: block; 70 | } 71 | 72 | abbr, 73 | eventsource, 74 | mark, 75 | meter, 76 | time, 77 | progress, 78 | output, 79 | bb { 80 | display: inline; 81 | } 82 | 83 | /* tables still need 'cellspacing="0"' in the markup */ 84 | table { 85 | width: 100%; 86 | border-collapse: collapse; 87 | border-spacing: 0; 88 | } 89 | 90 | nav ul { 91 | list-style: none; 92 | } 93 | 94 | /* Forms 95 | -------------------------- */ 96 | input, 97 | button, 98 | select { 99 | vertical-align: middle; 100 | } 101 | 102 | input[type="radio"], 103 | input[type="checkbox"] { 104 | margin: 0; 105 | vertical-align: text-bottom; 106 | } 107 | 108 | textarea { 109 | resize: vertical; 110 | } 111 | 112 | input:focus { 113 | outline: 0; 114 | } 115 | 116 | input:-webkit-autofill { 117 | background-color: #ccc !important; 118 | } 119 | 120 | /* Number & Search resets */ 121 | input[type=number], 122 | input[type=search] { 123 | -webkit-appearance: textfield; 124 | -moz-appearance: textfield; 125 | appearance: textfield; 126 | } 127 | 128 | input::-webkit-outer-spin-button, 129 | input::-webkit-inner-spin-button { 130 | -webkit-appearance: none; 131 | margin: 0; 132 | } 133 | 134 | input[type="search"]::-webkit-search-decoration, 135 | input[type="search"]::-webkit-search-cancel-button, 136 | input[type="search"]::-webkit-search-results-button, 137 | input[type="search"]::-webkit-search-results-decoration { 138 | -webkit-appearance: none; 139 | width: 0; 140 | height: 0; 141 | } 142 | 143 | /* Input type date */ 144 | input[type="date"]::-webkit-clear-button, 145 | input[type="date"]::-webkit-inner-spin-button, 146 | input[type="date"]::-webkit-calendar-picker-indicator { 147 | display: none; 148 | } 149 | 150 | /* Bug with Firefox and buttons */ 151 | input[type="submit"]::-moz-focus-inner, 152 | input[type="button"]::-moz-focus-inner, 153 | button::-moz-focus-inner { 154 | margin: 0; 155 | padding: 0; 156 | border: 0; 157 | } 158 | 159 | /* Better cursor for buttons */ 160 | input[type="submit"], 161 | input[type="image"], 162 | button { 163 | cursor: pointer; 164 | } 165 | 166 | /* Medias 167 | -------------------------- */ 168 | iframe, 169 | img, 170 | object, 171 | video { 172 | max-width: 100%; 173 | border: 0; 174 | } 175 | 176 | img { 177 | height: auto; 178 | } 179 | 180 | /* Bugfix for Google Maps */ 181 | .gm-style img, 182 | .gmnoprint img { 183 | max-width: none; 184 | } 185 | 186 | /* Inline images are aligned on text */ 187 | img, 188 | input[type=image] { 189 | vertical-align: bottom; 190 | } 191 | 192 | p img { 193 | vertical-align: baseline; 194 | } 195 | 196 | /* Various elements 197 | -------------------------- */ 198 | /* Address styling not present in IE 8/9. | necolas.github.io/normalize.css/ */ 199 | [hidden] { 200 | display: none; 201 | } 202 | 203 | /* Common elements 204 | -------------------------- */ 205 | html { 206 | min-height: 100%; 207 | background: #fff; 208 | } 209 | 210 | body { 211 | position: relative; 212 | min-height: 100%; 213 | font: 62.5%/1 sans-serif; 214 | color: #212121; 215 | background: inherit; 216 | -webkit-text-size-adjust: none; 217 | } 218 | 219 | h1, .h1, 220 | h2, .h2, 221 | h3, .h3, 222 | h4, .h4, 223 | h5, .h5, 224 | h6, .h6 { 225 | display: block; 226 | margin-bottom: 5px; 227 | font-weight: bold; 228 | line-height: 1.3; 229 | } 230 | 231 | h1, .h1 { 232 | margin-bottom: 10px; 233 | font-size: 25px; 234 | } 235 | 236 | h2, .h2 { 237 | margin-bottom: 7px; 238 | font-size: 20px; 239 | } 240 | 241 | h3, .h3 { 242 | font-size: 15px; 243 | } 244 | 245 | h4, .h4 { 246 | font-size: 13px; 247 | } 248 | 249 | h5, .h5 { 250 | font-size: 12px; 251 | } 252 | 253 | h6, .h6 { 254 | font-size: 11px; 255 | } 256 | 257 | p, 258 | dl, 259 | li { 260 | font-size: 13px; 261 | line-height: 1.4; 262 | } 263 | 264 | p { 265 | margin-bottom: 18px; 266 | } 267 | 268 | blockquote p:last-child, 269 | p:last-child { 270 | margin-bottom: 0; 271 | } 272 | 273 | del { 274 | text-decoration: line-through; 275 | } 276 | 277 | ins { 278 | border-bottom: 1px dotted #DDD; 279 | } 280 | 281 | mark { 282 | background-color: #FF9; 283 | } 284 | 285 | i, 286 | em { 287 | font-style: italic; 288 | } 289 | 290 | b, 291 | strong { 292 | font-weight: bold; 293 | } 294 | 295 | /* Prevents sub and sup affecting line-height in all browsers | gist.github.com/413930 */ 296 | sub, 297 | sup { 298 | position: relative; 299 | margin: 0 1px; 300 | font-size: 80%; 301 | line-height: 0; 302 | vertical-align: baseline; 303 | } 304 | 305 | sup { 306 | top: -0.5em; 307 | } 308 | 309 | sub { 310 | bottom: -0.25em; 311 | } 312 | 313 | small { 314 | font-size: 80%; 315 | } 316 | 317 | abbr[title], 318 | acronym[title] { 319 | text-decoration: underline dotted; 320 | cursor: help; 321 | } 322 | 323 | blockquote { 324 | display: block; 325 | padding: 5px 0 5px 10px; 326 | border-color: rgba(0, 0, 0, 0.1); 327 | border-left: 5px solid #DDD; 328 | font-size: 12px; 329 | } 330 | 331 | blockquote p { 332 | margin-bottom: 4px; 333 | } 334 | 335 | hr { 336 | clear: both; 337 | border: 0; 338 | border-top: 1px solid #aaa; 339 | border-bottom: 1px solid #f0f0f0; 340 | } 341 | 342 | /* ---------------------------------------------------------- 343 | Clearfix 344 | ---------------------------------------------------------- */ 345 | .cssc-grid:before, 346 | .cssc-grid:after, 347 | .clearfix:after, 348 | .subfloat:after { 349 | content: " "; 350 | display: block; 351 | visibility: hidden; 352 | clear: both; 353 | max-height: 0; 354 | overflow: hidden; 355 | } 356 | 357 | hr[class*="clearfix"] { 358 | height: 0; 359 | border: 0; 360 | outline: 0; 361 | background: transparent; 362 | } 363 | 364 | /* ---------------------------------------------------------- 365 | Selection style 366 | ---------------------------------------------------------- */ 367 | ::-moz-selection { 368 | color: #000; 369 | background: rgba(51, 102, 153, 0.3); 370 | } 371 | 372 | ::selection { 373 | color: #000; 374 | background: rgba(51, 102, 153, 0.3); 375 | } 376 | 377 | /* ---------------------------------------------------------- 378 | Links 379 | ---------------------------------------------------------- */ 380 | a { 381 | color: #69C; 382 | } 383 | a:focus, 384 | a:hover { 385 | color: #369; 386 | } 387 | a:active { 388 | color: #000; 389 | } 390 | a:focus:not(:hover) { 391 | outline: 1px dotted rgba(0, 0, 0, 0.3); 392 | outline-offset: 2px; 393 | } 394 | a:focus:not(:focus-visible) { 395 | outline: none; 396 | } 397 | 398 | /* .99 Opacity avoids a nasty effect on Webkit */ 399 | .aimginv { 400 | opacity: 0.70; 401 | } 402 | 403 | a img, 404 | .aimginv:hover, 405 | .aimg { 406 | opacity: 0.999; 407 | } 408 | 409 | .aimg:hover, 410 | a:hover img { 411 | opacity: 0.80; 412 | } 413 | 414 | /* ---------------------------------------------------------- 415 | Transitions 416 | ---------------------------------------------------------- */ 417 | .trans-col { 418 | -webkit-transition: color 0.3s ease; 419 | transition: color 0.3s ease; 420 | } 421 | 422 | a img, 423 | .aimg, 424 | .aimginv, 425 | .cssc-btn, 426 | .trans-opa { 427 | outline: 1px solid transparent; 428 | -webkit-transition: opacity 0.3s ease; 429 | transition: opacity 0.3s ease; 430 | } 431 | 432 | .trans-all { 433 | -webkit-transition: all 0.3s ease; 434 | transition: all 0.3s ease; 435 | } 436 | 437 | a, 438 | input, 439 | button, 440 | textarea, 441 | .cssc-button, 442 | .trans-button { 443 | -webkit-transition: border-color 0.3s ease,background 0.3s ease,color 0.3s ease; 444 | transition: border-color 0.3s ease,background 0.3s ease,color 0.3s ease; 445 | } 446 | 447 | /* ---------------------------------------------------------- 448 | Disable transitions 449 | Thx https://twitter.com/kizmarh/status/889422529269510145 450 | ---------------------------------------------------------- */ 451 | @​media (prefers-reduced-motion:reduce) { 452 | * { 453 | transition: none !important; 454 | } 455 | } 456 | /* ---------------------------------------------------------- 457 | Avoid display of inline scripts 458 | ---------------------------------------------------------- */ 459 | script { 460 | display: none !important; 461 | } 462 | 463 | /* ---------------------------------------------------------- 464 | Fix double em/strong 465 | ---------------------------------------------------------- */ 466 | i i, 467 | em em { 468 | font-style: normal; 469 | } 470 | 471 | b b, 472 | strong strong { 473 | font-weight: normal; 474 | } 475 | -------------------------------------------------------------------------------- /css/cssc-grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Grids 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 4.3 5 | License: MIT 6 | */ 7 | .cssc-grid { 8 | display: block; 9 | clear: both; 10 | max-width: 100%; 11 | } 12 | 13 | .cssc-grid:before, 14 | .cssc-grid:after { 15 | content: " "; 16 | display: block; 17 | visibility: hidden; 18 | clear: both; 19 | max-height: 0; 20 | overflow: hidden; 21 | } 22 | 23 | .cssc-grid > * { 24 | float: left; 25 | min-height: 1px; 26 | } 27 | 28 | /* ---------------------------------------------------------- 29 | Grille fluide 30 | ---------------------------------------------------------- */ 31 | .fluid-grid { 32 | z-index: 1; 33 | position: relative; 34 | width: auto; 35 | margin: 0 -22.5px; 36 | max-width: none; 37 | } 38 | 39 | .fluid-grid > * { 40 | -webkit-box-sizing: border-box; 41 | -moz-box-sizing: border-box; 42 | box-sizing: border-box; 43 | padding: 0 22.5px; 44 | } 45 | 46 | /* Margin 47 | -------------------------- */ 48 | .fluid-grid--20 { 49 | margin: 0 -20px; 50 | } 51 | 52 | .fluid-grid--20 > * { 53 | padding: 0 20px; 54 | } 55 | 56 | .fluid-grid--10 { 57 | margin: 0 -10px; 58 | } 59 | 60 | .fluid-grid--10 > * { 61 | padding: 0 10px; 62 | } 63 | 64 | .fluid-grid--0 { 65 | margin: 0; 66 | } 67 | 68 | .fluid-grid--0 > * { 69 | padding: 0; 70 | } 71 | 72 | /* Columns 73 | -------------------------- */ 74 | .col-10p { 75 | width: 10%; 76 | } 77 | 78 | .col-20p { 79 | width: 20%; 80 | } 81 | 82 | .col-25p { 83 | width: 25%; 84 | } 85 | 86 | .col-30p { 87 | width: 30%; 88 | } 89 | 90 | .col-33p { 91 | width: 33.333%; 92 | } 93 | 94 | .col-40p { 95 | width: 40%; 96 | } 97 | 98 | .col-45p { 99 | width: 45%; 100 | } 101 | 102 | .col-50p { 103 | width: 50%; 104 | } 105 | 106 | .col-55p { 107 | width: 55%; 108 | } 109 | 110 | .col-60p { 111 | width: 60%; 112 | } 113 | 114 | .col-66p { 115 | width: 66.667%; 116 | } 117 | 118 | .col-75p { 119 | width: 75%; 120 | } 121 | 122 | .col-80p { 123 | width: 80%; 124 | } 125 | 126 | .col-90p { 127 | width: 90%; 128 | } 129 | 130 | .col-100p { 131 | width: 100%; 132 | } 133 | 134 | /* Responsive 135 | -------------------------- */ 136 | @media (max-width: 1023px) { 137 | .fluid-grid { 138 | margin: 0 -15px; 139 | } 140 | 141 | .fluid-grid > * { 142 | padding: 0 15px; 143 | } 144 | 145 | /* Margin */ 146 | .tab--fluid-grid--20 { 147 | margin: 0 -20px; 148 | } 149 | 150 | .tab--fluid-grid--20 > * { 151 | padding: 0 20px; 152 | } 153 | 154 | .tab--fluid-grid--10 { 155 | margin: 0 -10px; 156 | } 157 | 158 | .tab--fluid-grid--10 > * { 159 | padding: 0 10px; 160 | } 161 | 162 | /* Columns */ 163 | .tab--col-10p { 164 | width: 10%; 165 | } 166 | 167 | .tab--col-20p { 168 | width: 20%; 169 | } 170 | 171 | .tab--col-25p { 172 | width: 25%; 173 | } 174 | 175 | .tab--col-30p { 176 | width: 30%; 177 | } 178 | 179 | .tab--col-33p { 180 | width: 33.333%; 181 | } 182 | 183 | .tab--col-40p { 184 | width: 40%; 185 | } 186 | 187 | .tab--col-45p { 188 | width: 45%; 189 | } 190 | 191 | .tab--col-50p { 192 | width: 50%; 193 | } 194 | 195 | .tab--col-55p { 196 | width: 55%; 197 | } 198 | 199 | .tab--col-60p { 200 | width: 60%; 201 | } 202 | 203 | .tab--col-66p { 204 | width: 66.667%; 205 | } 206 | 207 | .tab--col-75p { 208 | width: 75%; 209 | } 210 | 211 | .tab--col-80p { 212 | width: 80%; 213 | } 214 | 215 | .tab--col-90p { 216 | width: 90%; 217 | } 218 | 219 | .tab--col-100p { 220 | width: 100%; 221 | } 222 | } 223 | @media (max-width: 767px) { 224 | .fluid-grid { 225 | margin: 0 -7.5px; 226 | } 227 | 228 | .fluid-grid > * { 229 | padding: 0 7.5px; 230 | } 231 | 232 | /* Margin */ 233 | .tabv--fluid-grid--20 { 234 | margin: 0 -20px; 235 | } 236 | 237 | .tabv--fluid-grid--20 > * { 238 | padding: 0 20px; 239 | } 240 | 241 | .tabv--fluid-grid--10 { 242 | margin: 0 -10px; 243 | } 244 | 245 | .tabv--fluid-grid--10 > * { 246 | padding: 0 10px; 247 | } 248 | 249 | /* Columns */ 250 | .tabv--col-10p { 251 | width: 10%; 252 | } 253 | 254 | .tabv--col-20p { 255 | width: 20%; 256 | } 257 | 258 | .tabv--col-25p { 259 | width: 25%; 260 | } 261 | 262 | .tabv--col-30p { 263 | width: 30%; 264 | } 265 | 266 | .tabv--col-33p { 267 | width: 33.333%; 268 | } 269 | 270 | .tabv--col-40p { 271 | width: 40%; 272 | } 273 | 274 | .tabv--col-45p { 275 | width: 45%; 276 | } 277 | 278 | .tabv--col-50p { 279 | width: 50%; 280 | } 281 | 282 | .tabv--col-55p { 283 | width: 55%; 284 | } 285 | 286 | .tabv--col-60p { 287 | width: 60%; 288 | } 289 | 290 | .tabv--col-66p { 291 | width: 66.667%; 292 | } 293 | 294 | .tabv--col-75p { 295 | width: 75%; 296 | } 297 | 298 | .tabv--col-80p { 299 | width: 80%; 300 | } 301 | 302 | .tabv--col-90p { 303 | width: 90%; 304 | } 305 | 306 | .tabv--col-100p { 307 | width: 100%; 308 | } 309 | } 310 | @media (max-width: 500px) { 311 | /* Margin */ 312 | .mob--fluid-grid--20 { 313 | margin: 0 -20px; 314 | } 315 | 316 | .mob--fluid-grid--20 > * { 317 | padding: 0 20px; 318 | } 319 | 320 | .mob--fluid-grid--10 { 321 | margin: 0 -10px; 322 | } 323 | 324 | .mob--fluid-grid--10 > * { 325 | padding: 0 10px; 326 | } 327 | 328 | /* Columns */ 329 | .mob--col-10p { 330 | width: 10%; 331 | } 332 | 333 | .mob--col-20p { 334 | width: 20%; 335 | } 336 | 337 | .mob--col-25p { 338 | width: 25%; 339 | } 340 | 341 | .mob--col-30p { 342 | width: 30%; 343 | } 344 | 345 | .mob--col-33p { 346 | width: 33.333%; 347 | } 348 | 349 | .mob--col-40p { 350 | width: 40%; 351 | } 352 | 353 | .mob--col-45p { 354 | width: 45%; 355 | } 356 | 357 | .mob--col-50p { 358 | width: 50%; 359 | } 360 | 361 | .mob--col-55p { 362 | width: 55%; 363 | } 364 | 365 | .mob--col-60p { 366 | width: 60%; 367 | } 368 | 369 | .mob--col-66p { 370 | width: 66.667%; 371 | } 372 | 373 | .mob--col-75p { 374 | width: 75%; 375 | } 376 | 377 | .mob--col-80p { 378 | width: 80%; 379 | } 380 | 381 | .mob--col-90p { 382 | width: 90%; 383 | } 384 | 385 | .mob--col-100p { 386 | width: 100%; 387 | } 388 | } 389 | -------------------------------------------------------------------------------- /css/cssc-images.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Images 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 1.1 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Core 9 | ---------------------------------------------------------- */ 10 | .cssc-image { 11 | display: inline-block; 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | 16 | .cssc-image img:hover, 17 | .cssc-image img { 18 | opacity: 0.99; 19 | } 20 | 21 | .cssc-img-content { 22 | z-index: 1; 23 | position: absolute; 24 | right: 0; 25 | bottom: 0; 26 | left: 0; 27 | padding: 10px; 28 | -webkit-transition: all 0.2s ease; 29 | transition: all 0.2s ease; 30 | } 31 | 32 | /* ---------------------------------------------------------- 33 | Theme Default 34 | ---------------------------------------------------------- */ 35 | .cssc-img-theme-default .cssc-img-content { 36 | color: #fff; 37 | background-color: #000; 38 | background-color: rgba(0, 0, 0, 0.5); 39 | } 40 | 41 | .cssc-img-theme-default:hover .cssc-img-content { 42 | color: #ccc; 43 | } 44 | 45 | /* ---------------------------------------------------------- 46 | Theme Shadow 47 | ---------------------------------------------------------- */ 48 | .cssc-img-theme-shadow .cssc-img-content { 49 | color: #fff; 50 | background: transparent; 51 | background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.65) 100%); 52 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65))); 53 | background-image: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.65) 100%); 54 | background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.65) 100%); 55 | background-image: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.65) 100%); 56 | background-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.65) 100%); 57 | } 58 | 59 | .cssc-img-theme-shadow:hover .cssc-img-content { 60 | color: #ccc; 61 | } 62 | 63 | /* ---------------------------------------------------------- 64 | Theme Slide Bottom 65 | ---------------------------------------------------------- */ 66 | .cssc-img-theme-slide-bottom .cssc-img-content { 67 | height: 31px; 68 | margin-bottom: -51px; 69 | color: #fff; 70 | opacity: 0; 71 | background-color: #000; 72 | background-color: rgba(0, 0, 0, 0.5); 73 | } 74 | 75 | .cssc-img-theme-slide-bottom:hover .cssc-img-content { 76 | margin-bottom: 0; 77 | color: #fff; 78 | opacity: .999; 79 | } 80 | -------------------------------------------------------------------------------- /css/cssc-layouts.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Name: Layouts de page 4 | URL: http://github.com/Darklg/CSSCommon 5 | Version: 1.13 6 | License: MIT 7 | */ 8 | /* ---------------------------------------------------------- 9 | Containers 10 | ---------------------------------------------------------- */ 11 | /* Container centré */ 12 | .centered-container { 13 | z-index: 1; 14 | clear: both; 15 | position: relative; 16 | -moz-box-sizing: border-box; 17 | box-sizing: border-box; 18 | width: 100%; 19 | text-align: center; 20 | } 21 | 22 | /* Contenu flottant */ 23 | .centered-container > * { 24 | -moz-box-sizing: border-box; 25 | box-sizing: border-box; 26 | width: auto; 27 | margin-right: auto; 28 | margin-left: auto; 29 | max-width: 940px; 30 | text-align: left; 31 | } 32 | 33 | /* Items 34 | -------------------------- */ 35 | .centered-container .cc-full { 36 | width: auto; 37 | max-width: none; 38 | } 39 | 40 | .centered-container .cc-full-bg, 41 | .centered-container .cc-full-image { 42 | z-index: 1; 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | width: 100%; 47 | height: 100%; 48 | max-width: none; 49 | background: transparent repeat top center; 50 | } 51 | 52 | /* Full image is a separate background with a cover image for animating or effects */ 53 | .centered-container .cc-full-image { 54 | background-position: center center; 55 | background-repeat: no-repeat; 56 | -webkit-background-size: cover; 57 | -moz-background-size: cover; 58 | background-size: cover; 59 | } 60 | 61 | /* Needed to be over a cc-full-image/bg background */ 62 | .centered-container .cc-content { 63 | z-index: 2; 64 | position: relative; 65 | } 66 | 67 | /* ---------------------------------------------------------- 68 | Base des layouts 69 | ---------------------------------------------------------- */ 70 | .cssc-lay { 71 | display: table; 72 | clear: both; 73 | width: 100%; 74 | table-layout: fixed; 75 | } 76 | 77 | .cssc-lay > * { 78 | display: table-cell; 79 | vertical-align: top; 80 | } 81 | 82 | .cssc-lay > .col-main { 83 | width: auto; 84 | } 85 | 86 | /* Base de style */ 87 | .cssc-lay > .col-side { 88 | width: 220px; 89 | } 90 | 91 | /* Wide layout d'exemple */ 92 | .clay-wide > .col-side { 93 | width: 300px; 94 | } 95 | 96 | /* Responsive Layout */ 97 | .clay-resp { 98 | max-width: 940px; 99 | } 100 | 101 | .clay-resp > .col-side { 102 | width: 220px; 103 | } 104 | 105 | @media all and (max-width: 600px) { 106 | .cssc-is-responsive .clay-resp { 107 | display: block; 108 | width: auto; 109 | } 110 | 111 | .cssc-is-responsive .clay-resp > .col-side, 112 | .cssc-is-responsive .clay-resp > .col-main { 113 | display: block; 114 | width: auto; 115 | } 116 | 117 | .cssc-is-responsive .clay-resp > .col-side .liste-widgets > * { 118 | display: inline-block; 119 | width: 48%; 120 | } 121 | 122 | .cssc-is-responsive .clay-resp > .col-side .liste-widgets > :nth-child(even) { 123 | margin-left: 2%; 124 | } 125 | } 126 | @media all and (max-width: 400px) { 127 | .cssc-is-responsive .clay-resp > .col-side .liste-widgets > * { 128 | display: block; 129 | } 130 | 131 | .cssc-is-responsive .clay-resp > .col-side .liste-widgets > :nth-child(even) { 132 | margin-left: 0; 133 | } 134 | } 135 | /* ---------------------------------------------------------- 136 | Elements visibility depending on used device 137 | ---------------------------------------------------------- */ 138 | .lt_ie9 .hidden-on-full, 139 | .lt_ie9 .visible-only-tablet, 140 | .lt_ie9 .visible-only-phone { 141 | display: none; 142 | } 143 | 144 | @media (min-width: 1024px) { 145 | .hidden-on-full, 146 | .visible-only-tablet, 147 | .visible-only-phone { 148 | display: none; 149 | } 150 | } 151 | @media (max-width: 1023px) and (min-width: 501px) { 152 | .hidden-on-tablet, 153 | .visible-only-full, 154 | .visible-only-phone { 155 | display: none; 156 | } 157 | } 158 | @media (max-width: 500px) { 159 | .hidden-on-phone, 160 | .visible-only-full, 161 | .visible-only-tablet { 162 | display: none; 163 | } 164 | } 165 | /* ---------------------------------------------------------- 166 | Fullscreen 167 | ---------------------------------------------------------- */ 168 | /* Layouts 169 | -------------------------- */ 170 | .cssc-is-fullscreen #main-container, 171 | .cssc-is-fullscreen body, 172 | .cssc-is-fullscreen { 173 | height: 100%; 174 | } 175 | 176 | .cssc-fullscreen { 177 | z-index: 1; 178 | position: relative; 179 | height: 100%; 180 | text-align: center; 181 | } 182 | 183 | /* Centered block 184 | -------------------------- */ 185 | .cssc-fullscreen__centered { 186 | z-index: 1; 187 | position: absolute; 188 | top: 0; 189 | right: 0; 190 | bottom: 0; 191 | left: 0; 192 | margin: auto; 193 | } 194 | 195 | .cssc-fullscreen__centered > * { 196 | display: inline-block; 197 | line-height: 1.3; 198 | vertical-align: middle; 199 | } 200 | 201 | @media (max-height: 400px) { 202 | .cssc-fullscreen__centered { 203 | position: static; 204 | height: auto; 205 | line-height: inherit; 206 | } 207 | } 208 | /* Default theme */ 209 | .cssc-fullscreen--default .cssc-fullscreen__centered { 210 | height: 400px; 211 | line-height: 400px; 212 | } 213 | 214 | @media (max-height: 400px) { 215 | .cssc-fullscreen--default .cssc-fullscreen__centered { 216 | position: static; 217 | height: auto; 218 | line-height: inherit; 219 | } 220 | } 221 | /* Block options 222 | -------------------------- */ 223 | .cssc-fullscreen--parallax { 224 | background: fixed no-repeat center center; 225 | -webkit-background-size: cover; 226 | background-size: cover; 227 | } 228 | -------------------------------------------------------------------------------- /css/cssc-navigation.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Name: Navigation 4 | URL: http://github.com/Darklg/CSSCommon 5 | Version: 1.12 6 | License: MIT 7 | */ 8 | /* ---------------------------------------------------------- 9 | Navigation bar 10 | ---------------------------------------------------------- */ 11 | .cssc-navbar { 12 | text-align: center; 13 | } 14 | 15 | /* Positions */ 16 | .cssc-navbar--left { 17 | float: left; 18 | } 19 | 20 | .cssc-navbar--right { 21 | float: right; 22 | } 23 | 24 | .cssc-navbar--right > *, 25 | .cssc-navbar--left > * { 26 | float: left; 27 | } 28 | 29 | /* Elements */ 30 | .cssc-navbar-link, 31 | .cssc-navbar-link > a, 32 | .cssc-navbar--links, 33 | .cssc-navbar--links > li, 34 | .cssc-navbar--links > li > a { 35 | height: 100%; 36 | line-height: inherit; 37 | } 38 | 39 | .cssc-navbar--links > li { 40 | float: left; 41 | } 42 | 43 | /* Theme 44 | -------------------------- */ 45 | .cssc-navbar { 46 | margin-bottom: 20px; 47 | padding: 0 10px; 48 | } 49 | 50 | .cssc-navbar, 51 | .cssc-navbar > * { 52 | height: 45px; 53 | line-height: 45px; 54 | background-color: #f0f0f0; 55 | } 56 | 57 | /* Search */ 58 | .cssc-navbar--search { 59 | padding: 0 10px; 60 | } 61 | 62 | .cssc-navbar--search .inputbase { 63 | display: inline-block; 64 | width: auto; 65 | margin-right: 4px; 66 | } 67 | 68 | /* Links */ 69 | .cssc-navbar-link a, 70 | .cssc-navbar--links > li > a { 71 | display: block; 72 | padding: 0 6px; 73 | font-size: 12px; 74 | font-weight: bold; 75 | color: #333; 76 | } 77 | 78 | .cssc-navbar--links { 79 | padding: 0 10px; 80 | } 81 | 82 | .cssc-navbar--links:first-child { 83 | padding-left: 0; 84 | } 85 | 86 | .cssc-navbar--links:last-child { 87 | padding-right: 0; 88 | } 89 | 90 | /* ---------------------------------------------------------- 91 | Pagination 92 | ---------------------------------------------------------- */ 93 | /* Core 94 | -------------------------- */ 95 | .cssc-pagination li, 96 | .cssc-pagination { 97 | font-size: 0; 98 | } 99 | 100 | .cssc-pagination * { 101 | display: inline-block; 102 | vertical-align: 0; 103 | } 104 | 105 | /* Theme 106 | -------------------------- */ 107 | .cssc-pagination--default { 108 | margin-bottom: 30px; 109 | } 110 | 111 | .cssc-pagination--default * { 112 | line-height: 30px; 113 | } 114 | 115 | .cssc-pagination--default strong, 116 | .cssc-pagination--default a { 117 | margin: 0 2px; 118 | padding: 0 7px; 119 | border: 1px solid #eee; 120 | border-radius: 3px; 121 | font-size: 12px; 122 | } 123 | 124 | .cssc-pagination strong, 125 | .cssc-pagination .current, 126 | .cssc-pagination a:focus, 127 | .cssc-pagination a:hover { 128 | border-color: #ccc; 129 | } 130 | 131 | .cssc-pagination--center { 132 | text-align: center; 133 | } 134 | 135 | /* Style d'exemple */ 136 | /* ---------------------------------------------------------- 137 | Menu Principal 138 | ---------------------------------------------------------- */ 139 | .cssc-mainnav { 140 | z-index: 1; 141 | position: relative; 142 | min-height: 10px; 143 | vertical-align: middle; 144 | } 145 | 146 | .cssc-mainnav:hover { 147 | z-index: 2; 148 | } 149 | 150 | .cssc-mainmenu { 151 | height: 100%; 152 | } 153 | 154 | .cssc-mainmenuplus { 155 | z-index: 4; 156 | float: right; 157 | position: relative; 158 | } 159 | 160 | .cssc-mainmenuplus > li > a, 161 | .cssc-mainmenuplus > li, 162 | .cssc-mainmenu > li > a, 163 | .cssc-mainmenu > li { 164 | float: left; 165 | } 166 | 167 | .cssc-mainmenuplus > li > a, 168 | .cssc-mainmenu > li > a { 169 | display: block; 170 | vertical-align: middle; 171 | } 172 | 173 | /* Gestion sous-menu */ 174 | .cssc-mainmenu:hover, 175 | .cssc-mainmenu:hover > li { 176 | z-index: 3; 177 | position: relative; 178 | } 179 | 180 | /* Si sous-menu de largeur 100% */ 181 | .cssc-mainmenu:hover > .richsubmenu { 182 | position: static; 183 | } 184 | 185 | .richsubmenu .submenu { 186 | position: absolute; 187 | right: 0; 188 | width: auto; 189 | overflow: hidden; 190 | white-space: nowrap; 191 | } 192 | 193 | /* Si sous-menu de largeur fixe*/ 194 | .richsubmenu2 > .submenu { 195 | width: 600px; 196 | } 197 | 198 | .cssc-mainmenu .submenu { 199 | visibility: hidden; 200 | z-index: 2; 201 | position: absolute; 202 | top: 100%; 203 | left: 0; 204 | white-space: nowrap; 205 | opacity: 0; 206 | } 207 | 208 | .cssc-mainmenu > li > a:focus + .submenu, 209 | .cssc-mainmenu > li:hover .submenu { 210 | visibility: visible; 211 | opacity: 1; 212 | } 213 | 214 | .cssc-mainmenu .submenu a { 215 | white-space: nowrap; 216 | } 217 | 218 | .cssc-mainmenu .submenu .subcol > ul, 219 | .cssc-mainmenu .submenu .subcol { 220 | float: left; 221 | } 222 | 223 | /* Style d'exemple */ 224 | .cssc-mainnav--default { 225 | height: 30px; 226 | margin-bottom: 30px; 227 | border: 1px solid #eee; 228 | } 229 | 230 | .cssc-mainnav--default .cssc-mainmenuplus > li > a, 231 | .cssc-mainnav--default .cssc-mainmenuplus > li, 232 | .cssc-mainnav--default .cssc-mainmenu > li > a, 233 | .cssc-mainnav--default .cssc-mainmenu > li { 234 | line-height: 30px; 235 | } 236 | 237 | .cssc-mainnav--default .cssc-mainmenuplus { 238 | border-left: 1px solid #eee; 239 | } 240 | 241 | .cssc-mainnav--default .cssc-mainmenuplus > li > a, 242 | .cssc-mainnav--default .cssc-mainmenu > li > a { 243 | padding: 0 10px; 244 | } 245 | 246 | .cssc-mainnav--default .cssc-mainmenu > li:hover > a, 247 | .cssc-mainnav--default .cssc-mainmenu > li > a:focus, 248 | .cssc-mainnav--default .cssc-mainmenu > .current > a { 249 | color: #000; 250 | } 251 | 252 | .cssc-mainnav--default .cssc-mainmenu > li > a { 253 | border-right: 1px solid #eee; 254 | } 255 | 256 | .cssc-mainnav--default .cssc-mainmenu .submenu { 257 | padding: 10px; 258 | border: 1px solid #eee; 259 | border-width: 0 0 1px 1px; 260 | background: #f9f9f9; 261 | } 262 | 263 | .cssc-mainnav--default .cssc-mainmenu .subcol { 264 | min-width: 200px; 265 | } 266 | 267 | .cssc-mainnav--default .cssc-mainmenu .subcol > ul { 268 | min-width: 150px; 269 | } 270 | 271 | .cssc-mainnav--default .cssc-mainmenu .subcol + .subcol, 272 | .cssc-mainnav--default .cssc-mainmenu .subcol > ul + ul { 273 | margin-left: 15px; 274 | } 275 | 276 | /* ---------------------------------------------------------- 277 | Fil d'ariane 278 | ---------------------------------------------------------- */ 279 | /* Core 280 | -------------------------- */ 281 | .cssc-ariane { 282 | font-size: 0; 283 | } 284 | 285 | .cssc-ariane > li { 286 | display: inline-block; 287 | zoom: 1; 288 | height: inherit; 289 | font: inherit; 290 | *display: inline; 291 | } 292 | 293 | .cssc-ariane a, 294 | .cssc-ariane strong { 295 | font-size: 13px; 296 | } 297 | 298 | /* Default theme 299 | -------------------------- */ 300 | .cssc-ariane--default { 301 | height: 20px; 302 | margin-bottom: 10px; 303 | line-height: 20px; 304 | } 305 | 306 | .cssc-ariane--default li:after { 307 | content: '›'; 308 | margin: 0 5px; 309 | font-size: 12px; 310 | } 311 | 312 | .cssc-ariane--default li:last-child:after { 313 | display: none; 314 | } 315 | 316 | /* Wizard theme 317 | -------------------------- */ 318 | .cssc-ariane--wizard { 319 | height: 30px; 320 | margin-bottom: 30px; 321 | border: 1px solid #999; 322 | line-height: 30px; 323 | } 324 | 325 | .cssc-ariane--wizard li { 326 | position: relative; 327 | border-color: inherit; 328 | text-align: center; 329 | background-color: #BDF; 330 | -webkit-transition: all 0.3s ease; 331 | transition: all 0.3s ease; 332 | } 333 | 334 | .cssc-ariane--wizard li:hover { 335 | background-color: #DEF; 336 | } 337 | 338 | .cssc-ariane--wizard li:before, 339 | .cssc-ariane--wizard li:after { 340 | content: ''; 341 | z-index: 1; 342 | position: absolute; 343 | top: 0; 344 | right: 0; 345 | width: 10px; 346 | height: 50%; 347 | border-color: inherit; 348 | border-right: 1px solid #FFF; 349 | background: inherit; 350 | -webkit-transform: skewX(30deg); 351 | transform: skewX(30deg); 352 | -webkit-transform-origin: top right; 353 | transform-origin: top right; 354 | } 355 | 356 | .cssc-ariane--wizard li:after { 357 | top: auto; 358 | bottom: 0; 359 | -webkit-transform: skewX(-30deg); 360 | transform: skewX(-30deg); 361 | -webkit-transform-origin: bottom right; 362 | transform-origin: bottom right; 363 | } 364 | 365 | .cssc-ariane--wizard a, 366 | .cssc-ariane--wizard strong { 367 | display: inline-block; 368 | padding: 0 15px 0 25px; 369 | font-size: 13px; 370 | vertical-align: middle; 371 | } 372 | 373 | /* ---------------------------------------------------------- 374 | Liste en ligne 375 | ---------------------------------------------------------- */ 376 | .cssc-inline-list_label, 377 | .cssc-inline-list li, 378 | .cssc-inline-list a, 379 | .cssc-inline-list { 380 | display: inline-block; 381 | vertical-align: middle; 382 | } 383 | 384 | .cssc-inline-list_label { 385 | margin-right: 5px; 386 | font-size: 13px; 387 | } 388 | 389 | .cssc-inline-list li, 390 | .cssc-inline-list { 391 | height: 30px; 392 | line-height: 30px; 393 | } 394 | 395 | .cssc-inline-list a { 396 | padding: 0 5px; 397 | border-radius: 7px; 398 | line-height: 23px; 399 | } 400 | 401 | .cssc-inline-list .current a { 402 | color: #fff; 403 | background-color: #369; 404 | } 405 | 406 | /* ---------------------------------------------------------- 407 | Menu vertical 408 | ---------------------------------------------------------- */ 409 | .cssc-vertical-menu { 410 | margin-bottom: 20px; 411 | max-width: 300px; 412 | border: 1px solid #ddd; 413 | background-color: #fff; 414 | } 415 | 416 | .cssc-vertical-menu li + li { 417 | border-top: 1px solid #eee; 418 | } 419 | 420 | .cssc-vertical-menu a { 421 | display: block; 422 | padding: 0 10px; 423 | line-height: 30px; 424 | } 425 | 426 | .cssc-vertical-menu a:focus, 427 | .cssc-vertical-menu a:hover { 428 | background-color: #f0f0f0; 429 | } 430 | 431 | .cssc-vertical-menu .current a { 432 | padding-left: 7px; 433 | border-left: 3px solid #369; 434 | } 435 | 436 | /* ---------------------------------------------------------- 437 | Pagination bullet 438 | ---------------------------------------------------------- */ 439 | .cssc-bullet { 440 | margin-bottom: 20px; 441 | overflow: hidden; 442 | text-align: center; 443 | -webkit-user-select: none; 444 | -moz-user-select: none; 445 | user-select: none; 446 | } 447 | 448 | .cssc-bullet li { 449 | display: inline-block; 450 | line-height: inherit; 451 | vertical-align: middle; 452 | -webkit-transition: color 0.3s ease; 453 | transition: color 0.3s ease; 454 | cursor: pointer; 455 | } 456 | 457 | /* Thème 458 | -------------------------- */ 459 | .cssc-bullet { 460 | height: 15px; 461 | line-height: 15px; 462 | } 463 | 464 | .cssc-bullet li { 465 | padding: 0 2px; 466 | font-size: 35px; 467 | color: #999; 468 | } 469 | 470 | .cssc-bullet .current, 471 | .cssc-bullet li:hover { 472 | color: #333; 473 | } 474 | 475 | /* ---------------------------------------------------------- 476 | Responsive menu 477 | ---------------------------------------------------------- */ 478 | .cssc-responsive-menu { 479 | z-index: 1; 480 | position: relative; 481 | } 482 | 483 | .cssc-responsive-menu__button, 484 | .cssc-responsive-menu__links { 485 | z-index: 1; 486 | position: absolute; 487 | top: 0; 488 | right: 0; 489 | } 490 | 491 | .cssc-responsive-menu__title { 492 | margin: 0; 493 | line-height: inherit; 494 | } 495 | 496 | .cssc-responsive-menu__links a, 497 | .cssc-responsive-menu__links li, 498 | .cssc-responsive-menu__links { 499 | display: block; 500 | line-height: inherit; 501 | } 502 | 503 | .cssc-responsive-menu__links li { 504 | float: left; 505 | } 506 | 507 | .cssc-responsive-menu__button { 508 | display: none; 509 | } 510 | 511 | @media (max-width: 720px) { 512 | .cssc-responsive-menu__button { 513 | display: block; 514 | } 515 | 516 | .cssc-responsive-menu__links { 517 | visibility: hidden; 518 | opacity: 0; 519 | } 520 | 521 | .is-open .cssc-responsive-menu__links { 522 | visibility: visible; 523 | opacity: 0.99; 524 | } 525 | } 526 | /* Default theme 527 | -------------------------- */ 528 | .cssc-responsive-menu--default { 529 | margin-bottom: 20px; 530 | border: 1px solid #ccc; 531 | line-height: 40px; 532 | } 533 | 534 | .cssc-responsive-menu__title { 535 | margin-left: 10px; 536 | font-size: 16px; 537 | } 538 | 539 | .cssc-responsive-menu__button { 540 | top: 50%; 541 | right: 5px; 542 | height: 30px; 543 | margin-top: -15px; 544 | border: 1px solid #ccc; 545 | font-size: 15px; 546 | line-height: 20px; 547 | background-color: #fff; 548 | } 549 | 550 | .cssc-responsive-menu__button .icon { 551 | display: inline-block; 552 | font-size: 25px; 553 | vertical-align: -1px; 554 | } 555 | 556 | .cssc-responsive-menu__links li { 557 | margin-right: 10px; 558 | } 559 | 560 | @media (max-width: 720px) { 561 | .cssc-responsive-menu__links { 562 | top: 100%; 563 | right: -1px; 564 | left: -1px; 565 | margin: 0; 566 | border: 1px solid #ccc; 567 | background-color: #fff; 568 | } 569 | 570 | .cssc-responsive-menu__links li + li { 571 | border-top: 1px solid #ccc; 572 | } 573 | 574 | .cssc-responsive-menu__links li { 575 | float: none; 576 | margin-right: 0; 577 | padding: 0 10px; 578 | } 579 | } 580 | -------------------------------------------------------------------------------- /css/cssc-print.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Name: Print 4 | URL: http://github.com/Darklg/CSSCommon 5 | Version: 1.1.0 6 | License: MIT 7 | */ 8 | @media print { 9 | body { 10 | max-width: 100%; 11 | } 12 | 13 | /* Global 14 |    ----------------------- */ 15 | * { 16 | float: none; 17 | color: #000; 18 | } 19 | 20 | /* Links 21 |    ----------------------- */ 22 | a { 23 | text-decoration: underline; 24 | } 25 | 26 | a:after { 27 | content: " (" attr(href) ") "; 28 | font-weight: normal; 29 | } 30 | 31 | a:not([href]):after, 32 | a[href="#"]:after, 33 | a[href=""]:after { 34 | display: none; 35 | } 36 | 37 | /* CSSCommon 38 |    ----------------------- */ 39 | .noprint, 40 | .no-print, 41 | .cssc-mainnav { 42 | display: none !important; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /css/cssc-push.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Push 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 1.1 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Push 9 | ------------------------------------------------------- */ 10 | .cssc-push { 11 | display: inline-block; 12 | z-index: 1; 13 | position: relative; 14 | } 15 | 16 | .cssc-push, 17 | .cssc-push .background { 18 | overflow: hidden; 19 | background: transparent no-repeat top left; 20 | } 21 | 22 | .cssc-push .before, 23 | .cssc-push .after, 24 | .cssc-push .background { 25 | position: absolute; 26 | top: 0; 27 | right: 0; 28 | bottom: 0; 29 | left: 0; 30 | direction: ltr; 31 | text-align: left; 32 | text-indent: -9999px; 33 | -webkit-transition: opacity 0.2s ease-in; 34 | transition: opacity 0.2s ease-in; 35 | } 36 | 37 | .cssc-push .background, 38 | .cssc-push .after, 39 | .cssc-push:focus .before, 40 | .cssc-push:hover .before { 41 | opacity: 0; 42 | } 43 | 44 | .cssc-push .before, 45 | .cssc-push:focus .after, 46 | .cssc-push:focus .background, 47 | .cssc-push:hover .after, 48 | .cssc-push:hover .background { 49 | opacity: 1; 50 | } 51 | -------------------------------------------------------------------------------- /css/cssc-tables.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Tables 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 1.5.1 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Main 9 | ---------------------------------------------------------- */ 10 | .cssc-table { 11 | width: 100%; 12 | margin-bottom: 20px; 13 | } 14 | 15 | .cssc-table, 16 | .cssc-table tr, 17 | .cssc-table td, 18 | .cssc-table th { 19 | border-collapse: collapse; 20 | vertical-align: middle; 21 | } 22 | 23 | /* Default Theme 24 | -------------------------- */ 25 | .cssc-table--default td, 26 | .cssc-table--default th { 27 | padding: 10px; 28 | font-size: 12px; 29 | line-height: 1.3; 30 | } 31 | 32 | .cssc-table--default td { 33 | text-align: left; 34 | } 35 | 36 | .cssc-table--default th { 37 | text-align: left; 38 | font-weight: bold; 39 | } 40 | 41 | .cssc-table--default tr { 42 | border-bottom: 1px solid #e9e9e9; 43 | } 44 | 45 | .cssc-table--default thead tr { 46 | border-bottom: 1px solid #d0d0d0; 47 | } 48 | 49 | .cssc-table--default tbody tr:last-child { 50 | border-bottom: 0; 51 | } 52 | 53 | /* "Tight" Theme 54 | -------------------------- */ 55 | .cssc-table--tight th, 56 | .cssc-table--tight td { 57 | padding: 3px; 58 | line-height: 1.2; 59 | } 60 | 61 | /* "Basic" Theme 62 | -------------------------- */ 63 | .cssc-table--basic { 64 | color: #333; 65 | background: #fff; 66 | } 67 | 68 | .cssc-table--basic, 69 | .cssc-table--basic tr, 70 | .cssc-table--basic td, 71 | .cssc-table--basic th { 72 | border: 1px solid #d0d0d0; 73 | } 74 | 75 | .cssc-table--basic tbody tr, 76 | .cssc-table--basic tbody td, 77 | .cssc-table--basic tbody th { 78 | border: 1px solid #e0e0e0; 79 | } 80 | 81 | .cssc-table--basic tr:hover { 82 | color: #000; 83 | background: #fafafa; 84 | } 85 | 86 | .cssc-table--basic th { 87 | background: #f0f0f0; 88 | } 89 | 90 | /* "Bordered" Theme 91 | -------------------------- */ 92 | .cssc-table--bordered td + td { 93 | border-left: 1px solid #e9e9e9; 94 | } 95 | 96 | .cssc-table--bordered .content { 97 | z-index: 1; 98 | position: relative; 99 | } 100 | 101 | .cssc-table--bordered tr + tr td + td .content:before { 102 | content: ''; 103 | z-index: 1; 104 | position: absolute; 105 | top: -20px; 106 | left: -20px; 107 | width: 20px; 108 | height: 20px; 109 | background-color: #fff; 110 | } 111 | 112 | /* Rounded corners 113 | -------------------------- */ 114 | .cssc-table--rounded { 115 | border: 1px solid #ccc; 116 | border-collapse: separate; 117 | border-spacing: 0; 118 | border-radius: 10px; 119 | } 120 | 121 | /* Debug colors */ 122 | .cssc-table--rounded tbody { 123 | background-color: #F5F5F5; 124 | } 125 | 126 | .cssc-table--rounded tfoot th { 127 | background-color: #E0E0E0; 128 | } 129 | 130 | .cssc-table--rounded thead th { 131 | background-color: #E0E0E0; 132 | } 133 | 134 | /* Borders top */ 135 | .cssc-table--rounded thead:first-child, 136 | .cssc-table--rounded thead:first-child tr:first-child { 137 | border-radius: 10px 10px 0 0; 138 | } 139 | 140 | .cssc-table--rounded thead:first-child tr:first-child th:first-child { 141 | border-radius: 10px 0 0 0; 142 | } 143 | 144 | .cssc-table--rounded thead:first-child tr:first-child th:last-child { 145 | border-radius: 0 10px 0 0; 146 | } 147 | 148 | /* Borders bottom */ 149 | .cssc-table--rounded thead + tbody ~ tbody:last-child, 150 | .cssc-table--rounded thead + tbody ~ tbody:last-child tr:last-child, 151 | .cssc-table--rounded thead + tbody:last-child, 152 | .cssc-table--rounded thead + tbody:last-child tr:last-child, 153 | .cssc-table--rounded tfoot, 154 | .cssc-table--rounded tfoot tr:last-child { 155 | border-radius: 0 0 10px 10px; 156 | } 157 | 158 | .cssc-table--rounded thead + tbody ~ tbody:last-child tr:last-child td:first-child, 159 | .cssc-table--rounded thead + tbody:last-child tr:last-child td:first-child, 160 | .cssc-table--rounded tfoot tr:last-child th:first-child { 161 | border-radius: 0 0 0 10px; 162 | } 163 | 164 | .cssc-table--rounded thead + tbody ~ tbody:last-child tr:last-child td:last-child, 165 | .cssc-table--rounded thead + tbody:last-child tr:last-child td:last-child, 166 | .cssc-table--rounded tfoot tr:last-child th:last-child { 167 | border-radius: 0 0 10px 0; 168 | } 169 | 170 | /* ---------------------------------------------------------- 171 | Responsive Tables 172 | ---------------------------------------------------------- */ 173 | -------------------------------------------------------------------------------- /css/cssc-tabs.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Onglets 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 1.1 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Base des onglets 9 | ---------------------------------------------------------- */ 10 | /* top:1px = superposition sur le contenu */ 11 | .cssc-tabs-clic { 12 | position: relative; 13 | top: 1px; 14 | overflow: hidden; 15 | } 16 | 17 | .cssc-tabs-clic li { 18 | float: left; 19 | } 20 | 21 | .cssc-tabs-clic a { 22 | display: block; 23 | float: left; 24 | } 25 | 26 | .cssc-tabs-target > * { 27 | visibility: hidden; 28 | max-height: 0; 29 | overflow: hidden; 30 | opacity: 0; 31 | -webkit-transition: opacity 0.3s ease; 32 | transition: opacity 0.3s ease; 33 | } 34 | 35 | .lt_ie8 .cssc-tabs-target > * { 36 | position: absolute; 37 | } 38 | 39 | .cssc-tabs-target > .is-current { 40 | visibility: visible; 41 | max-height: 10000px; 42 | opacity: 1; 43 | } 44 | 45 | .lt_ie8 .cssc-tabs-target > .is-current { 46 | position: static; 47 | } 48 | 49 | /* Default theme 50 | -------------------------- */ 51 | .cssc-tabs-clic li { 52 | margin-right: 3px; 53 | } 54 | 55 | .cssc-tabs-clic a { 56 | padding: 3px 6px; 57 | border: 1px solid #ccc; 58 | border-bottom: 1px solid #ccc; 59 | -webkit-border-top-left-radius: 3px; 60 | -webkit-border-top-right-radius: 3px; 61 | border-top-left-radius: 3px; 62 | border-top-right-radius: 3px; 63 | background-color: #f0f0f0; 64 | -webkit-background-clip: border; 65 | -moz-background-clip: border; 66 | background-clip: border; 67 | -webkit-transition: all 0.3s ease; 68 | transition: all 0.3s ease; 69 | } 70 | 71 | .cssc-tabs-clic a.is-current, 72 | .cssc-tabs-clic .is-current a, 73 | .cssc-tabs-clic a:hover, 74 | .cssc-tabs-clic a:focus { 75 | border-bottom: 1px solid #fff; 76 | background-color: #fff; 77 | } 78 | 79 | .cssc-tabs-target { 80 | padding: 6px; 81 | border: 1px solid #ccc; 82 | } 83 | -------------------------------------------------------------------------------- /css/cssc-triggers.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Triggers 3 | URL: http://github.com/Darklg/CSSCommon 4 | Version: 0.2 5 | License: MIT 6 | */ 7 | /* ---------------------------------------------------------- 8 | Core 9 | ---------------------------------------------------------- */ 10 | .cssc-trigger { 11 | z-index: 1; 12 | position: relative; 13 | perspective: 100px; 14 | } 15 | 16 | .cssc-trigger, 17 | .cssc-trigger .cssc-trig { 18 | -webkit-transition: all 0.3s ease; 19 | transition: all 0.3s ease; 20 | -webkit-transform: translateZ(0); 21 | transform: translateZ(0); 22 | } 23 | 24 | /* ---------------------------------------------------------- 25 | Effects 26 | ---------------------------------------------------------- */ 27 | /* Appear 28 | -------------------------- */ 29 | .cssc-trigger .cssc-trig--appear { 30 | visibility: hidden; 31 | opacity: 0; 32 | } 33 | 34 | .cssc-trigger:hover .cssc-trig--appear { 35 | visibility: visible; 36 | opacity: 0.999; 37 | } 38 | 39 | /* Slide 40 | -------------------------- */ 41 | .cssc-trigger .cssc-trig--slide { 42 | -webkit-transform: translateY(3px); 43 | transform: translateY(3px); 44 | } 45 | 46 | .cssc-trigger:hover .cssc-trig--slide { 47 | -webkit-transform: translateY(0); 48 | transform: translateY(0); 49 | } 50 | 51 | /* Zoom 52 | -------------------------- */ 53 | .cssc-trigger .cssc-trig--zoom { 54 | -webkit-transform: scale(0.9); 55 | transform: scale(0.9); 56 | } 57 | 58 | .cssc-trigger:hover .cssc-trig--zoom { 59 | -webkit-transform: scale(1); 60 | transform: scale(1); 61 | } 62 | 63 | /* ---------------------------------------------------------- 64 | Demo theme 65 | ---------------------------------------------------------- */ 66 | .cssc-trigger--example { 67 | display: inline-block; 68 | margin-right: 10px; 69 | padding: 0; 70 | border: 10px solid #FFF; 71 | overflow: hidden; 72 | vertical-align: middle; 73 | outline: 1px solid #CCC; 74 | } 75 | 76 | .cssc-trigger--example .cssc-trig { 77 | z-index: 1; 78 | position: absolute; 79 | right: 0; 80 | bottom: 0; 81 | left: 0; 82 | margin: 0; 83 | padding: 5px; 84 | text-align: center; 85 | color: #fff; 86 | background: transparent; 87 | background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.5) 100%); 88 | background: -webkit-gradient(left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.5))); 89 | background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.5) 100%); 90 | background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 100%); 91 | } 92 | -------------------------------------------------------------------------------- /css/debug.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* 4 | Name: Debug 5 | URL: http://github.com/Darklg/CSSCommon 6 | Description: A stylesheet which will highlight HTML errors. 7 | Version: 0.4.2 8 | License: MIT 9 | */ 10 | 11 | /* ---------------------------------------------------------- 12 | Design 13 | ---------------------------------------------------------- */ 14 | 15 | /* Check alignement 16 | * Via @Sutterlity 17 | -------------------------- */ 18 | 19 | body * { 20 | background-color: rgba(0,0,0,.02); 21 | } 22 | 23 | /* ---------------------------------------------------------- 24 | Missing or bad properties 25 | ---------------------------------------------------------- */ 26 | 27 | /* Missing or invalid href 28 | -------------------------- */ 29 | 30 | a[href=""], 31 | a[href^="javascript"], 32 | a:not([href]) { 33 | outline: 3px dashed red!important; 34 | } 35 | 36 | /* Forms 37 | -------------------------- */ 38 | 39 | label:not([for]), 40 | input:not([type]), 41 | form:not([action]), 42 | form:not([method]), 43 | form[method=""], 44 | textarea:not([cols]), 45 | textarea:not([rows]), 46 | form button:not([type]) { 47 | outline: 3px dashed red!important; 48 | } 49 | 50 | /* Images 51 | -------------------------- */ 52 | 53 | img:not([alt]) { 54 | outline: 3px dashed red!important; 55 | } 56 | 57 | /* Empty attributes 58 | -------------------------- */ 59 | 60 | [id=""], 61 | [class=""], 62 | [name=""], 63 | [for=""] { 64 | outline: 3px dashed red!important; 65 | } 66 | 67 | /* ---------------------------------------------------------- 68 | Invalid HTML 69 | ---------------------------------------------------------- */ 70 | 71 | /* Invalid child 72 | -------------------------- */ 73 | 74 | a > a, 75 | button > input, 76 | button > select, 77 | button > textarea, 78 | button > label, 79 | button > button, 80 | button > form, 81 | button > fieldset, 82 | button > iframe, 83 | label > label, 84 | form > form, 85 | dl > *, 86 | form > form, 87 | form > input, 88 | form > textarea, 89 | form > button, 90 | p div, 91 | pre > img, 92 | pre > object, 93 | pre > big, 94 | pre > small, 95 | pre > sub, 96 | pre > sup, 97 | tbody > *, 98 | ol > *, 99 | ul > * { 100 | outline: 3px dashed red!important; 101 | } 102 | 103 | tbody > tr, 104 | ol > li, 105 | ul > li, 106 | dl > dd, 107 | dl > dt { 108 | outline: 0!important; 109 | } 110 | 111 | /* Invalid order 112 | -------------------------- */ 113 | 114 | tbody + tfoot td { 115 | background-color: red!important; 116 | } 117 | 118 | /* ---------------------------------------------------------- 119 | Deprecated elements 120 | ---------------------------------------------------------- */ 121 | 122 | applet, acronym, center, dir, font, strike, big, tt, marquee, hgroup, plaintext, xmp { 123 | outline: 3px dashed yellow!important; 124 | } 125 | 126 | /* ---------------------------------------------------------- 127 | Deprecated attributes 128 | ---------------------------------------------------------- */ 129 | 130 | a[name], form[name], frame[name], iframe[name], img[name], map[name], 131 | [background], [bgcolor], [onblur], [onchange], [onclick], [onclick], 132 | [ondblclick], [onfocus], [onkeydown], [onkeypress], [onkeyup], 133 | [onload], [onmousedown], [onmousemove], [onmouseout], [onmouseover], 134 | [onmouseover], [onmouseup], [onreset], [onselect], [onsubmit], [onunload] { 135 | outline: 3px dashed yellow!important; 136 | } 137 | 138 | /* ---------------------------------------------------------- 139 | Empty elements 140 | ---------------------------------------------------------- */ 141 | 142 | section:empty, 143 | form:empty, 144 | span:empty, 145 | div:empty { 146 | display: block!important; 147 | position: static!important; 148 | padding: 10px!important; 149 | background-color: yellow!important; 150 | } 151 | 152 | /* 153 | Thanks to : 154 | * http://www.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/ 155 | * http://meyerweb.com/eric/tools/css/diagnostics/ 156 | * http://red-root.com/sandbox/holmes/ 157 | * http://www.nealgrosskopf.com/tech/thread.php?pid=17 158 | */ 159 | 160 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* 4 | Name: Style de démo 5 | URL: http://github.com/Darklg/CSSCommon 6 | License: MIT 7 | */ 8 | 9 | /* ---------------------------------------------------------- 10 | Contenu 11 |    ------------------------------------------------------- */ 12 | 13 | .fork_me { 14 | visibility: visible; 15 | z-index: 9; 16 | position: fixed; 17 | top: 0; 18 | right: 0; 19 | opacity: 0.99; 20 | } 21 | 22 | @media(max-width:1180px) { 23 | .fork_me { 24 | visibility: hidden; 25 | opacity: 0; 26 | } 27 | } 28 | 29 | #header { 30 | margin-bottom: 15px; 31 | padding-top: 10px; 32 | } 33 | 34 | .cssc-is-responsive #header { 35 | padding-top: 20px; 36 | padding-bottom: 10px; 37 | } 38 | 39 | .container-about { 40 | margin: 20px auto; 41 | padding-top: 20px; 42 | padding-bottom: 20px; 43 | border: 1px solid #d5d5d5; 44 | border-width: 1px 0; 45 | background-color: #f5f5f5; 46 | } 47 | 48 | .container-about .cssc-button { 49 | text-transform: none; 50 | } 51 | 52 | .container-about .cssc-content { 53 | padding-bottom: 20px; 54 | } 55 | 56 | .block-content + .block-content { 57 | margin-top: 50px; 58 | padding-top: 50px; 59 | border-top: 1px solid #f0f0f0; 60 | } 61 | 62 | .block-content:last-child { 63 | padding-bottom: 50px; 64 | } 65 | 66 | /* ---------------------------------------------------------- 67 | Grilles 68 | ---------------------------------------------------------- */ 69 | 70 | .grid-label { 71 | display: block; 72 | margin-bottom: 20px; 73 | min-height: 30px; 74 | -webkit-border-radius: 2px; 75 | -moz-border-radius: 2px; 76 | border-radius: 2px; 77 | text-align: center; 78 | font-size: 13px; 79 | font-weight: bold; 80 | line-height: 30px; 81 | background-color: #d0d0d0; 82 | -webkit-background-clip: border-box; 83 | -moz-background-clip: border-box; 84 | background-clip: border-box; 85 | } 86 | 87 | .double-grid-label { 88 | height: 80px; 89 | line-height: 80px; 90 | } 91 | 92 | .grid-label-even, 93 | .cssc-grid .cssc-grid .grid-label { 94 | background-color: #e0e0e0; 95 | } 96 | 97 | /* ---------------------------------------------------------- 98 | Push 99 | ------------------------------------------------------- */ 100 | 101 | #bc-grid .cssc-grid p { 102 | margin-bottom: 20px; 103 | } 104 | 105 | .block-content-push .cssc-grid { 106 | margin-bottom: 20px; 107 | } 108 | 109 | .block-content-push pre { 110 | margin-bottom: 8px; 111 | } 112 | 113 | /* Exemple de push */ 114 | 115 | .push-double, 116 | .push-simple { 117 | width: 300px; 118 | height: 100px; 119 | } 120 | 121 | .push-double .before, 122 | .push-simple { 123 | background-image: url(../images/300x100-black.png); 124 | } 125 | 126 | .push-double .after, 127 | .push-simple .after { 128 | background-image: url(../images/300x100-grey.png); 129 | } 130 | 131 | /* ---------------------------------------------------------- 132 | Formulaires 133 |    ------------------------------------------------------- */ 134 | 135 | .cssc-form { 136 | padding-right: 40px; 137 | max-width: 450px; 138 | } 139 | 140 | /* ---------------------------------------------------------- 141 |    Divers 142 |    ------------------------------------------------------- */ 143 | 144 | .demo-ir { 145 | width: 300px; 146 | height: 60px; 147 | background-image: url(../images/300x60-blue.gif); 148 | } 149 | 150 | /* ---------------------------------------------------------- 151 |    Block Content : fichier utilisé 152 |    ------------------------------------------------------- */ 153 | 154 | .bkch-aside { 155 | float: right; 156 | font-size: 12px; 157 | } 158 | 159 | /* ---------------------------------------------------------- 160 |    Layouts 161 |    ------------------------------------------------------- */ 162 | 163 | .liste-widgets { 164 | overflow: hidden; 165 | } 166 | 167 | .liste-widgets > li + li { 168 | padding-top: 10px; 169 | } 170 | 171 | #bc-responsive .cssc-lay, 172 | #bc-layouts .cssc-lay { 173 | margin-bottom: 20px; 174 | } 175 | 176 | /* Couleurs pour le Debug */ 177 | 178 | #bc-responsive .cssc-lay, 179 | #bc-layouts .cssc-lay { 180 | background-color: #d0d0d0; 181 | } 182 | 183 | #bc-responsive .cssc-lay > .col-main, 184 | #bc-layouts .cssc-lay > .col-main { 185 | background-color: #e0e0e0; 186 | } 187 | 188 | #bc-responsive .cssc-lay > .col-side, 189 | #bc-layouts .cssc-lay > .col-side { 190 | background-color: #f0f0f0; 191 | } 192 | 193 | /* ---------------------------------------------------------- 194 | Navigation 195 | ---------------------------------------------------------- */ 196 | 197 | .icn-settings { 198 | width: 16px; 199 | background: transparent url(../images/icn-settings.png) no-repeat center center; 200 | } -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* 4 | Attention : Ne pas utiliser @ import dans vos feuilles. 5 | */ 6 | 7 | /* Styles de base */ 8 | @import 'cssc-default.css?v=2.7.12'; 9 | @import 'cssc-common.css?v=2.5.2'; 10 | @import 'cssc-content.css?v=1.1.4'; 11 | 12 | /* Modules */ 13 | @import 'cssc-buttons.css?v=2.2'; 14 | @import 'cssc-forms.css?v=2.2.2'; 15 | @import 'cssc-tables.css?v=1.4'; 16 | @import 'cssc-grid.css?v=4.0'; 17 | @import 'cssc-push.css?v=1.0.7'; 18 | @import 'cssc-navigation.css?v=1.11'; 19 | @import 'cssc-layouts.css?v=1.10.1'; 20 | @import 'cssc-tabs.css?v=1.0.4'; 21 | @import 'cssc-images.css?v=1.0'; 22 | @import 'cssc-print.css?v=1.0.1'; 23 | @import 'cssc-effects.css?v=0.9'; 24 | @import 'cssc-triggers.css?v=0.2'; 25 | 26 | /* Style du site de démo */ 27 | @import 'demo.css?v=201408291703'; -------------------------------------------------------------------------------- /css/project.css: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------------------- 2 | Config 3 | ---------------------------------------------------------- */ 4 | /* Fonts */ 5 | /* Colors */ 6 | /* Breakpoints */ 7 | /* Basic queries */ 8 | /* Sprites */ 9 | /* ---------------------------------------------------------- 10 | Utilities 11 | ---------------------------------------------------------- */ 12 | /* 13 | Name: Retina Sprites 14 | URL: http://github.com/Darklg/CSSCommon 15 | Version: 0.10 16 | License: MIT 17 | Forked from : @AdamBrodzinski | https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass 18 | */ 19 | /* :) */ 20 | /* :) */ 21 | /* Cache values 22 | -------------------------- */ 23 | /* Load sprites 24 | -------------------------- */ 25 | .compassbugfix { 26 | background: url('../images/css-sprite-2x-s285d1784ea.png'); 27 | background: url('../images/css-sprite-s77ae137a15.png'); 28 | } 29 | 30 | /* Mixin 31 | -------------------------- */ 32 | /* Generate icon list 33 | -------------------------- */ 34 | .icn.icn { 35 | background: no-repeat url('../images/css-sprite-s77ae137a15.png') 0 0; 36 | } 37 | 38 | .icn.icn-share-twitter { 39 | height: 19px; 40 | width: 25px; 41 | background-position: 0 -60px; 42 | } 43 | 44 | .icn.icn-user { 45 | height: 18px; 46 | width: 15px; 47 | background-position: 0 -89px; 48 | } 49 | 50 | .icn.icn-like { 51 | height: 21px; 52 | width: 22px; 53 | background-position: 0 0; 54 | } 55 | 56 | .icn.icn-share-fb { 57 | height: 19px; 58 | width: 10px; 59 | background-position: 0 -31px; 60 | } 61 | 62 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) { 63 | .icn.icn { 64 | background-image: url('../images/css-sprite-2x-s285d1784ea.png'); 65 | background-size: 25px auto; 66 | } 67 | 68 | .icn.icn-share-twitter { 69 | background-position: 0 -50px; 70 | } 71 | 72 | .icn.icn-user { 73 | background-position: 0 -74px; 74 | } 75 | 76 | .icn.icn-like { 77 | background-position: 0 0; 78 | } 79 | 80 | .icn.icn-share-fb { 81 | background-position: 0 -26px; 82 | } 83 | } 84 | /* ---------------------------------------------------------- 85 | Plugins 86 | ---------------------------------------------------------- */ 87 | /* ---------------------------------------------------------- 88 | Framework 89 | ---------------------------------------------------------- */ 90 | /* 91 | Name: Common Header 92 | URL: http://github.com/Darklg/CSSCommon 93 | Version: 0.1 94 | License: MIT 95 | */ 96 | /* ---------------------------------------------------------- 97 | Wrapper 98 | ---------------------------------------------------------- */ 99 | .cssc-header__wrapper, 100 | .cssc-header__content, 101 | .cssc-header { 102 | z-index: 1; 103 | position: relative; 104 | -moz-box-sizing: border-box; 105 | box-sizing: border-box; 106 | } 107 | 108 | .has--fixed-header .cssc-header__wrapper, 109 | .cssc-header { 110 | z-index: 3; 111 | } 112 | 113 | .cssc-header__wrapper { 114 | z-index: 1; 115 | position: absolute; 116 | top: 0; 117 | right: 0; 118 | left: 0; 119 | margin: auto; 120 | } 121 | 122 | .has--fixed-header .cssc-header__wrapper { 123 | position: fixed; 124 | } 125 | 126 | .cssc-header__content { 127 | height: 100%; 128 | margin: 0 auto; 129 | max-width: 100%; 130 | text-align: center; 131 | } 132 | 133 | /* ---------------------------------------------------------- 134 | Areas in header 135 | ---------------------------------------------------------- */ 136 | .header__logo, .header__menu, .header__links { 137 | z-index: 1; 138 | position: relative; 139 | } 140 | 141 | /* Mixins 142 | -------------------------- */ 143 | .header__menu, .header__links { 144 | z-index: 2; 145 | position: absolute; 146 | top: 0; 147 | } 148 | 149 | .header__menu { 150 | left: 0; 151 | text-align: left; 152 | } 153 | 154 | .header__links { 155 | right: 0; 156 | text-align: right; 157 | } 158 | 159 | /* ---------------------------------------------------------- 160 | Blocks 161 | ---------------------------------------------------------- */ 162 | .cssc-header__block { 163 | display: inline-block; 164 | z-index: 1; 165 | position: relative; 166 | vertical-align: top; 167 | } 168 | 169 | /* 170 | 182 | 183 |
184 |
185 |
186 |
menu
187 |

188 |
189 |
Account
190 |
Cart
191 |
192 |
193 |
194 |
195 | */ 196 | /* ---------------------------------------------------------- 197 | Theme 198 | ---------------------------------------------------------- */ 199 | /* Header height 200 | -------------------------- */ 201 | .cssc-header__wrapper, 202 | .cssc-header { 203 | height: 100px; 204 | } 205 | 206 | /* Wrapper style 207 | -------------------------- */ 208 | .cssc-header__wrapper { 209 | padding: 10px 15px; 210 | background-color: #FFF; 211 | } 212 | 213 | /* Content max width 214 | -------------------------- */ 215 | .cssc-header__content { 216 | width: 940px; 217 | } 218 | 219 | /* Blocks spacing 220 | -------------------------- */ 221 | .cssc-header__block + .cssc-header__block { 222 | margin-left: 20px; 223 | } 224 | 225 | /* Demo code 226 | -------------------------- */ 227 | .header__logo { 228 | margin: 0; 229 | } 230 | 231 | /* ---------------------------------------------------------- 232 | Project 233 | ---------------------------------------------------------- */ 234 | /* ---------------------------------------------------------- 235 | Layout 236 | ---------------------------------------------------------- */ 237 | /* ---------------------------------------------------------- 238 | Header 239 | ---------------------------------------------------------- */ 240 | /* ---------------------------------------------------------- 241 | Footer 242 | ---------------------------------------------------------- */ 243 | -------------------------------------------------------------------------------- /full-screen.php: -------------------------------------------------------------------------------- 1 | 6 |
7 |
8 |

Hello

9 |
10 |
11 |
12 |
13 |

Hello

14 |
15 |
16 | -------------------------------------------------------------------------------- /images/100x100-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/100x100-black.png -------------------------------------------------------------------------------- /images/12x10-blue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/12x10-blue.gif -------------------------------------------------------------------------------- /images/300x100-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/300x100-black.png -------------------------------------------------------------------------------- /images/300x100-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/300x100-grey.png -------------------------------------------------------------------------------- /images/300x60-blue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/300x60-blue.gif -------------------------------------------------------------------------------- /images/50x50-green.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/50x50-green.gif -------------------------------------------------------------------------------- /images/900x100-cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/900x100-cat.jpg -------------------------------------------------------------------------------- /images/___x100/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/___x100/1.jpg -------------------------------------------------------------------------------- /images/___x100/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/___x100/2.jpg -------------------------------------------------------------------------------- /images/___x100/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/___x100/3.jpg -------------------------------------------------------------------------------- /images/___x100/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/___x100/4.jpg -------------------------------------------------------------------------------- /images/css-sprite-2x-s285d1784ea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-2x-s285d1784ea.png -------------------------------------------------------------------------------- /images/css-sprite-2x/icn-like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-2x/icn-like.png -------------------------------------------------------------------------------- /images/css-sprite-2x/icn-share-fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-2x/icn-share-fb.png -------------------------------------------------------------------------------- /images/css-sprite-2x/icn-share-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-2x/icn-share-twitter.png -------------------------------------------------------------------------------- /images/css-sprite-2x/icn-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-2x/icn-user.png -------------------------------------------------------------------------------- /images/css-sprite-s77ae137a15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite-s77ae137a15.png -------------------------------------------------------------------------------- /images/css-sprite/icn-like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite/icn-like.png -------------------------------------------------------------------------------- /images/css-sprite/icn-share-fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite/icn-share-fb.png -------------------------------------------------------------------------------- /images/css-sprite/icn-share-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite/icn-share-twitter.png -------------------------------------------------------------------------------- /images/css-sprite/icn-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/css-sprite/icn-user.png -------------------------------------------------------------------------------- /images/fork_me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/fork_me.png -------------------------------------------------------------------------------- /images/icn-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/icn-settings.png -------------------------------------------------------------------------------- /images/wide-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darklg/CSSCommon/ebbbc963bd79e7fdc011e5c0716573089604b8b6/images/wide-image.jpg -------------------------------------------------------------------------------- /inc/blocks/common.php: -------------------------------------------------------------------------------- 1 |
2 |

Éléments récurrents

3 |
4 |
5 |
6 |
7 |

Panneau

8 |

Mise en avant de texte.

9 |
10 |
11 |
12 |

Coupure du texte en CSS

13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

14 |
15 |
16 |

Effet Tiroir

17 |
18 |

19 | Survolez-moi ! 20 |

21 |
22 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

23 |
24 |
25 |
26 |
27 |
28 |
29 |

30 | Block media 31 |

32 |
33 | 34 | 35 | 36 |
37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing . (inspiré par @Stubbornella)

38 |
39 |
40 |
41 |
42 |

Remplacement d'image

43 | Texte alternatif 44 |
45 |
46 |

Infobulle

47 |

48 | 49 | Infobulle 50 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. 51 | 52 | • 53 | 54 | Dessous 55 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. 56 | 57 |

58 |
59 |
60 |
61 |
62 |

Centrage vertical

63 |
64 |
65 |
66 |

Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.

67 |
68 |
69 |
70 |
71 |
72 |

Barre d’avancement

73 |

74 | 75 | 30% 76 | 77 |

78 |

Notes

79 |
80 |
81 | = 1; $i--) { ?> 82 | /> 83 | 84 | 85 |
86 |
87 |
88 |
89 | = 1; $i--) { ?> 90 | /> 91 | 96 | 97 |
98 |
99 |
100 |
101 |
102 |

Séparateurs

103 |

The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do — Sarah Ban Breathnach.

104 |
105 |
106 |
107 | 108 |
109 |
110 | 111 | 112 | 113 |
114 |
115 |
116 |

Messages d'avertissement

117 | 123 |
124 |
125 |

Présentation de code

126 |

Balise <pre />

127 | 
<script>
128 | var i;
129 | for (i=0; i<3; i++){
130 |     console.log(i);
131 | }
132 | </script>
133 |

Balise <code />

134 | 1. Hello. 135 |
136 |
137 |
138 | -------------------------------------------------------------------------------- /inc/blocks/html.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Style HTML

4 |

5 | Le container .cssc-content permet de styliser des listes, d'activer une taille de typo de base, de faire flotter des images.
6 | Il est utilisé par exemple dans le contenu d'un article, dans une description de fiche produit, ...
7 | Les autres styles HTML sont disponibles à tous les niveaux du DOM. 8 |

9 |
10 |
11 |
12 |

Lists

13 |
14 |

Unordered list

15 |
    16 |
  • List element
    • 17 |
  • List element
    • 18 |
  • List element
    • 19 |
  • 20 | List element 21 |
      22 |
    • Sub-List element
      • 23 |
    • Sub-List element
      • 24 |
    • Sub-List element
      • 25 |
    • Sub-List element
      • 26 |
    27 |
    • 28 |
  • List element
    • 29 |
  • List element
    • 30 |
31 |

Ordered list

32 |
    33 |
  1. List element
    2. 34 |
  2. List element
    3. 35 |
  3. List element
    4. 36 |
  4. List element
    5. 37 |
  5. List element
    6. 38 |
  6. List element
    7. 39 |
40 |
41 |
42 |
43 |

Content

44 |
45 |

46 | 47 | Lorem ipsum dolor sit amet, abbr adipiscing elit. Sed non strong. 48 | img Suspendisse lectus tortor, link sit amet, adipiscing nec, ultricies sed, dolor. 49 | Cras emementum ultrices diam. 50 |

51 |
52 |
Geyser
53 |
Un geyser est un type particulier de source d'eau chaude qui jaillit par intermittence en projetant à haute température et à haute pression de l'eau et de la vapeur.
54 |
Fjord
55 |
Un fjord est une vallée érodée par un glacier avançant de la montagne à la mer, qui a été envahie par la mer depuis la retraite de la glace.
56 |
57 |

58 | Maecenas ligulasup, varius a, semper mark, euismod non, mi. Proin porttitorsub, 59 | a strong link, 60 | enim est del ins, non small diam nisl sit amet erat. 61 |

62 |
63 |
64 |
65 |
66 |

Title lvl. 1

67 |

Title lvl. 2

68 |

Title lvl. 3

69 |

Title lvl. 4

70 |
Title lvl. 5
71 |
72 |

Contenu d'une citation

73 | 74 | Auteur 75 | 76 |
77 |

Tags

78 |

79 | Renard polaire 80 | Macareux 81 | Sterne 82 | Grande baleine bleue 83 | Mouton 84 |

85 |

Tags Enfants

86 |

87 | Geyser 88 | Fjord 89 | Cascade 90 | Volcan 91 | Glacier 92 | Canyon 93 |

94 |
95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 |
Lightbox header
103 |
104 |
-------------------------------------------------------------------------------- /inc/blocks/lead-about.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

Qu'est-ce que c'est ?

7 |

8 | CSS Common 9 | est un thème de démarrage / librairie CSS, comprenant : 10 |

11 |
    12 |
  • 13 | Une feuille réinitialisant et stylisant des balises 14 | HTML 15 | courantes. 16 |
    • 17 |
  • Une feuille de gestion du contenu.
    • 18 |
  • 19 | Une feuille 20 | d'objets 21 | CSS 22 | utilisés fréquemment. 23 | 24 |
    • 25 |
  • Des modules supplémentaires pour chaque besoin.
    • 26 |
27 |
28 |
29 |

Responsive web design

30 |

31 | Un exemple de 32 | layout Responsive 33 | avec CSSCommon. 34 |

35 |

Pourquoi ?

36 |
37 |

The miracle is this: the more we share the more we have.

38 | 39 | Leonard Nimoy 40 | 41 |
42 |
43 |
44 |
45 |
46 | 47 | Parcourez le projet sur Github 48 | Star it, Clone it, Fork it, Download it ! 49 | 50 |
51 |
52 |
-------------------------------------------------------------------------------- /inc/controller.php: -------------------------------------------------------------------------------- 1 | 2 | 404 Error :( 3 | -------------------------------------------------------------------------------- /inc/pages/about.php: -------------------------------------------------------------------------------- 1 | 6 |
7 |
8 |
9 | Module : 10 | cssc-tabs.css 11 |
12 |

Onglets

13 |
14 |
15 |

Des onglets simples, compatibles avec le plugin jQuery "Tabs" ou la classe MooTools "Tabs".

16 |
17 |
18 | 23 |
    24 |
  • 25 |

    Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

    26 |
    • 27 |
  • 28 |

    Being the richest man in the cemetery doesn’t matter to me … Going to bed at night saying we’ve done something wonderful… that’s what matters to me.

    29 |
    • 30 |
  • 31 |

    A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem.
    The broader one's understanding of the human experience, the better design we will have.

    32 |
    • 33 |
34 |
35 |

36 | Afficher HTML 37 |

38 | 
<div class="cssc-tabs">
 39 |     <ul class="cssc-tabs-clic">
 40 |         <li class="is-current">
 41 |             <a href="#">Onglet</a>
 42 |         </li>
 43 |         <li>
 44 |             <a href="#">Onglet 2</a>
 45 |         </li>
 46 |         <li>
 47 |             <a href="#">Onglet 3</a>
 48 |         </li>
 49 |     </ul>
 50 |     <ul class="cssc-tabs-target">
 51 |         <li class="is-current">
 52 |             <p>Contenu 1.</p>
 53 |         </li>
 54 |         <li>
 55 |             <p>Contenu 2.</p>
 56 |         </li>
 57 |         <li>
 58 |             <p>Contenu 3.</p>
 59 |         </li>
 60 |     </ul>
 61 | </div>
62 |
63 | 64 | 65 | 66 |
67 |
68 | 69 |

Une marge se crée automatiquement entre les éléments, mais le dernier élément d'une ligne est tout de même calé à droite, quel que soit le nombre d'éléments par ligne.

70 |
71 | 89 | 90 |
91 | 92 | 93 | 94 |
95 |
96 |
97 | Module : 98 | cssc-push.css 99 |
100 |

Pushs

101 |
102 |
103 |

Cet objet permet de créer une transition entre deux images. Par exemple, un push avec CTA.

104 |
105 |

Push avec simple fondu

106 |
107 |
108 | 109 | Texte alternatif 110 | 111 |
112 |
113 |

114 | Pas de pseudo-classes, étant donné que certains navigateurs ne supportent pas les transitions. 115 |
116 | Au :hover, .after est progressivement affiché. 117 |
118 | Afficher HTML 119 |

120 | 
<a href="#" class="cssc-push push-simple">
121 |     <span class="after">Texte alternatif</span>
122 | </a>
123 |
124 |
125 |

Push avec double fondu

126 |
127 |
128 | 129 | Texte alternatif 130 | 131 | 132 |
133 |
134 |

135 | Moins de soucis en cas de sprite avec deux images semi-transparentes. 136 |
137 | Au :hover, .after est progressivement affiché pendant que .before est progressivement masqué. 138 |
139 | Afficher HTML 140 |

141 | 
<a href="#" class="cssc-push push-double">
142 |     <span class="before">Texte alternatif</span>
143 |     <span class="after"></span>
144 | </a>
145 |
146 |
147 |
148 | 149 | 150 | 151 |
152 |
153 |
154 | Module : 155 | cssc-images.css 156 |
157 |

Images

158 |
159 |
160 |

Images avec légende / titre à utiliser, par exemple, dans une liste d'articles.

161 |
162 |
163 | 164 | 165 |
166 |

Image Title

167 |

Sub-title

168 |
169 | 170 | 171 | 172 |
173 |

Image Title

174 |

Sub-title

175 |
176 | 177 | 178 | 179 |
180 |

Image Title

181 |

Sub-title

182 |
183 | 184 |
185 |
186 |
-------------------------------------------------------------------------------- /inc/pages/cssc-effects.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Module : 5 | cssc-triggers.css 6 |
7 |

Triggered animations

8 |

Animate any element by acting on a chosen parent element.

9 |
10 | 11 |

Lorem ipsum

12 |
13 |
14 | 15 |

Lorem ipsum

16 |
17 |
18 |
19 |
20 |
21 |
22 | Module : 23 | cssc-effects.css 24 |
25 |

Effects

26 |

A Library of simple effects using CSS.

27 |
28 |
29 |
30 |
31 |

Load effects

32 |

Appear on load

33 |

34 | 35 | 36 | 37 | 38 |

39 |

40 | Afficher HTML 41 | ‣ Relancer 42 |

43 | 
<p class="cssc-effects-appear">
 44 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 45 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 46 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 47 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 48 | </p>
49 |

Slide on load

50 |

51 | 52 | 53 | 54 | 55 |

56 |

57 | Afficher HTML 58 | ‣ Relancer 59 |

60 | 
<p class="cssc-effects-slide">
 61 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 62 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 63 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 64 |     <img class="animate-me" src="http://placehold.it/100x100" alt="" />
 65 | </p>
66 |
67 |
68 |
69 |
70 |

Underline effects

71 |

72 | Default underline • 73 | Underline from left • 74 | Underline from center 75 |

76 |
77 |
78 |
Parallax effect
79 |
80 |
81 |

Hover effects

82 |

Inverted :hover

83 | 88 |

Afficher HTML

89 | 
<ul class="cssc-inverted-hover">
 90 |     <li><a href="#">lorem ipsum</a></li>
 91 |     <li><a href="#">dolor sit amet</a></li>
 92 |     <li><a href="#">consectetur adipiscing elit</a></li>
 93 | </ul>
94 | 95 |

Inverted :hover on images

96 |

97 | 98 | 99 | 100 | 101 |

102 |

Afficher HTML

103 | 
<p class="cssc-inverted-hover--images">
104 |     <a href="#"><img src="images/1.jpg" alt="" /></a>
105 |     <a href="#"><img src="images/2.jpg" alt="" /></a>
106 |     <a href="#"><img src="images/3.jpg" alt="" /></a>
107 |     <a href="#"><img src="images/4.jpg" alt="" /></a>
108 | </p>
109 | 110 |

Colorized hover

111 |

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 |

129 |

Afficher HTML

130 | 
<p class="cssc-colorized-hover">
131 |     <a href="#" class="animate-me">
132 |         <img class="color" src="images/___x100/1.jpg" alt="" />
133 |         <img class="gray" src="images/___x100/1.jpg" alt="" />
134 |     </a>
135 |     <a href="#" class="animate-me">
136 |         <img class="color" src="images/___x100/2.jpg" alt="" />
137 |         <img class="gray" src="images/___x100/2.jpg" alt="" />
138 |     </a>
139 |     <a href="#" class="animate-me">
140 |         <img class="color" src="images/___x100/3.jpg" alt="" />
141 |         <img class="gray" src="images/___x100/3.jpg" alt="" />
142 |     </a>
143 |     <a href="#" class="animate-me">
144 |         <img class="color" src="images/___x100/4.jpg" alt="" />
145 |         <img class="gray" src="images/___x100/4.jpg" alt="" />
146 |     </a>
147 | </p>;
148 | 149 |

Unblur hover

150 |

151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 |

168 |

Afficher HTML

169 | 
<p class="cssc-unblur-hover">
170 |     <a href="#" class="animate-me">
171 |         <img class="clean" src="images/___x100/1.jpg" alt="" />
172 |         <img class="blur" src="images/___x100/1.jpg" alt="" />
173 |     </a>
174 |     <a href="#" class="animate-me">
175 |         <img class="clean" src="images/___x100/2.jpg" alt="" />
176 |         <img class="blur" src="images/___x100/2.jpg" alt="" />
177 |     </a>
178 |     <a href="#" class="animate-me">
179 |         <img class="clean" src="images/___x100/3.jpg" alt="" />
180 |         <img class="blur" src="images/___x100/3.jpg" alt="" />
181 |     </a>
182 |     <a href="#" class="animate-me">
183 |         <img class="clean" src="images/___x100/4.jpg" alt="" />
184 |         <img class="blur" src="images/___x100/4.jpg" alt="" />
185 |     </a>
186 | </p>;
187 | 188 |

Rotating cards

189 |

190 | 191 | 192 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. 193 | 194 | 195 | 196 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. 197 | 198 | 199 | 200 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. 201 | 202 | 203 | 204 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. 205 | 206 |

207 |

Afficher HTML

208 | 
<a href="#" class="cssc-card">
209 |     <span class="front"><img src="http://placehold.it/100x100" alt="" /></span>
210 |     <span class="back">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</span>
211 | </a>
212 |
213 |
214 |
215 |
216 |

Image grid

217 |
218 | 219 |
220 |
221 |
222 |

Hello

223 |
224 |
225 | 226 |
227 |
228 |
229 | -------------------------------------------------------------------------------- /inc/pages/cssc-forms.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Modules : 5 | cssc-forms.css 6 | cssc-buttons.css 7 |
8 |

Formulaires & Buttons

9 |
10 |

11 | Un modèle de formulaire à labels flottants et un modèle simple en paramétrant directement le form.
12 | Cliquez sur les boutons ci-dessous pour découvrir les possibilités de CSSCommon pour les formulaires. 13 |

14 |

15 | Form Block 16 | Form Flottant 17 |

18 |

19 | Form large 20 | Form normal 21 |

22 |
23 | 24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 | Champs classiques 33 |
    34 |
  • 35 | 36 | 37 | Texte d’aide 38 |
    • 39 |
  • 40 | 41 | 42 |
    • 43 |
  • 44 | 45 | 46 |
    • 47 |
  • 48 | 49 | Edit me if u can 50 |
    • 51 |
52 |
53 |
54 | Présentation à deux box 55 |
    56 |
  • 57 | 58 | 59 |
    • 60 |
  • 61 | 62 | 63 |
    • 64 |
65 |
66 |
67 | Formulaire d'inscription 68 |
    69 | 74 |
  • 75 | 76 | 77 |
    • 78 |
  • 79 | 80 | 81 | 82 | 83 |
    • 84 |
  • 85 | 86 | 91 | 96 | 101 |
    • 102 |
  • 103 | 104 | 105 |
    • 106 |
  • 107 | 108 | 113 |
    • 114 |
  • 115 | 116 | 117 | 118 |
    • 119 |
120 |
121 |
122 | Radio & Check 123 |
    124 |
  • 125 | Faux Label 126 | 127 | 128 |
    • 129 |
  • 130 | 131 | 132 |
    • 133 |
  • 134 | Faux Label 135 | 136 | 137 | 138 | 139 |
    • 140 |
  • 141 | 142 | 143 | 144 | 145 |
    • 146 |
  • 147 | 148 | 149 |
    • 150 |
151 |
152 |
153 | 154 |

Formulaire collé

155 |
156 |
157 | 158 | 159 |
160 |
161 | Formulaire type "recherche rapide" ou "inscription à la newsletter" 162 |
163 |
164 | 165 |

Boutons

166 | 167 |

Markup

168 |
169 | a.cssc-button 170 | 171 | 172 |
173 | 174 |

Tailles de boutons

175 |
176 | 177 | 178 | 179 | 180 | 181 |
182 | 183 |

Thèmes de boutons

184 |
185 | 186 | 187 | 188 |
189 | 190 |

Boutons avec icône

191 |
192 | 193 | 194 | 195 | 196 | 197 | 198 |
199 | 200 |

Groupe de boutons

201 |
202 |
203 | 206 |
207 | 208 |
209 | 210 |
211 |
212 | 220 |
221 |
222 | 223 |
-------------------------------------------------------------------------------- /inc/pages/cssc-grid.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Module : 5 | cssc-grid.css 6 |
7 |

Grilles

8 |
9 |

Un système de grilles simple et imbricable.

10 | 11 |
12 |
13 |
col-20p
14 |
15 |
16 |
col-20p
17 |
18 |
19 |
col-20p
20 |
21 |
22 |
col-20p
23 |
24 |
25 |
col-20p
26 |
27 |
28 |
29 |
30 |
col-25p
31 |
32 |
33 |
col-25p
34 |
35 |
36 |
col-25p
37 |
38 |
39 |
col-25p
40 |
41 |
42 |
43 |
44 |
col-33p
45 |
46 |
47 |
col-33p
48 |
49 |
50 |
col-33p
51 |
52 |
53 |
54 |
55 |
col-50p
56 |
57 |
58 |
col-50p
59 |
60 |
61 |
62 |
63 |
col-10p
64 |
65 |
66 |
col-20p
67 |
68 |
69 |
col-30p
70 |
71 |
72 |
col-40p
73 |
74 |
75 | 76 | 77 | 78 |

Afficher HTML

79 | 
<div class="cssc-grid fluid-grid">
80 |     <div class="col-33p">33%</div>
81 |     <div class="col-33p">33%</div>
82 |     <div class="col-33p">33%</div>
83 | </div>
84 | 85 |
-------------------------------------------------------------------------------- /inc/pages/cssc-layouts.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Module : 5 | cssc-layouts.css 6 |
7 |

Layouts

8 |
9 |

Layouts de mise en page. Sidebar à gauche ou droite.

10 | 11 |

Layout basique

12 |
13 |
14 |
15 |

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

16 |

17 |

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

18 |
19 |
20 | 32 |
33 | 34 |

Layout basique inversé

35 |
36 | 45 |
46 |
47 |
48 |

Module title extrait de cssc-content.css

49 |
50 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

51 |
52 |
53 |
54 |

Another module

55 |
56 |

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

57 |
58 |
59 |
60 |
61 |
62 | 63 |

Wide Layout

64 |
65 | 71 |
72 |

The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

73 |
74 |
75 |
76 |
-------------------------------------------------------------------------------- /inc/pages/cssc-navigation.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Module : 5 | cssc-navigation.css 6 |
7 |

Navigation

8 |
9 |

Objets utilisés pour la navigation.

10 |
11 |
12 |
13 | 14 |

Navigation Bar

15 | 16 |
17 |
18 | 22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |
32 |
33 | Settings 34 |
35 |
36 |
37 | 38 | 39 |

Menu Principal

40 | 41 |

Avec sous-menu

42 | 61 | 62 | 63 |

Avec sous-menu "riche" de largeur fixe

64 | 103 | 104 |

Avec sous-menu "riche" 100%

105 | 144 | 145 |

Avec Social links

146 | 158 | 159 |
160 |
161 | 162 | 163 |

Fil d'ariane

164 | 179 | 180 | 195 | 196 |

Liste "inline"

197 |
198 | Choix : 199 | 206 |
207 | 208 |

Menu vertical

209 | 214 | 215 |

Pagination

216 |
217 |
218 |

Classique

219 | 230 |
231 |
232 |

Centrée

233 | 244 |
245 |
246 |

Pagination bullet

247 |
    248 |
  • •
  • •
  • •
  • •
    • 252 |
253 |
254 |
255 | 256 | 257 |
258 | -------------------------------------------------------------------------------- /inc/pages/cssc-tables.php: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Module : 5 | cssc-tables.css 6 |
7 |

Tableaux

8 |
9 | 10 |
11 |
12 |

Thème par défaut

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
EnteteEnteteEntete
contenu
avec sauts
de ligne		contenucontenu
contenuContenu sur deux colonnes, un peu plus long
contenu un peu plus long que les autres, car il faut bien testercontenucontenu
contenucontenucontenu
43 |
44 |
45 |

Thème "basic"

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 63 | 64 | 65 | 66 | 67 |
loremipsumfacto
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.lorem1 €
A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. 62 | The broader one's understanding of the human experience, the better design we will have.ipsum10 €
68 |
69 |
70 | 71 |
72 |
73 |

Thème "tight"

74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
EnteteEnteteEntete
contenu
avec sauts
de ligne		contenucontenu
contenuContenu sur deux colonnes, un peu plus long
contenu un peu plus long que les autres, car il faut bien testercontenucontenu
contenucontenucontenu
104 | 105 |
106 |
107 |

Thème "tight" + "basic"

108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 |
EnteteEnteteEntete
contenu
avec sauts
de ligne		contenucontenu
contenuContenu sur deux colonnes, un peu plus long
contenu un peu plus long que les autres, car il faut bien testercontenucontenu
contenucontenucontenu
139 | 140 |
141 |
142 | 143 |

Thème "bordered"

144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 |
EntêteEntêteEntête
lorem
lorem
lorem
lorem
lorem
lorem
165 | 166 |

Thème "Rounded"

167 |
168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 |
loremipsumfacto
loremipsumfacto
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.lorem1 €
The broader one's understanding of the human experience, the better design we will have.ipsum10 €
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 |
loremipsumfacto
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.lorem1 €
The broader one's understanding of the human experience, the better design we will have.ipsum10 €
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.lorem1 €
225 |
226 |
227 |
228 | -------------------------------------------------------------------------------- /inc/pages/debug.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |

Debug

5 |

A stylesheet which will highlight HTML errors.

6 |
7 |
8 |
9 |
10 |

Missing or bad properties

11 |
12 |

Missing or invalid href

13 |

14 | Empty href - No href - href javascript 15 |

16 |

Forms

17 |
18 |
19 |
20 | - 21 |
22 |
23 |
24 |

Images

25 |

26 | 27 |

28 |
29 |
30 |
31 | 32 |
33 |
34 |

Invalid HTML

35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |

Deprecated elements

46 |
47 | Marquee :) 48 |
Center
49 |
50 |
51 |
52 | 53 |
54 |
55 |

Deprecated attributes

56 |
57 |
BGCOLOR
58 |
onclick
59 |
60 |
61 |
62 | 63 |
64 |
65 |

Empty elements

66 |
67 |

empty div

68 |
69 |

empty span

70 | 71 |

empty form (lacking attributes)

72 |
73 |
74 |
75 |
76 | -------------------------------------------------------------------------------- /inc/pages/responsive-layout.php: -------------------------------------------------------------------------------- 1 | 5 |
6 |
7 |
8 | Module : 9 | cssc-layouts.css 10 |
11 |

Layouts

12 |
13 | 14 |
15 |

Title

16 | 17 | 22 |
23 | 24 |
25 |
26 |
27 |

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

28 |

Une image trop grande (900px)

29 |

30 | 900x100 Cat 31 |

32 |

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

33 |

Une image trop grande, et qui ignore les marges (900px)

34 |

35 | 36 |

37 |

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

38 |
39 |
40 |
41 |
    42 |
  • 43 |

    A Widget

    44 | 52 |
    • 53 |
  • 54 |

    Another Widget

    55 |
      56 |
    • ipsum facto
      • 57 |
    • sit dolor amet
      • 58 |
    59 |
    • 60 |
  • 61 |

    Text Widget

    62 |

    The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

    63 |
    • 64 |
65 |
66 |
67 |
68 |
69 | Module : 70 | cssc-grid.css 71 |
72 |

Grilles responsives

73 |
74 |
75 |
76 |
77 | 50% 78 | (élargi à 100%) 79 |
80 |
81 |
82 |
83 | 50% 84 | (élargi à 100%) 85 |
86 |
87 |
88 |
89 |
90 |
91 | 33% 92 | (élargi à 50%) 93 | (élargi à 100%) 94 |
95 |
96 |
97 |
98 | 33% 99 | (élargi à 50%) 100 | (élargi à 100%) 101 |
102 |
103 |
104 |
105 | 33% 106 | (élargi à 100%) 107 |
108 |
109 |
110 |
111 |
112 |
113 | 25% 114 | (élargi à 50%) 115 | (élargi à 100%) 116 |
117 |
118 |
119 |
120 | 25% 121 | (élargi à 50%) 122 | (élargi à 100%) 123 |
124 |
125 |
126 |
127 | 25% 128 | (élargi à 50%) 129 | (élargi à 100%) 130 |
131 |
132 |
133 |
134 | 25% 135 | (élargi à 50%) 136 | (élargi à 100%) 137 |
138 |
139 |
140 |
141 |
142 |
143 | 20% 144 | (élargi à 50%) 145 | (élargi à 100%) 146 |
147 |
148 |
149 |
150 | 20% 151 | (élargi à 50%) 152 | (élargi à 100%) 153 |
154 |
155 |
156 |
157 | 20% 158 | (élargi à 33%) 159 | (élargi à 100%) 160 |
161 |
162 |
163 |
164 | 20% 165 | (élargi à 33%) 166 | (élargi à 100%) 167 |
168 |
169 |
170 |
171 | 20% 172 | (élargi à 33%) 173 | (élargi à 100%) 174 |
175 |
176 |
177 |
178 |
179 |
180 | 50% 181 | (élargi à 100%) 182 |
183 |
184 |
185 |
186 | 25% 187 | (élargi à 50%) 188 | (élargi à 100%) 189 |
190 |
191 |
192 |
193 | 25% 194 | (élargi à 50%) 195 | (élargi à 100%) 196 |
197 |
198 |
199 |
200 |
201 |
202 | 66% 203 | (élargi à 100%) 204 |
205 |
206 |
207 |
208 | 33% 209 | (élargi à 50%) 210 | (élargi à 100%) 211 |
212 |
213 |
214 | 215 |
216 |
217 |

Afficher HTML (50%)

218 | 
<div class="cssc-grid fluid-grid">
219 |     <div class="col-50p">50%</div>
220 |     <div class="col-50p">50%</div>
221 | </div>
222 |
223 |
224 |

Afficher HTML (25%)

225 | 
<div class="cssc-grid fluid-grid">
226 |     <div class="col-25p">25%</div>
227 |     <div class="col-25p">25%</div>
228 |     <div class="col-25p">25%</div>
229 |     <div class="col-25p">25%</div>
230 | </div>
231 |
232 |
233 | 234 | 235 |
236 |
237 | Module : 238 | cssc-layouts.css 239 |
240 |

Classes de visibilité

241 |
242 |
243 | 
.visible-only-phone {}
244 |
245 |
246 | 
.visible-only-tablet {}
247 |
248 |
249 | 
.visible-only-full {}
250 |
251 |
252 | 
.hidden-on-phone {}
253 |
254 |
255 | 
.hidden-on-tablet {}
256 |
257 |
258 | 
.hidden-on-full {}
259 |
260 | 261 | 262 | 263 |
264 |
265 | Module : 266 | cssc-common.css 267 |
268 |

Nav toggle

269 |
270 |
271 |

272 | 273 | 274 | 275 |

276 |
277 | 278 |
-------------------------------------------------------------------------------- /inc/partials/footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | Fork me on GitHub 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /inc/partials/header.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | CSS Common - Framework CSS 20 | 21 | 22 | 23 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 48 | 61 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | li'), 96 | targets: $$('.cssc-tabs-target > li') 97 | }); 98 | }; -------------------------------------------------------------------------------- /js/html5.js: -------------------------------------------------------------------------------- 1 | /*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 2 | Uncompressed source: https://github.com/aFarkas/html5shiv */ 3 | (function(a,b){function h(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function i(){var a=l.elements;return typeof a=="string"?a.split(" "):a}function j(a){var b={},c=a.createElement,f=a.createDocumentFragment,g=f();a.createElement=function(a){if(!l.shivMethods)return c(a);var f;return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+i().join().replace(/\w+/g,function(a){return c(a),g.createElement(a),'c("'+a+'")'})+");return n}")(l,g)}function k(a){var b;return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),g||(b=!j(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;(function(){var c=b.createElement("a");c.innerHTML="",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{}",function(b){b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}),g=c.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var l={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k};a.html5=l,k(b)})(this,document) -------------------------------------------------------------------------------- /js/selectivizr-min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * selectivizr v1.0.2 - (c) Keith Clark, freely distributable under the terms of the MIT license. 3 | * selectivizr.com 4 | */ 5 | (function(j){function A(a){return a.replace(B,h).replace(C,function(a,d,b){for(var a=b.split(","),b=0,e=a.length;b0){var a=l,f,e=s.substring(0,e).replace(H,i);if(e==i||e.charAt(e.length-1)==o)e+="*";try{f=t(e)}catch(k){}if(f){e=0;for(c=f.length;e-1&&(a=a.substring(0,l));if(a.charAt(0)==":")switch(a.slice(1)){case "root":c=function(a){return b?a!=p:a==p};break;case "target":if(m==8){c=function(a){function c(){var d=location.hash,e=d.slice(1);return b?d==i||a.id!=e:d!=i&&a.id==e}k(j,"hashchange",function(){g(a,d,c())});return c()};break}return!1;case "checked":c=function(a){J.test(a.type)&&k(a,"propertychange",function(){event.propertyName=="checked"&&g(a,d,a.checked!==b)});return a.checked!==b};break;case "disabled":b=!b;case "enabled":c=function(c){if(K.test(c.tagName))return k(c,"propertychange",function(){event.propertyName=="$disabled"&&g(c,d,c.a===b)}),q.push(c),c.a=c.disabled,c.disabled===b;return a==":enabled"?b:!b};break;case "focus":e="focus",f="blur";case "hover":e||(e="mouseenter",f="mouseleave");c=function(a){k(a,b?f:e,function(){g(a,d,!0)});k(a,b?e:f,function(){g(a,d,!1)});return b};break;default:if(!L.test(a))return!1}return{className:d,b:c}}function w(a){return M+"-"+(m==6&&N?O++:a.replace(P,function(a){return a.charCodeAt(0)}))}function D(a){return a.replace(x,h).replace(Q,o)}function g(a,c,d){var b=a.className,c=u(b,c,d);if(c!=b)a.className=c,a.parentNode.className+=i}function u(a,c,d){var b=RegExp("(^|\\s)"+c+"(\\s|$)"),e=b.test(a);return d?e?a:a+o+c:e?a.replace(b,h).replace(x,h):a}function k(a,c,d){a.attachEvent("on"+c,d)}function r(a,c){if(/^https?:\/\//i.test(a))return c.substring(0,c.indexOf("/",8))==a.substring(0,a.indexOf("/",8))?a:null;if(a.charAt(0)=="/")return c.substring(0,c.indexOf("/",8))+a;var d=c.split(/[?#]/)[0];a.charAt(0)!="?"&&d.charAt(d.length-1)!="/"&&(d=d.substring(0,d.lastIndexOf("/")+1));return d+a}function y(a){if(a)return n.open("GET",a,!1),n.send(),(n.status==200?n.responseText:i).replace(R,i).replace(S,function(c,d,b,e,f){return y(r(b||f,a))}).replace(T,function(c,d,b){d=d||i;return" url("+d+r(b,a)+d+") "});return i}function U(){var a,c;a=f.getElementsByTagName("BASE");for(var d=a.length>0?a[0].href:f.location.href,b=0;b0&&setInterval(function(){for(var a=0,c=q.length;a8||!n)){var z={NW:"*.Dom.select",MooTools:"$$",DOMAssistant:"*.$",Prototype:"$$",YAHOO:"*.util.Selector.query",Sizzle:"*",jQuery:"*",dojo:"*.query"},t,q=[],O=0,N=!0,M="slvzr",R=/(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g,S=/@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g,T=/\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g,L=/^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/,B=/:(:first-(?:line|letter))/g,C=/(^|})\s*([^\{]*?[\[:][^{]+)/g,G=/([ +~>])|(:[a-z-]+(?:\(.*?\)+)?)|(\[.*?\])/g,H=/(:not\()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)\)?/g,P=/[^\w-]/g,K=/^(INPUT|SELECT|TEXTAREA|BUTTON)$/,J=/^(checkbox|radio)$/,v=m>6?/[\$\^*]=(['"])\1/:null,E=/([(\[+~])\s+/g,F=/\s+([)\]+~])/g,Q=/\s+/g,x=/^\s*((?:[\S\s]*\S)?)\s*$/,i="",o=" ",h="$1";(function(a,c){function d(){try{p.doScroll("left")}catch(a){setTimeout(d,50);return}b("poll")}function b(d){if(!(d.type=="readystatechange"&&f.readyState!="complete")&&((d.type=="load"?a:f).detachEvent("on"+d.type,b,!1),!e&&(e=!0)))c.call(a,d.type||d)}var e=!1,g=!0;if(f.readyState=="complete")c.call(a,i);else{if(f.createEventObject&&p.doScroll){try{g=!a.frameElement}catch(h){}g&&d()}k(f,"readystatechange",b);k(a,"load",b)}})(j,function(){for(var a in z){var c,d,b=j;if(j[a]){for(c=z[a].replace("*",a).split(".");(d=c.shift())&&(b=b[d]););if(typeof b=="function"){t=b;U();break}}}})}}})(this); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSSCommon", 3 | "version": "0.0.0", 4 | "description": "A (simple) CSS Starter, like Twitter's Bootstrap or Normalize.css", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/Darklg/CSSCommon.git" 8 | }, 9 | "author": "Darklg", 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/Darklg/CSSCommon/issues" 13 | }, 14 | "devDependencies": { 15 | "grunt": "~0.4.2", 16 | "grunt-contrib-concat": "~0.3.0", 17 | "grunt-contrib-cssmin": "~0.8.0", 18 | "grunt-shell": "~0.6.4", 19 | "phantomcss": "^0.9.1" 20 | }, 21 | "dependencies": { 22 | "casperjs": "~1.1.0-beta3", 23 | "phantomjs": "^1.9.7-14", 24 | "resemblejs": "~1.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /responsive.php: -------------------------------------------------------------------------------- 1 | 0 { 87 | padding: $pad; 88 | } 89 | } 90 | 91 | @mixin _retina-sprite-2x($name, $sprites, $sprites2x, $hover, $active, $onlypos, $dimensions: true, $pad: 0) { 92 | & { 93 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 94 | @if $onlypos == true { 95 | background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; 96 | } 97 | @else { 98 | background: $sprite2xUrl no-repeat (nth($pos, 1) / 2 nth($pos, 2) / 2); 99 | background-size: $bgSize2x auto; 100 | } 101 | // sprite-path() returns the path of the generated sprite sheet, which 102 | // image-width() calculates the width of. the ceil() is in place in case 103 | // you have sprites that have an odd-number of pixels in width 104 | @if $hover == true { 105 | $name_hover: $name + _hover; 106 | // create myButton_hover and assign it 107 | &:hover { 108 | $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2); 109 | background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; 110 | } 111 | } 112 | @if $active == true { 113 | $name_active: $name + _active; 114 | // create myButton_active and assign it 115 | &:active { 116 | $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2); 117 | background-position: nth($pos, 1) / 2 nth($pos, 2) / 2; 118 | } 119 | } 120 | } 121 | } 122 | 123 | /* Generate icon list 124 | -------------------------- */ 125 | 126 | @if($create-class-for-sprite-img) { 127 | .icn.icn { 128 | background: no-repeat $sprites 0 0; 129 | } 130 | @each $clazz in listFiles($spritefolder) { 131 | .icn.#{$clazz} { 132 | @include _retina-sprite-1x(#{$clazz}, $sprites, $sprites2x, 0 ,0, true); 133 | } 134 | } 135 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) { 136 | .icn.icn { 137 | background-image: $sprites2x; 138 | background-size: $bgSize2x auto; 139 | } 140 | @each $clazz in listFiles($spritefolder2x) { 141 | .icn.#{$clazz} { 142 | @include _retina-sprite-2x(#{$clazz}, $sprites, $sprites2x, 0 ,0, true); 143 | } 144 | } 145 | } 146 | } 147 | 148 | -------------------------------------------------------------------------------- /scss/utilities/list-files.rb: -------------------------------------------------------------------------------- 1 | # http://stackoverflow.com/a/10456412 2 | module Sass::Script::Functions 3 | def listFiles(path) 4 | return Sass::Script::List.new( 5 | Dir.glob(path.value).map! { |x| Sass::Script::String.new(File.basename(x, ".*")) }, 6 | :comma 7 | ) 8 | end 9 | end -------------------------------------------------------------------------------- /scss/utilities/remove-all-comments.rb: -------------------------------------------------------------------------------- 1 | # Thanks to : http://stackoverflow.com/a/15766439 2 | 3 | class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base 4 | 5 | # Removes all comments completely 6 | def visit_comment(node) 7 | return [] 8 | end 9 | 10 | end 11 | --------------------------------------------------------------------------------