|
1 | | -# understrap-child |
2 | | -Basic Child Theme for Understrap Theme Framework: https://github.com/understrap/understrap |
| 1 | +<p align="center"><img src="https://understrap.com/wp-content/uploads/2022/02/Understrap_Logo_Color.svg" width="320" height="auto"></p> |
3 | 2 |
|
4 | | -## How it works |
5 | | -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. |
| 3 | +#### See: [Official Demo](https://demos.understrap.com) | Read: [Official Docs Page](https://docs.understrap.com/) |
6 | 4 |
|
7 | | -**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. |
| 5 | +# Understrap Child Starter Theme |
8 | 6 |
|
9 | | -Understrap Child Theme uses the Enqueue method to load and sort the CSS file the right way instead of the old @import method. |
| 7 | +Website: [understrap.com](https://understrap.com) |
10 | 8 |
|
11 | | -## Installation |
12 | | -1. Install the parent theme Understrap first: `https://github.com/understrap/understrap` or `https://wordpress.org/themes/understrap/` |
13 | | - - 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! |
14 | | -1. Upload the understrap-child folder to your wp-content/themes directory |
15 | | -1. Go into your WP admin backend |
16 | | -1. Go to "Appearance -> Themes" |
17 | | -1. Activate the Understrap Child theme |
| 9 | +Parent Theme Project: [github.com/understrap/understrap](https://github.com/understrap/understrap) |
18 | 10 |
|
19 | | -## Editing |
20 | | -Add your own CSS styles to `/src/sass/theme/_child_theme.scss` |
21 | | -or import you own files into `/src/sass/theme/understrap-child.scss` |
| 11 | +Premium Child Themes: [understrap.com/child-themes/](https://understrap.com/child-themes/) |
22 | 12 |
|
23 | | -To overwrite Bootstrap's or Understrap's base variables just add your own value to: |
24 | | -`/src/sass/theme/_child_theme_variables.scss` |
| 13 | +## About |
25 | 14 |
|
26 | | -For example, the "$primary" variable is used by both Bootstrap and Understrap. |
| 15 | +Understrap is the renowned open-source WordPress starter theme that combines Underscores with Bootstrap. Trusted by more than 100,000 developers. This repo holds the **Child Starter Theme** for developers using the [Understrap Theme Framework](https://github.com/understrap/understrap). |
27 | 16 |
|
28 | | -Add your own color like: `$primary: #ff6600;` in `/src/sass/theme/_child_theme_variables.scss` to overwrite it. This change will automatically apply to all elements that use the $brand-primary variable. |
| 17 | +## Documentation |
29 | 18 |
|
30 | | -It will be outputted into: |
31 | | -`/css/understrap-child.min.css` and `/css/understrap-child.css` |
| 19 | +Full documentation for this starter theme is available at [docs.understrap.com](https://docs.understrap.com). |
32 | 20 |
|
33 | | -So you have one clean CSS file at the end and just one request. |
34 | 21 |
|
35 | | -Add your own JS to `/src/js/custom-javascript.js` to have it bundled into `/js/child-theme.js` and `/js/child-theme.min.js`. If you'd like to add additional files, you'll need to add the filenames to the Rollup.js config file: `/src/build/rollup.config.js`. |
| 22 | +## Questions |
36 | 23 |
|
37 | | -## Developing With NPM, postCSS, Rollup, SASS and BrowserSync |
| 24 | +For support requests and bugs, we recommend browsing our issues [here (parent theme)](https://github.com/understrap/understrap/issues) and [here (child theme)](https://github.com/understrap/understrap-child/issues) and opening a new issue if necessary. For more broad discussion, like questions about the roadmap, visit our [discussion board](https://github.com/understrap/understrap/discussions). |
38 | 25 |
|
39 | | -This theme uses [sass](https://www.npmjs.com/package/sass) and [postCSS](https://postcss.org) to handle compiling all of the styles into one style sheet. The theme also includes [rollup.js](https://www.rollupjs.org/) to handle javascript compilation and minification. These choices are based on the same libraries and npm commands used in Bootstrap. In addition, it comes with [BrowserSync](http://browsersync.io) to handle live reloading while you develop. |
| 26 | +## Basic Features |
40 | 27 |
|
41 | | -### Confused by All the CSS, SCSS, and SASS Files? |
| 28 | +- Combines Underscore’s PHP/JS files and Bootstrap’s HTML/CSS/JS. |
| 29 | +- Comes with Bootstrap v5 Sass source files and additional .scss files. Nicely sorted and ready to add your own variables and customize the Bootstrap variables. |
| 30 | +- Uses sass and postCSS to handle compiling all of the styles into one style sheet. The theme also includes rollup.js to handle javascript compilation and minification. |
| 31 | +- Uses a single minified CSS file for all the basic stuff. |
| 32 | +- [Font Awesome](http://fortawesome.github.io/Font-Awesome/) integration (v4.7.0) |
| 33 | +- Jetpack ready |
| 34 | +- WooCommerce support |
| 35 | +- Contact Form 7 support |
| 36 | +- Translation ready |
42 | 37 |
|
43 | | -Some basics about the files that come with Understrap: |
44 | | -- The theme itself uses the `/style.css` file only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles. |
45 | | -- The `/css/child-theme.css` and its minified little brother `/css/child-theme.min.css` file(s) provides all styles. It is composed of different SCSS sets and one variable file, all imported at `/src/sass/child-theme.scss` |
46 | | -- Your design goes into: `/src/sass/child-theme`. |
47 | | - - Override Bootstrap by adding your variables to the `/src/sass/theme/_child_theme_variables.scss` |
48 | | - - Add your custom styles to the `/src/sass/theme/_child_theme.scss` file |
49 | | - - Or add other .scss files into it and `@import` it into `/src/sass/theme/_child_theme.scss`. |
| 38 | +## Understrap Academy |
50 | 39 |
|
51 | | -The same goes for Javascript. Just add your javascript to `/src/js/custom-javascript.js` and let rollup.js handle the rest. |
| 40 | +[Become an Understrap Expert.](https://www.understrapacademy.com) Presented by the team behind the Understrap Theme Framework, Understrap Academy is a collection of online courses that will help you speed up your development process, make your projects more profitable, and become an Understrap expert in record time. |
52 | 41 |
|
53 | | -### Installing Dependencies |
54 | | -- Make sure you have installed Node.js and BrowserSync on your computer globally |
55 | | -- Open your terminal and browse to the location of your Understrap copy |
56 | | -- Run: `$ npm install` |
| 42 | +## Bootstrap 5 (and Bootstrap 4) Support |
57 | 43 |
|
58 | | -### Running |
59 | | -To work and compile your Sass files on the fly start: |
| 44 | +This child theme uses Bootstrap 5 and requires [Understrap Parent Theme 1.1](https://wordpress.org/themes/understrap) or greater for best functionality. It does not create JS or CSS files that work with Bootstrap 4 markup. In fact, in the `functions.php` file, this child theme overrides the parent theme's customizer settings. |
60 | 45 |
|
61 | | -```bash |
62 | | -npm run watch |
63 | | -``` |
64 | | - |
65 | | -Or, to run with BrowserSync: |
66 | | - |
67 | | -First change the browser-sync options to reflect your environment in the file `/build/browser-sync.config.js` in the beginning of the file: |
68 | | -```javascript |
69 | | -module.exports = { |
70 | | - "proxy": "localhost/", |
71 | | - "notify": false, |
72 | | - "files": ["./css/*.min.css", "./js/*.min.js", "./**/*.php"] |
73 | | -}; |
74 | | -``` |
75 | | - |
76 | | -then run: |
77 | | - |
78 | | -```bash |
79 | | -npm run watch-bs |
80 | | -``` |
| 46 | +If you want to build a child theme with Bootstrap 4, please use [the 1.0.1 child theme release](https://github.com/understrap/understrap-child/releases/tag/v1.0.1) as it was the last version built to support Bootstrap 4. |
81 | 47 |
|
| 48 | +## License |
82 | 49 |
|
83 | | -## Bootstrap 4 Support |
| 50 | +Copyright 2022 [Howard Development & Consulting, LLC](https://howarddc.com). |
| 51 | +Understrap is distributed under the terms of the GNU GPL version 2 |
84 | 52 |
|
85 | | -This child theme uses Bootstrap 5 and requires Understrap Parent Theme 1.1 or greater for best functionality. It does not create JS or CSS files that work with Bootstrap 4 markup. In fact, in the `functions.php` file, this child theme overrides the parent theme's customizer settings. |
| 53 | +http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html |
86 | 54 |
|
87 | | -If you want to build a child theme with Bootstrap 4, please use [the 1.0.1 child theme release](https://github.com/understrap/understrap-child/releases/tag/v1.0.1) as it was the last version built to support Bootstrap 4. |
| 55 | +## Credits |
| 56 | +- Font Awesome: https://fontawesome.com/v4.7/license/ (Font: SIL OFL 1.1, (S)CSS: MIT) |
| 57 | +- Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (MIT) |
| 58 | +- WP Bootstrap Navwalker by Edward McIntyre & William Patton: https://github.com/wp-bootstrap/wp-bootstrap-navwalker (GNU GPLv3) |
0 commit comments