├── .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 |
Mise en avant de texte.
9 |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 |19 | Survolez-moi ! 20 |
21 | 24 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing . (inspiré par @Stubbornella)
38 |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 |Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.
67 |74 |
78 | 77 |The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do — Sarah Ban Breathnach.
104 |<script> 128 | var i; 129 | for (i=0; i<3; i++){ 130 | console.log(i); 131 | } 132 | </script>133 |
1. Hello.
135 |
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 |
46 |
47 | Lorem ipsum dolor sit amet, abbr adipiscing elit. Sed non strong.
48 |
Suspendisse lectus tortor, link sit amet, adipiscing nec, ultricies sed, dolor.
49 | Cras emementum ultrices diam.
50 |
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 |
72 |77 |Contenu d'une citation
73 | 74 | Auteur 75 | 76 |
79 | Renard polaire 80 | Macareux 81 | Sterne 82 | Grande baleine bleue 83 | Mouton 84 |
85 |8 | CSS Common 9 | est un thème de démarrage / librairie CSS, comprenant : 10 |
11 |31 | Un exemple de 32 | layout Responsive 33 | avec CSSCommon. 34 |
35 |
37 | The miracle is this: the more we share the more we have.
38 |
39 | Leonard Nimoy
40 |
41 |
42 | cssc-tabs.css
11 | Des onglets simples, compatibles avec le plugin jQuery "Tabs" ou la classe MooTools "Tabs".
16 |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 |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 |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.
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 |
cssc-push.css
99 | Cet objet permet de créer une transition entre deux images. Par exemple, un push avec CTA.
104 |
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 |
<a href="#" class="cssc-push push-simple"> 121 | <span class="after">Texte alternatif</span> 122 | </a>123 |
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 |
<a href="#" class="cssc-push push-double"> 142 | <span class="before">Texte alternatif</span> 143 | <span class="after"></span> 144 | </a>145 |
cssc-images.css
156 | Images avec légende / titre à utiliser, par exemple, dans une liste d'articles.
161 |Sub-title
168 |Sub-title
175 |Sub-title
182 |cssc-triggers.css
6 | Animate any element by acting on a chosen parent element.
9 |Lorem ipsum
16 |cssc-effects.css
24 | A Library of simple effects using CSS.
27 |
34 |
35 |
36 |
37 |
38 |
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 |
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 |
72 | Default underline • 73 | Underline from left • 74 | Underline from center 75 |
76 |<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 |
<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 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
<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 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
<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 |
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 |
<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 |
Hello
cssc-forms.css
6 | cssc-buttons.css
7 |
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 |
15 | Form Block 16 | Form Flottant 17 |
18 |19 | Form large 20 | Form normal 21 |
22 |cssc-grid.css
6 | Un système de grilles simple et imbricable.
10 | 11 |<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 |
cssc-layouts.css
6 | Layouts de mise en page. Sidebar à gauche ou droite.
10 | 11 |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 |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 |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 |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 |The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.
73 |cssc-navigation.css
6 | Objets utilisés pour la navigation.
10 |cssc-tables.css
6 | Entete | 17 |Entete | 18 |Entete | 19 |
---|---|---|
contenu avec sauts de ligne |
24 | contenu | 25 |contenu | 26 |
contenu | 29 |Contenu sur deux colonnes, un peu plus long | 30 ||
contenu un peu plus long que les autres, car il faut bien tester | 33 |contenu | 34 |contenu | 35 |
contenu | 38 |contenu | 39 |contenu | 40 |
lorem | 50 |ipsum | 51 |facto | 52 |
---|---|---|
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 |lorem | 58 |1 € | 59 |
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. | 63 |ipsum | 64 |10 € | 65 |
Entete | 78 |Entete | 79 |Entete | 80 |
---|---|---|
contenu avec sauts de ligne |
85 | contenu | 86 |contenu | 87 |
contenu | 90 |Contenu sur deux colonnes, un peu plus long | 91 ||
contenu un peu plus long que les autres, car il faut bien tester | 94 |contenu | 95 |contenu | 96 |
contenu | 99 |contenu | 100 |contenu | 101 |
Entete | 113 |Entete | 114 |Entete | 115 |
---|---|---|
contenu avec sauts de ligne |
120 | contenu | 121 |contenu | 122 |
contenu | 125 |Contenu sur deux colonnes, un peu plus long | 126 ||
contenu un peu plus long que les autres, car il faut bien tester | 129 |contenu | 130 |contenu | 131 |
contenu | 134 |contenu | 135 |contenu | 136 |
Entête | 148 |Entête | 149 |Entête | 150 |
---|---|---|
lorem |
155 | lorem |
156 | lorem |
157 |
lorem |
160 | lorem |
161 | lorem |
162 |
lorem | 173 |ipsum | 174 |facto | 175 |
---|---|---|
lorem | 180 |ipsum | 181 |facto | 182 |
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle. | 187 |lorem | 188 |1 € | 189 |
The broader one's understanding of the human experience, the better design we will have. | 192 |ipsum | 193 |10 € | 194 |
lorem | 203 |ipsum | 204 |facto | 205 |
---|---|---|
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle. | 210 |lorem | 211 |1 € | 212 |
The broader one's understanding of the human experience, the better design we will have. | 215 |ipsum | 216 |10 € | 217 |
it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle. | 220 |lorem | 221 |1 € | 222 |
A stylesheet which will highlight HTML errors.
6 |14 | Empty href - No href - href javascript 15 |
16 |
26 |
27 |
Demo utilisant le Responsive layout de CSSCommon, activé avec la classe .cssc-is-responsive
sur html ou body.
Work in progress. Retour au framework.
cssc-layouts.css
10 | 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 |
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.
33 |
35 |
36 |
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 |cssc-grid.css
71 | <div class="cssc-grid fluid-grid"> 219 | <div class="col-50p">50%</div> 220 | <div class="col-50p">50%</div> 221 | </div>222 |
<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 |
cssc-layouts.css
239 | .visible-only-phone {}244 |
.visible-only-tablet {}247 |
.visible-only-full {}250 |
.hidden-on-phone {}253 |
.hidden-on-tablet {}256 |
.hidden-on-full {}259 |
cssc-common.css
267 | 272 | 273 | 274 | 275 |
276 |