|
1
|
<!-- @file Instructions for subtheming using the Sass Starterkit. -->
|
|
2
|
<!-- @defgroup subtheme_sass -->
|
|
3
|
<!-- @ingroup subtheme -->
|
|
4
|
# Sass Starterkit
|
|
5
|
|
|
6
|
Below are instructions on how to create a Bootstrap sub-theme using a Sass
|
|
7
|
preprocessor.
|
|
8
|
|
|
9
|
- [Prerequisites](#prerequisites)
|
|
10
|
- [Additional Setup](#setup)
|
|
11
|
- [Overrides](#overrides)
|
|
12
|
|
|
13
|
## Prerequisites
|
|
14
|
- Read the @link getting_started Getting Started @endlink and
|
|
15
|
@link subtheme Sub-theming @endlink documentation topics.
|
|
16
|
- You must understand the basic concept of using the [Sass] CSS pre-processor.
|
|
17
|
- You must use a **[local Sass compiler](https://www.google.com/search?q=sass+compiler)**.
|
|
18
|
- You must use the [Bootstrap Framework Source Files] ending in the `.scss`
|
|
19
|
extension, not files ending in `.css`.
|
|
20
|
|
|
21
|
## Additional Setup {#setup}
|
|
22
|
Download and extract the **latest** 3.x.x version of
|
|
23
|
[Bootstrap Framework Source Files] into the root of your new sub-theme. After
|
|
24
|
it has been extracted, the directory should be renamed (if needed) so it reads
|
|
25
|
`./THEMENAME/bootstrap`.
|
|
26
|
|
|
27
|
If for whatever reason you have an additional `bootstrap` directory wrapping the
|
|
28
|
first `bootstrap` directory (e.g. `./THEMENAME/bootstrap/bootstrap`), remove the
|
|
29
|
wrapping `bootstrap` directory. You will only ever need to touch these files if
|
|
30
|
or when you upgrade your version of the [Bootstrap Framework].
|
|
31
|
|
|
32
|
{.alert.alert-warning} **WARNING:** Do not modify the files inside of
|
|
33
|
`./THEMENAME/bootstrap` directly. Doing so may cause issues when upgrading the
|
|
34
|
[Bootstrap Framework] in the future.
|
|
35
|
|
|
36
|
## Overrides {#overrides}
|
|
37
|
The `./THEMENAME/scss/_default-variables.scss` file is generally where you will
|
|
38
|
spend the majority of your time providing any default variables that should be
|
|
39
|
used by the [Bootstrap Framework] instead of its own.
|
|
40
|
|
|
41
|
The `./THEMENAME/scss/overrides.scss` file contains various Drupal overrides to
|
|
42
|
properly integrate with the [Bootstrap Framework]. It may contain a few
|
|
43
|
enhancements, feel free to edit this file as you see fit.
|
|
44
|
|
|
45
|
The `./THEMENAME/scss/style.scss` file is the glue that combines:
|
|
46
|
`_default-variables.scss`, [Bootstrap Framework Source Files] and the
|
|
47
|
`overrides.scss` file together. Generally, you will not need to modify this
|
|
48
|
file unless you need to add or remove files to be imported. This is the file
|
|
49
|
that you should compile to `./THEMENAME/css/styles.css` (note the same file
|
|
50
|
name, using a different extension of course).
|
|
51
|
|
|
52
|
#### See also:
|
|
53
|
- @link templates Templates @endlink
|
|
54
|
- @link subtheme_settings Theme Settings @endlink
|
|
55
|
- @link registry Theme Registry @endlink
|
|
56
|
|
|
57
|
[Bootstrap Framework]: https://getbootstrap.com/docs/3.3/
|
|
58
|
[Bootstrap Framework Source Files]: https://github.com/twbs/bootstrap-sass
|
|
59
|
[Sass]: http://sass-lang.com
|
