salcode / bootstrap4-genesis Goto Github PK

At this time, the latest version of Bootstrap is v4.1.3

Security Vulnerability in hapijs/hoek, which is a dependency on gulp-sass by way of gulp-sass having a dependency on nodejs/node-gyp.

hapijs/hoek has a patched version and in order to get it in gulp-sass, they are waiting for nodejs/node-gyp to merge the pull request to update hoek

More info on issue

As you can see in this screenshot, we do not have a background color on code blocks (like we did in Bootstrap 3.x).

We should reinstate a background color on code blocks.

It would be nice if the styled code blocks more like this.

Set the CHILD_THEME_ values based on the values defined in the header of style.css

• CHILD_THEME_NAME used in default footer
• CHILD_THEME_URL used in default footer
• CHILD_THEME_VERSION used as ver URL param for style.css when loaded

Related #35

Add Sass/CSS for comments

Refer to original Bootstrap Genesis's comments.scss

By default the Bootstrap 4 blockquotes have very minimal styling and blend in with the content.

See Bootstrap 4 Blockquote Documentation

Default Bootstrap 4 Blockquotes

Example GitHub Blockquote

Something like this, seems like a small change that would significantly improve the blockquote appearance.

This is a GitHub blockquote

Autoprefixer supports .browserslistrc among other methods for specifying what prefixes to use. (see #11 regarding using autoprefixer)

Since Bootstrap 4 includes a .browserslistrc

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

let's use that.

More browser list information at https://github.com/browserslist/browserslist#readme

In the original Bootstrap Genesis, the complied CSS files is at css/style.min.css and we use some hooks to load that CSS file instead of the WordPress default for a theme (style.css). This also allows us to skip including a header at the top of the CSS file as is required by WordPress for the theme to load properly.

We are unable to change (or add to) the class dropdown-menu in our custom nav walker using the nav_menu_submenu_css_class filter.

Along with this, there is a misspelled variable $clas_names.

See includes/bootstrap4-nav-walker.php line 42

esc_attr( $clas_names )

this should be

esc_attr( $class_names )

hi, would love to see off-canvas menu implemented
and make the current menu switchable from the admin

thank you!

See original Bootstrap Genesis Sass wordpress-responsive.scss

Currently package.json has two version fields and two description fields.

This was originally done with the idea of Bootstrap4 Genesis and the child theme that gets built being separate projects with separate version numbers. However, I think this is confusing and since the whole idea of this project is to use it as a starting point and change everything while making your own theme, I think we should remove these duplications.

package.json excerpt

{
  "name": "bootstrap4-genesis",
  "version": "0.1.0",
  "description": "WordPress Genesis Child Theme using Bootstrap 4",
  "config": {
    "theme": {
      "name": "Bootstrap4 Genesis",
      "uri": "https://github.com/salcode/bootstrap4-genesis",
      "author": "Sal Ferrarello",
      "authoruri": "https://salferrarello.com",
      "description": "WordPress Genesis Child Theme using Bootstrap 4",
      "version": "0.1.0",
...

These variables in particular would be helpful in our copy of _variables.scss to set colors we want that are already part of the theme.

In the original bootstrap-genesis a code block with a single long line of text wraps. Currently this project, Bootstrap4 Genesis, creates a scroll bar.

Bootstrap Genesis

Bootstrap4 Genesis

Next Step

Do we want to make the code blocks wrap by default here in Bootstrap4 Genesis?

If we want to make this change, it looks like adding

pre code { white-space: pre-wrap; }

will do the trick.

BrowserSync is without a doubt the hottest choice right now, with LiveReload appearing to be yesterday's news.

Based on this, it certain seems BrowserSync is the better choice.

Currently, the $font-size-base is set to 1rem (the Bootstrap default), which "Assumes the browser default, typically 16px"

I propose increasing this to 1.4rem to make the site more easily readable.

npm ERR! Failed at the [email protected] watch script 'gulp watch'.
npm ERR! This is most likely a problem with the bootstrap4-genesis package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp watch
npm ERR! You can get their info via:
npm ERR! npm owner ls bootstrap4-genesis
npm ERR! There is likely additional logging output above.

Since our .gitignore file is based on this .gitignore file it came with a version number.

Rather than continuing to update this unrelated version number in this file, I think we should remove it.

Since Bootstrap 4 has a specific way of generating markup for the nav, we need a custom nav walker.

I'm not a big fan of the default inline code style in bootstrap.

e.g.

I'd prefer it look more like the inline code styling here in GitHub.

Code block for comparison of inline and block styles

Related #19

See Gutenberg Handbook Responsive Embedded Content.

While we currently Make elements stay within containers by default (#22), it sounds like this code will allow blocks to maintain their aspect ratio.

Definitely worth trying out.

Add gulp-autoprefixer gulp-postcss and autoprefixer

This specifically came up because Safari does not support position: sticky without a vendor prefix.

If you use other PostCSS based tools, like cssnano, you may want to run them together using gulp-postcss instead of gulp-autoprefixer. It will be faster, as the CSS is parsed only once for all PostCSS based tools, including Autoprefixer.

source gulp-autoprefixer documentation

Remove

console.log( 'main.js' );

from js/custom/main.js

Using custom.scss is more inline with the Bootstrap 4 Documentation.

I think it is also worth considering prepending an underscore (_custom.scss) to differentiate this file as the entry point, since we're currently considering putting all of the custom sass files in /sass instead of burying them down another folder level.

(Alternatively, we could move custom.scss up into the root directory, in which case we may want to rename it style.scss)

Here is the recommended Bootstrap4 pagination markup. [source]

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

We can't get this exactly, as a first note, the <ul> in Genesis is hardcoded with no capability to modify (i.e. add a pagination class).

We addressed this in Bootstrap Genesis with

.bsg-pagination-numeric ul {
    @extend .pagination;
}

See Gutenberg Handbook Editor Styles

See

• Why use pump Why use pipeline
• gulp-pump

See Gutenberg Handbook Default Block Styles.

My gut is we do not want to do this, but we should definitely try it out first.

npm build should be npm run build

and

npm watch should be npm run watch

I'd like to add a single file with all of the Genesis theme support calls that we want to support (and probably unused ones present but commented out for ease of use in the future).

Reference: The Comprehensive Guide to Genesis Theme Supports

Document include php files (includes/*.php) are automatically executed on Genesis action hook genesis_setup

Currently, a screen reader would only see Continue reading, we should include the title of the post here as well.

Currently, the Genesis version number is being used for the version number (which results in the URL parameter ?ver= having a value based on Genesis and not being updated when a new version of our child theme is pushed live).

See https://www.billerickson.net/yoast-schema-with-genesis/

I think it is worth adding a check to Bill's code to disable the Genesis schema only when Yoast SEO is present and active.

The default tab-size value of 8 is too large in my code examples. Change to either 4 or 2.

See Gutenberg Handbook Wide Alignment.

See also Full Screen Width Image Inside Container

One solution I've seen that I like is only applying full screen width on single column layouts (i.e. no sidebars)

e.g.

See original Bootstrap Genesis long-nonbreaking-path-name-support.scss

Currently in the original Bootstrap Genesis, we use the /lib directory.

Options:

• /lib
• /functions
• /includes
• other?

The original Bootstrap Genesis (which uses Bootstrap 3.x) uses Grunt as a task runner. What task runner do we want to use here?

• Grunt
• Gulp (Gulp WP Toolkit?)
• Webpack
• other?