Details
153 |More
154 |Content
155 |``.
41 | It is important because of how sekizai works. Basically if two scripts are
42 | added through ``addtoblock`` and the contents of the block are the same
43 | they are merged. That way you never have duplicate jQuery's on the page.
44 | The caveat than is that the whitespace around that script tag must match.
45 | To avoid mistakes we always do them in single line.
46 | - **Code readability** always wins.
47 |
48 | .. code-block:: django
49 |
50 | // bad
51 | {% block content %}
52 | {% if true %}Hello World
{% endif %}
53 | {% endblock content %}
54 |
55 | {% addtoblock "js" %}
56 |
57 | {% endaddtoblock %}
58 | {% addtoblock "js" %}
59 |
64 | {% endaddtoblock %}
65 |
66 | .. code-block:: django
67 |
68 | // good
69 | {% block content %}
70 |
71 | {% if true %}
72 | Hello World
73 | {% endif %}
74 |
75 | {% endblock content %}
76 |
77 | {% addtoblock "js" %}{% endaddtoblock %}
78 | {% addtoblock "js" %}
79 |
84 | {% endaddtoblock %}
85 |
86 |
87 | IDs vs Classes
88 | ==============
89 |
90 | .. important::
91 |
92 | - Avoid IDs wherever possible.
93 | - Where it's necessary to use IDs, always use **unique names**.
94 |
95 | You should **always** use classes instead of IDs where you can. Classes
96 | represent a more OOP approach to adding and removing style sets like
97 | ``box box-wide box-hint``.
98 |
99 | Try to avoid declaring ID's at all. They should only be used to reference form
100 | elements or for in-page navigation in which case you need to make the name
101 | **absolutely unique**.
102 |
103 | .. code-block:: html
104 |
105 | // bad
106 | ...
107 |
108 |
109 |
110 |
111 |
112 |
113 | .. code-block:: html
114 |
115 | // good
116 | ...
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | Modularity
125 | ==========
126 |
127 | .. important::
128 |
129 | Try to keep HTML structure simple, avoiding unnecessary elements.
130 | It is sometimes easier to use a single div with a
131 | single class rather than multiple divs with multiple classes.
132 |
133 | For example, lets take a look at the following code snippet:
134 |
135 | .. code-block:: html
136 |
137 |
138 | My Blog
139 | Hello World
140 |
141 |
142 | We should build modular HTML, and take pains to avoid type selectors.
143 | Add additional classes for lead, content, author, meta info, tags and so on.
144 | The content section itself can then contain the usual HTML code:
145 |
146 | .. code-block:: html
147 |
148 |
149 | My Blog
150 | Hello World
151 |
152 | Details
153 | More
154 | Content
155 |
156 |
157 |
162 |
163 |
--------------------------------------------------------------------------------
/docs/guidelines/styles.rst:
--------------------------------------------------------------------------------
1 | ******
2 | Styles
3 | ******
4 |
5 | .. note::
6 |
7 | In addition to the :doc:`general` guidelines, the following sections
8 | describe stylesheet-specific rules.
9 |
10 |
11 | Naming
12 | ======
13 |
14 | .. important::
15 |
16 | - Use **lowercase** in SCSS file names.
17 | - Use only **dashes** in class/ID names.
18 |
19 | .. code-block:: text
20 |
21 | // bad
22 | Search.scss, marketingSite.scss or theme-dark-blog.scss
23 |
24 | class="blog blogItem blog_item__featured"
25 |
26 | .. code-block:: text
27 |
28 | // good
29 | search.scss, marketing_site.scss or theme_dark_blog.scss
30 |
31 | class="blog blog-item blog-item-featured"
32 |
33 |
34 | Nesting
35 | =======
36 |
37 | .. important::
38 |
39 | - Don't overuse nesting; nest elements to a maximum of **4 indents**.
40 |
41 | With great power comes great responsibility (just wanted to throw that in here).
42 | When writing in **Sass** or **Less** laziness can have performance implications.
43 | While nesting is very powerful, we should avoid unnecessary levels or
44 | blocks that can be simplified.
45 |
46 | .. code-block:: scss
47 |
48 | // bad
49 | .nav-main {
50 | ul {
51 | @extend list-reset;
52 | li {
53 | padding: 5px 10px;
54 | a {
55 | color: red;
56 | }
57 | }
58 | }
59 | }
60 |
61 | .. code-block:: scss
62 |
63 | // good
64 | .nav-main {
65 | ul {
66 | @extend list-reset;
67 | }
68 | li {
69 | padding: 5px 10px;
70 | }
71 | a {
72 | color: red;
73 | }
74 | }
75 |
76 |
77 | Formatting
78 | ==========
79 |
80 | .. important::
81 |
82 | - Always add a space after the colon ``:``.
83 | - Only write one CSS property per line.
84 | - Avoid using selectors such as ``div.container`` or ``ul > li > a`` (i.e. ad-hoc, non-namespaced) to determine
85 | `specificity `_.
86 | - Write colour values in lowercase and avoid colour names.
87 |
88 | .. code-block:: css
89 |
90 | // bad
91 | article.item {
92 | color: white;
93 | padding: 10px; margin-left: 0; margin-top: 0; margin-bottom: 10px;
94 | background-repeat: no-repeat;
95 | background-position: left top;
96 | }
97 |
98 | .. code-block:: css
99 |
100 | // good
101 | .item {
102 | color: #fff;
103 | padding: 10px;
104 | margin: 0 0 10px 0;
105 | background: no-repeat left top;
106 | }
107 |
108 |
109 | Ordering
110 | ========
111 |
112 | .. important::
113 |
114 | - Use block-style, and group elements below.
115 | - See ``scss-lint.json`` for a comprehensive ordering example.
116 |
117 | #. includes (mixins)
118 | #. extending
119 | #. visibility, position
120 | #. color, font-size, line-height, font-* (font relevant data)
121 | #. width, height, padding, margin (box model relevant date)
122 | #. border, background (box style data)
123 | #. media, print (media queries)
124 | #. :after, :before, :active (pseudo elements)
125 | #. nested elements or parent referencing selectors
126 |
127 | .. note::
128 |
129 | Combine attributes such as background-image, background-color,
130 | background-repeat into a single line ``background:
131 | #fff url("image.png") no-repeat left top;`` when it makes sense.
132 | But remember, that a shorthand like ``background`` cannot be overridden
133 | with just ``background-image``, so use wisely!
134 |
135 |
136 | Example
137 | -------
138 |
139 | .. code-block:: css
140 |
141 | .addon-blog {
142 | // mixins
143 | @include border-radius(3px);
144 | @include box-shadow(0 0 2px #eee);
145 | // extending
146 | @extend .list-unstyled;
147 | // styles
148 | display: inline;
149 | position: relative;
150 | z-index: 1;
151 | color: white;
152 | font-size: 16px;
153 | line-height: 20px;
154 | width: 80%;
155 | height: 80%;
156 | padding: 5px;
157 | margin: 0 auto;
158 | border: 2px solid #ccc;
159 | background: #ddd;
160 | // desktop and up
161 | @media (min-width: $screen-md-min) {
162 | display: block;
163 | }
164 | // pseudo elements
165 | &:active,
166 | &:hover {
167 | color: black;
168 | }
169 | }
170 |
--------------------------------------------------------------------------------
/docs/index.rst:
--------------------------------------------------------------------------------
1 | #######
2 | Welcome
3 | #######
4 |
5 | The django CMS Boilerplate Webpack is the most complete **django CMS** based
6 | Boilerplate for rapid development. It uses the full potential of
7 | `ES2015+ `_ or `fonts.com `_.
29 |
30 |
31 | img/
32 | ====
33 |
34 | Demo images (which might be later integrated as media files via Filer)
35 | should be placed within ``/static/img/dummy``. This folder will be ignored by
36 | the ``gulp preprocess`` and ``gulp images`` commands.
37 |
38 | Make use of grouping and create additional sub-directories such as
39 | ``/static/img/icons`` or ``/static/img/visuals`` if the file count seems to
40 | be excessive.
41 |
42 |
43 | js/
44 | ===
45 |
46 | The same structure approach as described within :doc:`private` is applied to
47 | the JS directory. jQuery is an essential part and should be
48 | treated the same as the Bootstrap component.
49 |
--------------------------------------------------------------------------------
/docs/structure/templates.rst:
--------------------------------------------------------------------------------
1 | *********
2 | Templates
3 | *********
4 |
5 | .. note::
6 |
7 | django CMS Boilerplate Webpack follows django CMS good practices, and
8 | provides three layers of site template inheritance using ``{% extends %}``.
9 | See `Django template engine `_
34 | in the Divio Cloud Collection family of applications are designed to use the same
35 | JavaScript frameworks throughout, so there is no need for references to them
36 | to be made anywhere else than ``base_root.html``.
37 |
38 |
39 | ================
40 | ``content.html``
41 | ================
42 |
43 | ``content.html`` is the template that *designers* will be most interested in.
44 | It fills in the bare HTML elements of ``base.html``, and allows page
45 | content structures and layouts (headings, ``divs``, navigation menus and so on)
46 | to be created within ``{% block extend_root %}``.
47 |
48 | ``content.html`` contains an *empty* ``{% block content %}``, that - in templates
49 | that extend it - is filled with ``{% placeholder content %}`` as well as width
50 | cues for images etc.
51 |
52 |
53 | ==============================
54 | User-selectable page templates
55 | ==============================
56 |
57 | Finally, users can select templates that inherit from ``base.html``.
58 | Even if your project has one 'standard' template and some minor variations,
59 | it is wise for *all* of them to inherit from a ``base.html``, so that they
60 | can all be edited independently. Even if your 'standard' template changes
61 | nothing in ``base.html``, you should not be tempted to make ``base.html``
62 | selectable by the user.
63 |
64 |
65 | The following templates are always required:
66 |
67 | - ``404.html`` for 404 error handling. You are not obliged to construct an
68 | elaborate and hilarious tribute to some trope in popular culture, because you are an adult.
69 | - ``500.html`` for critical errors, **only add generic html without template tags**
70 | - ``base.html`` as entry point for ``{% extends %}``
71 |
72 |
73 | =========
74 | includes/
75 | =========
76 |
77 | Global inclusion files should be added here, for example the
78 | `navigation `_,
79 | `django messages `_
90 | which can be chosen within the CMS by the user.
91 |
92 | .. image:: ../_static/toolbar-templates.png
93 |
94 |
95 | ==========
96 | Page Types
97 | ==========
98 |
99 | You can save a CMS page as "Page Type" and re-use it later when creating a
100 | new page. Simply select *Page > Save as Page Type ..* and choose a name.
101 | You can create a new page by selecting *Page > Add Page > New Page* and choose
102 | the "Page type" you want to use. That drop down does not show up if there are
103 | no page types saved.
104 |
105 | Page types are listed separately within the menu tree underneath *Page Types*.
106 | This allows you to change or delete them at any time if required.
107 |
108 | .. image:: ../_static/toolbar-page-types.png
109 |
110 |
111 | =======================
112 | Blocks and Placeholders
113 | =======================
114 |
115 | The content block ``{% block content %}{% endblock %}`` and placeholder
116 | ``{% placeholder content %}`` always need to be present within page templates.
117 |
--------------------------------------------------------------------------------
/docs/tips/index.rst:
--------------------------------------------------------------------------------
1 | ###############
2 | Tips and Tricks
3 | ###############
4 |
5 | .. note::
6 |
7 | There are several tips & tricks we found over the time that are worth
8 | mentioning.
9 |
10 |
11 | ********
12 | Floating
13 | ********
14 |
15 | When using ``float: left;``, ``display: block;`` is not required anymore as
16 | **every** element which is floated automatically gets the **block** state.
17 | This does not apply to sub-elements.
18 |
19 |
20 | ****************
21 | Hidden Attribute
22 | ****************
23 |
24 | With modern HTML5 we can use the ``hidden="hidden"`` attribute which is a
25 | **softer** version of ``display: none;``. This state can easily be overwritten
26 | using CSS or JavaScript. As such the attribute is ideal for hiding elements
27 | which are later displayed through JavaScript to prevent jumping behaviours.
28 | But be aware of the `current support `_.
29 |
30 |
31 | ******************
32 | Image Optimisation
33 | ******************
34 |
35 | Images are the number one source of optimisation when it comes to file size.
36 | Optimise images using tools like `CodeKit Your browser is out-of-date!
Update your browser to view this website correctly. Update my browser now
'}};
9 |
--------------------------------------------------------------------------------
/private/js/webpack.config.js:
--------------------------------------------------------------------------------
1 | const argv = require('minimist')(process.argv.slice(2));
2 | const WebpackPolyfillPlugin = require('webpack2-polyfill-plugin');
3 | const plugins = [];
4 | const webpack = require('webpack');
5 | const path = require('path');
6 |
7 |
8 | // TODO check if polling is still required https://github.com/divio/djangocms-boilerplate-webpack/blob/master/webpack.config.debug.js#L16
9 |
10 | process.env.NODE_ENV = (argv.debug) ? 'development' : 'production';
11 |
12 | plugins.push(
13 | new WebpackPolyfillPlugin()
14 | );
15 |
16 | // Bundle splitting. Don't forget to {% addtoblock "js" %} afterwards
17 | plugins.push(
18 | new webpack.optimize.CommonsChunkPlugin({
19 | name: 'base',
20 | chunks: ['base', 'cms'],
21 | })
22 | );
23 |
24 | // add plugins depending on if we are debugging or not
25 | if (argv.debug) {
26 | plugins.push(
27 | new webpack.LoaderOptionsPlugin({
28 | minimize: false,
29 | debug: true,
30 | })
31 | );
32 | plugins.push(
33 | new webpack.DefinePlugin({
34 | DEBUG: 'true',
35 | })
36 | );
37 | } else {
38 | plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
39 | plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
40 | plugins.push(
41 | new webpack.LoaderOptionsPlugin({
42 | minimize: true,
43 | debug: false,
44 | })
45 | );
46 | plugins.push(
47 | new webpack.DefinePlugin({
48 | DEBUG: 'false',
49 | })
50 | );
51 | plugins.push(
52 | new webpack.optimize.UglifyJsPlugin({
53 | beautify: false,
54 | mangle: {
55 | screw_ie8: true,
56 | keep_fnames: true,
57 | },
58 | compress: {
59 | screw_ie8: true,
60 | },
61 | comments: false,
62 | })
63 | );
64 | }
65 |
66 | module.exports = {
67 | devtool: argv.debug ? 'cheap-module-eval-source-map' : false,
68 | entry: {
69 | base: path.join(__dirname, 'base.js'),
70 | cms: path.join(__dirname, 'cms.js'),
71 | // detail: path.join(__dirname, 'detail.js'),
72 | },
73 | output: {
74 | path: path.join(__dirname, '..', '..', 'static', 'js', 'dist'),
75 | filename: '[name].bundle.js',
76 | publicPath: '/static/',
77 | },
78 | plugins: plugins,
79 | resolve: {
80 | modules: [__dirname, 'node_modules'],
81 | alias: {
82 | // make sure that we always use our jquery when loading 3rd party plugins
83 | jquery: require.resolve('jquery'),
84 | outdatedbrowser: path.join(__dirname, 'libs', 'outdatedBrowser.min.js'),
85 | },
86 | },
87 | module: {
88 | rules: [
89 | {
90 | test: /\.js$/,
91 | use: [{
92 | loader: 'babel-loader',
93 | options: {
94 | retainLines: true,
95 | },
96 | }],
97 | exclude: /(node_modules|vendor|libs|addons\/jquery.*)/,
98 | include: __dirname,
99 | },
100 | {
101 | test: /outdatedBrowser/,
102 | use: [{
103 | loader: 'exports-loader',
104 | options: {
105 | outdatedBrowser: true,
106 | },
107 | }],
108 |
109 | },
110 | {
111 | test: /bootstrap-sass/,
112 | use: [{
113 | loader: 'imports-loader',
114 | options: {
115 | jQuery: 'jquery',
116 | },
117 | }],
118 | },
119 | ],
120 | },
121 | }
122 |
123 | // disable DeprecationWarning: loaderUtils.parseQuery() DeprecationWarning
124 | process.noDeprecation = true
125 |
--------------------------------------------------------------------------------
/private/sass/base.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | /*
3 | * Copyright (c) 2013, Divio AG
4 | * Licensed under BSD
5 | * http://github.com/divio/djangocms-boilerplate-webpack
6 | */
7 |
8 | // #############################################################################
9 | // IMPORTS
10 | @import "settings/all";
11 |
12 | // importin mixins
13 | @import "mixins/all";
14 |
15 | // importing frameworks
16 | @import "libs/all";
17 |
18 | // importing components
19 | @import "components/all";
20 |
--------------------------------------------------------------------------------
/private/sass/components/_all.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // AUTOIMPORTS
3 | // this folder contains required variables for colors, sizes, styles and more
4 | // add additional files for encapsulated settings
5 |
6 | @import "fonts";
7 | @import "browser";
8 | @import "icons";
9 | @import "buttons";
10 | @import "forms";
11 | @import "helpers";
12 | @import "cms";
13 | @import "print";
14 |
--------------------------------------------------------------------------------
/private/sass/components/_browser.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // OUTDATED BROWSER
3 | // this addon adds modified styles to the outdated browser script found
4 | // on outdatedbrowser.com we specifically added changes to class names and
5 | // removed id references to be more compliant
6 | /* stylelint-disable selector-max-type, selector-max-universal */
7 |
8 | .browser-outdated {
9 | display: none;
10 | position: fixed;
11 | bottom: 0;
12 | left: 0;
13 | z-index: 9999;
14 | color: #fff;
15 | text-align: center;
16 | text-transform: uppercase;
17 | // do not add paddings or margins on the container
18 | width: 100%;
19 | height: auto;
20 | background-color: $brand-danger;
21 |
22 | h3,
23 | p {
24 | color: #fff;
25 | }
26 |
27 | .btn-outline {
28 | color: #fff;
29 | border: 2px solid #fff;
30 |
31 | &:hover {
32 | color: $brand-danger;
33 | background: #fff;
34 | }
35 | }
36 |
37 | .last {
38 | position: absolute;
39 | top: $line-height-computed / 2;
40 | right: $line-height-computed;
41 |
42 | a {
43 | display: inline-block;
44 | color: #fff;
45 | font-size: 36px;
46 | line-height: 1;
47 | text-decoration: none;
48 | }
49 | }
50 |
51 | // add spacer in order for cross styling between noscript and out-of-date
52 | .btn-outline,
53 | noscript h3 {
54 | margin-bottom: $line-height-computed;
55 | }
56 | }
57 |
58 | // additionally also implement a warning when JavaScript is disabled
59 | .noscript .browser-outdated {
60 | display: block;
61 |
62 | p,
63 | h3 {
64 | display: none;
65 | }
66 |
67 | noscript h3 {
68 | display: block;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/private/sass/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // BUTTONS
3 | // all styles related to the button system should be declared within this file
4 | // apply the "sites/" nesting described within the documentation if the file is
5 | // getting to large
6 |
7 | // BUTTONS/animation
8 | .btn {
9 | transition: background $speed-base;
10 | }
11 |
12 | %btn-outline {
13 | border: 1px solid transparent;
14 | background: transparent;
15 | }
16 |
17 | // BUTTONS/outline
18 | .btn-outline {
19 | &-default {
20 | @extend %btn-outline;
21 | @include button-variant-outline($btn-default-color, $btn-default-border);
22 | }
23 |
24 | &-primary {
25 | @extend %btn-outline;
26 | @include button-variant-outline($btn-primary-bg, $btn-primary-border);
27 | }
28 |
29 | &-success {
30 | @extend %btn-outline;
31 | @include button-variant-outline($btn-success-bg, $btn-success-border);
32 | }
33 |
34 | &-info {
35 | @extend %btn-outline;
36 | @include button-variant-outline($btn-info-bg, $btn-info-border);
37 | }
38 |
39 | &-warning {
40 | @extend %btn-outline;
41 | @include button-variant-outline($btn-warning-bg, $btn-warning-border);
42 | }
43 |
44 | &-danger {
45 | @extend %btn-outline;
46 | @include button-variant-outline($btn-danger-bg, $btn-danger-border);
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/private/sass/components/_cms.scss:
--------------------------------------------------------------------------------
1 | $cms-condensed-structure-width: 402px;
2 |
3 | .cms-toolbar-expanded {
4 | margin-top: 0 !important;
5 | padding-top: 46px;
6 | }
7 |
8 | @media (min-width: ($screen-lg + $cms-condensed-structure-width)) {
9 | .cms-structure-mode-structure {
10 | width: calc(100% - #{$cms-condensed-structure-width});
11 | }
12 |
13 | .cms-structure-mode-structure .navbar-fixed-top {
14 | right: $cms-condensed-structure-width;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/private/sass/components/_fonts.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // FONTS
3 |
4 | // there are two options to choose from when integrating fonts:
5 | // "OPTION 1": importing fonts from an external resource
6 | // "OPTION 2": hosting the files yourself
7 |
8 | // OPTION 1
9 | // @import url("https://fonts.googleapis.com/css?family=Lobster");
10 |
11 | // OPTION 2
12 | // @font-face {
13 | // font-family: "ClearSans";
14 | // font-weight: 200;
15 | // src: url("../fonts/clearsans/ClearSans-Light.eot?#iefix");
16 | // src: url("../fonts/clearsans/ClearSans-Light.eot?#iefix") format("eot"),
17 | // url("../fonts/clearsans/ClearSans-Light.woff") format("woff"),
18 | // url("../fonts/clearsans/ClearSans-Light.ttf") format("truetype"),
19 | // url("../fonts/clearsans/ClearSans-Light.svg#ClearSans-Light") format("svg");
20 | // }
21 | //
22 | // @font-face {
23 | // font-family: "ClearSans";
24 | // font-weight: 400;
25 | // src: url("../fonts/clearsans/ClearSans-Regular.eot?#iefix");
26 | // src: url("../fonts/clearsans/ClearSans-Regular.eot?#iefix") format("eot"),
27 | // url("../fonts/clearsans/ClearSans-Regular.woff") format("woff"),
28 | // url("../fonts/clearsans/ClearSans-Regular.ttf") format("truetype"),
29 | // url("../fonts/clearsans/ClearSans-Regular.svg#ClearSans-Light") format("svg");
30 | // }
31 | // @font-face {
32 | // font-family: "ClearSans";
33 | // font-weight: 600;
34 | // src: url("../fonts/clearsans/ClearSans-Medium.eot?#iefix");
35 | // src: url("../fonts/clearsans/ClearSans-Medium.eot?#iefix") format("eot"),
36 | // url("../fonts/clearsans/ClearSans-Medium.woff") format("woff"),
37 | // url("../fonts/clearsans/ClearSans-Medium.ttf") format("truetype"),
38 | // url("../fonts/clearsans/ClearSans-Medium.svg#ClearSans-Light") format("svg");
39 | // }
40 |
--------------------------------------------------------------------------------
/private/sass/components/_forms.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // FORMS
3 | // all styles related to the global forms should be declared within this file
4 | // apply the "sites/" nesting described within the documentation if the file
5 | // is getting to large
6 |
7 | // FORMS/fieldset
8 | // DOCS: http://getbootstrap.com/css/#tables-responsive
9 | @-moz-document url-prefix() {
10 | fieldset { // stylelint-disable
11 | display: table-cell;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/private/sass/components/_helpers.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // HELPERS
3 | // helper classes for the general layout
4 |
5 | // HELPERS/spacer
6 | .spacer {
7 | margin-top: $line-height-computed;
8 | margin-bottom: $line-height-computed;
9 | }
10 |
11 | .spacer-xs {
12 | margin-top: $line-height-computed / 2;
13 | margin-bottom: $line-height-computed / 2;
14 | }
15 |
16 | .spacer-sm {
17 | margin-top: $line-height-computed / 1.5;
18 | margin-bottom: $line-height-computed / 1.5;
19 | }
20 |
21 | .spacer-md {
22 | @extend .spacer;
23 | }
24 |
25 | .spacer-lg {
26 | margin-top: $line-height-computed * 2;
27 | margin-bottom: $line-height-computed * 2;
28 | }
29 |
30 | .spacer-zero {
31 | margin: 0;
32 | }
33 |
34 | .spacer:after,
35 | .spacer-xs:after,
36 | .spacer-sm:after,
37 | .spacer-md:after,
38 | .spacer-lg:after,
39 | .spacer-zero:after {
40 | content: "";
41 | display: table;
42 | clear: both;
43 | }
44 |
45 | // HELPERS/accessibility
46 | .skip-links {
47 | @extend .list-unstyled;
48 |
49 | position: absolute;
50 | top: $navbar-height;
51 | right: 0;
52 | left: 0;
53 | z-index: 9999;
54 |
55 | // stylelint-disable-next-line
56 | a {
57 | @extend .sr-only;
58 | @extend .sr-only-focusable;
59 | }
60 | }
61 |
62 | // HELPERS/colors
63 | @include bg-variant(".brand-primary", $brand-primary);
64 | @include bg-variant(".brand-success", $brand-success);
65 | @include bg-variant(".brand-info", $brand-info);
66 | @include bg-variant(".brand-warning", $brand-warning);
67 | @include bg-variant(".brand-danger", $brand-danger);
68 | @include bg-variant(".brand-muted", $text-muted);
69 | @include bg-variant(".brand-gray-darker", $gray-darker);
70 | @include bg-variant(".brand-gray-dark", $gray-dark);
71 | @include bg-variant(".brand-gray", $gray);
72 | @include bg-variant(".brand-gray-light", $gray-light);
73 | @include bg-variant(".brand-gray-lighter", $gray-lighter);
74 |
--------------------------------------------------------------------------------
/private/sass/components/_icons.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable */
2 |
3 | $svg-colors: (
4 | "brand-primary": $brand-primary,
5 | "brand-danger": $brand-danger,
6 | "brand-warning": $brand-warning,
7 | "brand-info": $brand-info,
8 | "brand-success": $brand-success,
9 | "gray-darker": $gray-darker,
10 | "gray-dark": $gray-dark,
11 | "gray": $gray,
12 | "gray-light": $gray-light,
13 | "gray-lighter": $gray-lighter,
14 | "white": white,
15 | "black": black,
16 | );
17 |
18 | .icon {
19 | display: inline-block;
20 | vertical-align: top;
21 | width: 1em;
22 | height: 1em;
23 |
24 | svg {
25 | display: block;
26 | width: 100%;
27 | height: 100%;
28 | }
29 | }
30 |
31 | @each $key in map-keys($svg-colors) {
32 | .icon-#{$key} {
33 | color: map-get($svg-colors, $key);
34 |
35 | svg {
36 | fill: map-get($svg-colors, $key);
37 | }
38 | }
39 | }
40 |
41 | svg path {
42 | fill: inherit;
43 | }
44 |
--------------------------------------------------------------------------------
/private/sass/components/_print.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // PRINT
3 | // this file is intended for all print styles and rules
4 | // to ensure your website also works when printed
5 | /* stylelint-disable selector-max-type */
6 |
7 | @media print {
8 |
9 | // Defaults
10 | a[href]:after {
11 | content: "";
12 | }
13 |
14 | #cms_toolbar,
15 | .browser-outdated {
16 | display: none !important;
17 | }
18 |
19 | // Custom
20 | .navbar-head {
21 | display: block;
22 | }
23 |
24 | .navbar-main {
25 | display: none;
26 | }
27 |
28 | .navbar-head .navbar-brand a {
29 | text-indent: 0;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/private/sass/libs/_all.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // AUTOIMPORTS
3 | // this folder is for additional independent libraries such as 960gs or
4 | // twitter bootstrap these libraries do not depend on other elements
5 |
6 | @import "bootstrap";
7 |
--------------------------------------------------------------------------------
/private/sass/libs/_bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.3.7 (http://getbootstrap.com)
3 | * Copyright 2011-2015 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 |
7 | // Core variables and mixins
8 |
9 | @import "bootstrap-sass/bootstrap/variables";
10 | @import "bootstrap-sass/bootstrap/mixins";
11 | @import "bootstrap-sass/bootstrap/normalize";
12 | @import "bootstrap-sass/bootstrap/print";
13 | @import "bootstrap-sass/bootstrap/scaffolding";
14 | @import "bootstrap-sass/bootstrap/type";
15 | @import "bootstrap-sass/bootstrap/code";
16 | @import "bootstrap-sass/bootstrap/grid";
17 | @import "bootstrap-sass/bootstrap/tables";
18 | @import "bootstrap-sass/bootstrap/forms";
19 | @import "bootstrap-sass/bootstrap/buttons";
20 |
21 | // Components
22 | @import "bootstrap-sass/bootstrap/component-animations";
23 | @import "bootstrap-sass/bootstrap/dropdowns";
24 | @import "bootstrap-sass/bootstrap/button-groups";
25 | @import "bootstrap-sass/bootstrap/input-groups";
26 | @import "bootstrap-sass/bootstrap/navs";
27 | @import "bootstrap-sass/bootstrap/navbar";
28 | @import "bootstrap-sass/bootstrap/breadcrumbs";
29 | @import "bootstrap-sass/bootstrap/pagination";
30 | @import "bootstrap-sass/bootstrap/pager";
31 | @import "bootstrap-sass/bootstrap/labels";
32 | @import "bootstrap-sass/bootstrap/badges";
33 | @import "bootstrap-sass/bootstrap/jumbotron";
34 | @import "bootstrap-sass/bootstrap/thumbnails";
35 | @import "bootstrap-sass/bootstrap/alerts";
36 | @import "bootstrap-sass/bootstrap/progress-bars";
37 | @import "bootstrap-sass/bootstrap/media";
38 | @import "bootstrap-sass/bootstrap/list-group";
39 | @import "bootstrap-sass/bootstrap/panels";
40 | @import "bootstrap-sass/bootstrap/responsive-embed";
41 | @import "bootstrap-sass/bootstrap/wells";
42 | @import "bootstrap-sass/bootstrap/close";
43 |
44 | // Components w/ JavaScript
45 | @import "bootstrap-sass/bootstrap/modals";
46 | @import "bootstrap-sass/bootstrap/tooltip";
47 | @import "bootstrap-sass/bootstrap/popovers";
48 | @import "bootstrap-sass/bootstrap/carousel";
49 |
50 | // Utility classes
51 | @import "bootstrap-sass/bootstrap/utilities";
52 | @import "bootstrap-sass/bootstrap/responsive-utilities";
53 |
--------------------------------------------------------------------------------
/private/sass/mixins/_all.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // AUTOIMPORTS
3 | // this folder is for additional mixins
4 | // each mixin should be its own maintained file
5 |
6 | @import "functions";
7 | @import "zindex";
8 | @import "other";
9 |
--------------------------------------------------------------------------------
/private/sass/mixins/_functions.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // FUNCTIONS
3 | // basic mathematical functions that are helpful
4 |
5 | // em calculation
6 | @function em($target, $context: $font-size) {
7 | @if $target == 0 {
8 | @return 0;
9 | }
10 |
11 | @return $target / $context + em;
12 | }
13 |
--------------------------------------------------------------------------------
/private/sass/mixins/_other.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // OTHER
3 |
4 | // hides text in an element so you can see the background.
5 | // INFO: conflicts otherwise with hide-text from bootstrap
6 | @mixin hide-content() {
7 | $approximate-em-value: 12px / 1em;
8 | $wider-than-any-screen: -9999em;
9 |
10 | text-indent: $wider-than-any-screen * $approximate-em-value;
11 | overflow: hidden;
12 | text-align: left;
13 | }
14 |
15 | // outline button mixin which extends bootstrap button-variant
16 | @mixin button-variant-outline($color, $border, $color-hover: #fff) {
17 | @include button-variant($color, transparent, $border);
18 |
19 | &:hover,
20 | &:active,
21 | &.active,
22 | &:focus,
23 | .open > &.dropdown-toggle {
24 | color: $color-hover;
25 | background-color: $border;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/private/sass/mixins/_zindex.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // ZINDEX
3 |
4 | // handle z-index mor easily
5 | // DOCS: http://www.sitepoint.com/better-solution-managing-z-index-sass/
6 | @function map-has-nested-keys($map, $keys...) {
7 | @each $key in $keys {
8 | @if not map-has-key($map, $key) {
9 | @return false;
10 | }
11 | $map: map-get($map, $key);
12 | }
13 |
14 | @return true;
15 | }
16 |
17 | @function map-deep-get($map, $keys...) {
18 | @each $key in $keys {
19 | $map: map-get($map, $key);
20 | }
21 |
22 | @return $map;
23 | }
24 |
25 | @function z($layers...) {
26 | @if not map-has-nested-keys($z-layers, $layers...) {
27 | @error "No layer found for `#{inspect($layers...)}`
28 | in $z-layers map. Property omitted.";
29 | }
30 |
31 | @return map-deep-get($z-layers, $layers...);
32 | }
33 |
--------------------------------------------------------------------------------
/private/sass/settings/_all.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // AUTOIMPORTS
3 | // this folder contains required variables for colors, sizes, styles and more
4 | // add additional files for encapsulated settings
5 |
6 | @import "bootstrap";
7 | @import "custom";
8 |
--------------------------------------------------------------------------------
/private/sass/settings/_bootstrap.scss:
--------------------------------------------------------------------------------
1 | // #############################################################################
2 | // GLOBAL IMPORTS
3 | // using https://github.com/twbs/bootstrap-sass
4 | // Override Bootstrap variables
5 |
6 | // a flag to toggle asset pipeline / compass integration
7 | // defaults to true if twbs-font-path function is present
8 | // (no function => twbs-font-path('') parsed as string == right side)
9 | // in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
10 | // $bootstrap-sass-asset-helper:
11 | // (twbs-font-path("") != unquote('twbs-font-path("")'))
12 |
13 | // copied directly from _variables.scss
14 | // updated from Bootstrap v3.3.7 (http://getbootstrap.com)
15 |
16 | /* stylelint-disable */
17 |
18 | $bootstrap-sass-asset-helper: false;
19 | //
20 | // Variables
21 | // --------------------------------------------------
22 |
23 |
24 | //== Colors
25 | //
26 | //## Gray and brand colors for use across Bootstrap.
27 |
28 | $gray-base: #000;
29 | $gray-darker: lighten($gray-base, 13.5%); // #222
30 | $gray-dark: lighten($gray-base, 20%); // #333
31 | $gray: lighten($gray-base, 33.5%); // #555
32 | $gray-light: lighten($gray-base, 46.7%); // #777
33 | $gray-lighter: lighten($gray-base, 93.5%); // #eee
34 |
35 | $brand-primary: darken(#428bca, 6.5%); // #337ab7
36 | $brand-success: #5cb85c;
37 | $brand-info: #5bc0de;
38 | $brand-warning: #f0ad4e;
39 | $brand-danger: #d9534f;
40 |
41 |
42 | //== Scaffolding
43 | //
44 | //## Settings for some of the most global styles.
45 |
46 | //** Background color for ``.
47 | $body-bg: #fff;
48 | //** Global text color on ``.
49 | $text-color: $gray-dark;
50 |
51 | //** Global textual link color.
52 | $link-color: $brand-primary;
53 | //** Link hover color set via `darken()` function.
54 | $link-hover-color: darken($link-color, 15%);
55 | //** Link hover decoration.
56 | $link-hover-decoration: underline;
57 |
58 |
59 | //== Typography
60 | //
61 | //## Font, line-height, and color for body text, headings, and more.
62 |
63 | $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
64 | $font-family-serif: Georgia, "Times New Roman", Times, serif;
65 | //** Default monospace fonts for ``, ``, and ``.
66 | $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
67 | $font-family-base: $font-family-sans-serif;
68 |
69 | $font-size-base: 14px;
70 | $font-size-large: ceil(($font-size-base * 1.25)); // ~18px
71 | $font-size-small: ceil(($font-size-base * 0.85)); // ~12px
72 |
73 | $font-size-h1: floor(($font-size-base * 2.6)); // ~36px
74 | $font-size-h2: floor(($font-size-base * 2.15)); // ~30px
75 | $font-size-h3: ceil(($font-size-base * 1.7)); // ~24px
76 | $font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
77 | $font-size-h5: $font-size-base;
78 | $font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
79 |
80 | //** Unit-less `line-height` for use in components like buttons.
81 | $line-height-base: 1.428571429; // 20/14
82 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
83 | $line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
84 |
85 | //** By default, this inherits from the ``.
86 | $headings-font-family: inherit;
87 | $headings-font-weight: 500;
88 | $headings-line-height: 1.1;
89 | $headings-color: inherit;
90 |
91 |
92 | //== Iconography
93 | //
94 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
95 |
96 | //** Load fonts from this directory.
97 |
98 | // [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
99 | // [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
100 | // $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/");
101 |
102 | //** File name for all font files.
103 | // $icon-font-name: "glyphicons-halflings-regular";
104 | //** Element ID within SVG icon file.
105 | // $icon-font-svg-id: "glyphicons_halflingsregular";
106 |
107 |
108 | //== Components
109 | //
110 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
111 |
112 | $padding-base-vertical: 6px;
113 | $padding-base-horizontal: 12px;
114 |
115 | $padding-large-vertical: 10px;
116 | $padding-large-horizontal: 16px;
117 |
118 | $padding-small-vertical: 5px;
119 | $padding-small-horizontal: 10px;
120 |
121 | $padding-xs-vertical: 1px;
122 | $padding-xs-horizontal: 5px;
123 |
124 | $line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
125 | $line-height-small: 1.5;
126 |
127 | $border-radius-base: 4px;
128 | $border-radius-large: 6px;
129 | $border-radius-small: 3px;
130 |
131 | //** Global color for active items (e.g., navs or dropdowns).
132 | $component-active-color: #fff;
133 | //** Global background color for active items (e.g., navs or dropdowns).
134 | $component-active-bg: $brand-primary;
135 |
136 | //** Width of the `border` for generating carets that indicate dropdowns.
137 | $caret-width-base: 4px;
138 | //** Carets increase slightly in size for larger components.
139 | $caret-width-large: 5px;
140 |
141 |
142 | //== Tables
143 | //
144 | //## Customizes the `.table` component with basic values, each used across all table variations.
145 |
146 | //** Padding for ``s and ` `s.
147 | $table-cell-padding: 8px;
148 | //** Padding for cells in `.table-condensed`.
149 | $table-condensed-cell-padding: 5px;
150 |
151 | //** Default background color used for all tables.
152 | $table-bg: transparent;
153 | //** Background color used for `.table-striped`.
154 | $table-bg-accent: #f9f9f9;
155 | //** Background color used for `.table-hover`.
156 | $table-bg-hover: #f5f5f5;
157 | $table-bg-active: $table-bg-hover;
158 |
159 | //** Border color for table and cell borders.
160 | $table-border-color: #ddd;
161 |
162 |
163 | //== Buttons
164 | //
165 | //## For each of Bootstrap's buttons, define text, background and border color.
166 |
167 | $btn-font-weight: normal;
168 |
169 | $btn-default-color: #333;
170 | $btn-default-bg: #fff;
171 | $btn-default-border: #ccc;
172 |
173 | $btn-primary-color: #fff;
174 | $btn-primary-bg: $brand-primary;
175 | $btn-primary-border: darken($btn-primary-bg, 5%);
176 |
177 | $btn-success-color: #fff;
178 | $btn-success-bg: $brand-success;
179 | $btn-success-border: darken($btn-success-bg, 5%);
180 |
181 | $btn-info-color: #fff;
182 | $btn-info-bg: $brand-info;
183 | $btn-info-border: darken($btn-info-bg, 5%);
184 |
185 | $btn-warning-color: #fff;
186 | $btn-warning-bg: $brand-warning;
187 | $btn-warning-border: darken($btn-warning-bg, 5%);
188 |
189 | $btn-danger-color: #fff;
190 | $btn-danger-bg: $brand-danger;
191 | $btn-danger-border: darken($btn-danger-bg, 5%);
192 |
193 | $btn-link-disabled-color: $gray-light;
194 |
195 | // Allows for customizing button radius independently from global border radius
196 | $btn-border-radius-base: $border-radius-base;
197 | $btn-border-radius-large: $border-radius-large;
198 | $btn-border-radius-small: $border-radius-small;
199 |
200 |
201 | //== Forms
202 | //
203 | //##
204 |
205 | //** `` background color
206 | $input-bg: #fff;
207 | //** `` background color
208 | $input-bg-disabled: $gray-lighter;
209 |
210 | //** Text color for ``s
211 | $input-color: $gray;
212 | //** `` border color
213 | $input-border: #ccc;
214 |
215 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
216 | //** Default `.form-control` border radius
217 | // This has no effect on `