kril-theme/README.md

60 lines
2.5 KiB
Markdown
Raw Normal View History

2016-03-23 11:18:13 +02:00
# understrap-child
Basic Child Theme for UnderStrap Theme Framework: https://github.com/holger1411/understrap
2016-05-04 00:05:25 +03:00
## How it works
Understrap Child Theme shares with the parent theme all PHP files and adds its own functions.php on top of the UnderStrap parent theme's functions.php.
2016-03-23 11:18:13 +02:00
**IT DOES NOT LOAD THE PARENT THEMES CSS FILE(S)!** Instead it uses the UnderStrap Parent Theme as a dependency via npm and compiles its own CSS file from it.
2016-03-23 11:18:13 +02:00
Understrap Child Theme uses the Enqueue method to load and sort the CSS file the right way instead of the old @import method.
2016-03-23 11:18:13 +02:00
2016-05-04 00:05:25 +03:00
## Installation
1. Install the parent theme UnderStrap first: `https://github.com/holger1411/understrap`
- IMPORTANT: If you download UnderStrap from GitHub make sure you rename the "understrap-master.zip" file to "understrap.zip" or you might have problems using this child theme!
1. Upload the understrap-child folder to your wp-content/themes directory
1. Go into your WP admin backend
1. Go to "Appearance -> Themes"
1. Activate the UnderStrap Child theme
2016-03-23 11:18:13 +02:00
2016-05-04 00:05:25 +03:00
## Editing
Add your own CSS styles to `/sass/theme/_child_theme.scss`
or import you own files into `/sass/theme/understrap-child.scss`
To overwrite Bootstrap's or UnderStrap's base variables just add your own value to:
`/sass/theme/_child_theme_variables.scss`
For example, the "$brand-primary" variable is used by both Bootstrap and UnderStrap.
Add your own color like: `$brand-primary: #ff6600;` in `/sass/theme/_child_theme_variables.scss` to overwrite it. This change will automatically apply to all elements that use the $brand-primary variable.
2016-03-23 11:18:13 +02:00
It will be outputted into:
`/css/understrap-child.min.css` and `/css/understrap-child.css`
2016-03-23 11:18:13 +02:00
2016-05-04 00:05:25 +03:00
So you have one clean CSS file at the end and just one request.
2016-10-24 03:30:16 +03:00
## Developing With NPM, Gulp, SASS and Browser Sync
2016-05-04 00:05:25 +03:00
### Installing Dependencies
2017-05-17 00:45:33 +03:00
- Make sure you have installed Node.js, Gulp, and Browser-Sync [1] on your computer globally
- Open your terminal and browse to the location of your UnderStrap copy
2016-10-24 03:30:16 +03:00
- Run: `$ npm install` then: `$ gulp copy-assets`
2016-05-04 00:05:25 +03:00
### Running
To work and compile your Sass files on the fly start:
- `$ gulp watch`
Or, to run with Browser-Sync:
2018-03-26 12:19:31 +03:00
- First change the browser-sync options to reflect your environment in the file `/gulpconfig.json` in the beginning of the file:
2016-05-04 00:05:25 +03:00
```javascript
2018-03-26 12:19:31 +03:00
"browserSyncOptions" : {
"proxy": "localhost/wordpress/",
"notify": false
}
2016-05-04 00:05:25 +03:00
};
```
- then run: `$ gulp watch-bs`
2018-02-12 17:33:39 +02:00
[1] Visit [https://browsersync.io/](https://browsersync.io/) for more information on Browser Sync