1 |
4eeb3b46
|
Assos Assos
|
<!-- @file Instructions for subtheming using the Sass Starterkit. -->
|
2 |
1f623f01
|
Assos Assos
|
<!-- @defgroup subtheme_sass -->
|
3 |
|
|
<!-- @ingroup subtheme -->
|
4 |
4eeb3b46
|
Assos Assos
|
# 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 |
eefc2ac0
|
Assos Assos
|
- Read the @link getting_started Getting Started @endlink and
|
15 |
|
|
@link subtheme Sub-theming @endlink documentation topics.
|
16 |
4eeb3b46
|
Assos Assos
|
- 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 |
ec2b0e7b
|
Assos Assos
|
The `./THEMENAME/scss/_default-variables.scss` file is generally where you will
|
38 |
4eeb3b46
|
Assos Assos
|
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 |
ec2b0e7b
|
Assos Assos
|
The `./THEMENAME/scss/overrides.scss` file contains various Drupal overrides to
|
42 |
4eeb3b46
|
Assos Assos
|
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 |
1f623f01
|
Assos Assos
|
- @link subtheme_settings Theme Settings @endlink
|
55 |
4eeb3b46
|
Assos Assos
|
- @link registry Theme Registry @endlink
|
56 |
|
|
|
57 |
9525582e
|
Assos Assos
|
[Bootstrap Framework]: https://getbootstrap.com/docs/3.3/
|
58 |
4eeb3b46
|
Assos Assos
|
[Bootstrap Framework Source Files]: https://github.com/twbs/bootstrap-sass
|
59 |
|
|
[Sass]: http://sass-lang.com |