Interested in Bootstrap 5? Then go for https://awesomeopensource.com/project/SimonPadbury/b5st
b4st is a simple, Gutenberg-compatible WordPress starter theme loaded with Bootstrap 4 and Font Awesome 5 — using Gulp for preprocessing its SCSS into CSS.
UNLICENCE (open source).
Simple, intuitive, clean code. Theme CSS and JS, functions and loops are organized into different folders.
A starter CSS theme –
/theme/css/b4st.css, enqueued. (Note: do not put your styles in
styles.css, because that is not enqueued.)
b4st.css is generated from SCSS using Gulp and NodeJS packages. The SCSS files are also included.
Sass (actually, SCSS) preprocessed to
b4st.css by Gulp (or you can do your own thing).
A starter JS script –
Dimox breadcrumbs (http://dimox.net/wordpress-breadcrumbs-without-a-plugin/).
A CSS lock gradually enlarges the typographic font sizes from base 16px to 20px for larger viewports. This affects headers, paragraphs, lists, tables, etc. but not buttons and forms.
Served from CDN’s:
Optional (install these if you want to Gulp-Sass for preprocessing the SCSS files):
Bootstrap navbar with WordPress menu and search.
Bootstrap customized comments and feedback response form.
Gutenberg editor stylesheet – into which has been copy-pasted the typography styles from Bootstrap 4’s Reboot CSS (see http://getbootstrap.com/docs/4.3.1/content/reboot/).
Since v.3.0, b4st (this theme) has adopted a narrow single-column layout, so that it can make use of Gutenberg’s extra-wide and full width blocks. In the front-end CSS, these are handled by a variation on Andy Bell’s full bleed utility.
b4st was not originally designed for child theming — it is a starter theme modifying directly. Most people still use it that way. But as child theme-friendliness has been asked for, here it is:
Many functions are pluggable.
Also, the navbar brand, navbar search form and sub-footer “bottomline” are inserted using pluggable hooks. So, a child theme can override these.
Documentation on b4st theme hooks can be found in the wiki.
Since v.3.0, in the
theme/ folder there is a
scss/ folder containing all the SCSS files that have been used to create the file
You can (beautify and) edit that file directly — or you can preprocess the SCSS files using whatever you prefer to use.
In order to use Gulp, you need to:
npm install --global gulp-cli
package-lock.json. Therefore what you need next are the Node packages. To get these, you need to
cdto the b4st theme’s root folder and do an
npm installin your terminal:
node_modules/installed as local dev dependencies (as you can see from the 'package.json` these are: autoprefixer, cssnano, gulp, gulp-postcss, gulp-sass, and gulp-sourcemaps), you should simply be able to run gulp by typing this in your terminal:
You can stop Gulp by typing
ctrl+C (hold the control key down and press the c key).
See the LOG.md
See the b4st Wiki.