OBE:BS4 v0.8.x

OBE:BS4 v0.8.x

Updates to the OBE:BS4 Web Design System v0.8.x

v0.8.0

This version included updating the OBE:BS4 Web Design System to the newest Bootstrap, Popper.js, and various dev-related dependencies needing minimum version requirements to improve the security for devs using the system.

• Updated bootstrap from v4.3.1 to v4.4.1
• Updated popper.js from v1.15.0 to v1.16.0
• Updated to mixin-deep v1.3.2 per GitHub security warning
• Updated to set-value v2.0.1 per GitHub security warning
• Updated to lodash v4.17.12 per GitHub security warning
• Updated to lodash.template v4.5.0 per GitHub security warning
• Updated to lodash.mergewith v4.6.20 per GitHub security warning

And these were the command line commands that were run for v0.8.0:

Updated Bootstrap:

                            
                                npm install bootstrap@latest --save
                            
                        

Updated Popper.js:

                            
                                npm install popper.js@latest --save
                            
                        

Updated mixin-deep:

                            
                                npm install mixin-deep@1.3.2 --save-dev
                            
                        

Updated set-value:

                            
                                npm install set-value@2.0.1 --save-dev
                            
                        

Updated lodash:

                            
                                npm install lodash@4.17.12 --save-dev
                            
                        

Updated lodash.template:

                            
                                npm install lodash.template@4.5.0 --save-dev
                            
                        

Updated lodash.mergewith:

                            
                                npm install lodash.mergewith@4.6.2 --save-dev
                            
                        

v0.8.1

This version updates the system to FontAwesome v5.12.0, and removed all presets/url features (both markup and scripts were commented out) on the settings page.

Updated FontAwesome Version (package.json):

                            
                                "faversion": "5.12.0"
                            
                        

v0.8.2

This version updates the system and example gulpfiles with new bundles and plugin files that are now generated for different use cases in projects.

This is how the new files breakdown for real world use scenarios:

Generated CSS Files:

obebs4.library.bundle.css (and .map file)

This file is meant to be the CSS file for the Web Design System library site files themselves. This file includes all of the resources used in the system (Bootstrap 4 CSS, Prism.js CSS, DataTables.js BS4 CSS, and any OBE:BS4 library page/navigaiton CSS.

obebs4.plugins.bundle.css (and .map file)

This file contains only the CSS file for the Web Design System 3rd party plugins themselves. This file includes all of the Prism.js CSS, DataTables.js BS4 CSS, and any OBE:BS4 library page/navigaiton CSS.

obebs4.production.bundle.css (and .map file)

This file contains only the OBE:BS4 WDS CSS file for use in production projects.

obebs4.wds.bundle.css (and .map file)

This file is identical to the obebs4.production.bundle.css file, and contains only the OBE:BS4 WDS CSS file for use in production projects. This file is meant to be paired with the obebs4.wds.bundle.js file and is simple named with the pattern the .js file.

bootstrap4.datatables.min.css

This file contains only the CSS needed when using dataTables in a project.

prism.css

This file contains only the CSS needed when using prism.js in a project.

Generated JS Files:

obebs4.library.bundle.js (and .map file)

This file is meant to be the JS file for the Web Design System library site files themselves. This file includes all of the resources used in the system (jQuery, Bootstrap 4 JS, OBE:BS4 JS, Prism.js, DataTables.js (BS4), tinyColor2.js, and any OBE:BS4 library page/navigaiton JS.

obebs4.plugins.bundle.js (and .map file)

This file contains only the JS file for the Web Design System 3rd party plugins themselves. This file includes all of Prism.js, DataTables.js (BS4), tinyColor2.js, and any OBE:BS4 library page/navigaiton JS.

obebs4.production.bundle.js (and .map file)

This file contains only the OBE:BS4 WDS JS file for use in production projects. It includes jQuery, Bootstrap 4 JS, and all of the OBE:BS4 JS scripts.

obebs4.wds.bundle.js (and .map file)

This file is intended to be an alternate file to use instead of the obebs4.production.bundle.js file, because this file is just like that file... minus the jQuery code! This file is ideal to use the OBE:BS4 Web Design System in an existing CMS project where jQuery is already loaded on the page.

bootstrap4.datatables.min.js

This file contains only the JS needed to use dataTables in a project.

prism.min.js

This file contains only the JS needed to use prism in a project.

tinycolor-min.js

This file contains only the JS needed to use tinyColor2 in a project.

v0.8.3 & v0.8.4

These two updates added some of the goodies from recent Bootstrap 4 updates into the library's examples.

Additionally, some annoying warnings that display in the console when generating OBE:BS4 library pages and files were fixed. (IE new .scss files were made and bring the depreciated BS4 macros bg-variant() and text-emphasis-variant() into the OBE:BS4 system moving forward!)

New in the Border: Utilities section:

• Added .rounded-sm example
• Added .rounded example
• Added .rounded-lg example

New in the Form: Elements section:

• Added New Custom Switches (a custom checkbox variant using a .custom-switch class) example

SASS Files Updated:

• Added new _obebs4-background.scss file
• Added new _obebs4-background-varients.scss file
• Created new SASS mixin: obebs4-bg-variant()
• Added obebs4-bg-variant-variant() to _obebs4-text-varients.scss
• Updated bg-variant() to obebs4-bg-variant() in _obebs4-background.scss file
• Added new _obebs4-text.scss file
• Added new _obebs4-text-varients.scss file
• Created new SASS mixin: obebs4-text-emphasis-variant()
• Added obebs4-text-emphasis-variant() to _obebs4-text-varients.scss
• Updated text-emphasis-variant() to obebs4-text-emphasis-variant() in _obebs4-text.scss file
• Added _obebs4-text-varients.scss and _obebs4-background-varients.scss to _obebs4-text.scss file

Updated caniuse-lite:

                            
                                npm install caniuse-lite@latest --save-dev
                            
                        

v0.8.5

This update added in a bunch of new goodies from recent Bootstrap 4 updates into the library's examples.

New in the Inline Text: Classes section:

• Added .text-break example
• Added .font-weight-lighter example
• Added .font-weight-bolder example
• Added .text-decoration-none example

New in the Modal: Elements section:

• Added .modal-xl example
• Added .modal-dialog-scrollable example

v0.8.6

This update added in a bunch of new layout options and spinners from recent Bootstrap 4 updates.

New Library Sections:

• Added New Row Columns section
• Added New Row Columns classes reference table
• Added New Responsive Containers section
• Added New Responsive Containers classes reference table
• Added New Spinners section

New Spinners Section Includes:

• Basic Spinners
• Spinner Colors
• Spinner Buttons

Library Files Updates:

• Added _bs_responsive_container_layouts.njk section file
• Added _bs_row_column_layouts.njk section file
• Included the new files in layouts.njk
• Updated index numbers in _bs_card_groups.njk and _bs_heroes.njk due to index shift
• Added _bs_spinners.njk section file
• Included the new spinner file in defaults.njk
• Updated global_strings.json with data for new sections

v0.8.7

This update added in even more new stuff from recent Bootstrap 4 updates.

Library Content Updates:

• Added new Column Break example to the defaults page
• Added negative margins to margins and padding reference table
• Added a reference table for list group horizontal classes

Reference Table Headings Updates:

• The left-most reference headings macro now uses the term Extra Small.
• The right-most reference headings macro now uses the term Extra Large.

Library Files Updates:

• Added _table_row_columns.njk section file
• Added _table_responsive_containers.njk section file
• Added _table_list_group_horizontal.njk section file
• Included the new files in reference.njk
• Added a row_columns_classes() macro

v0.8.8

This update did some system house cleaning and added a little bit of stuff from recent Bootstrap 4 updates.

Library Content Updates:

• Added examples of negtive margins to the defaults page
• Moved text-break example to utilities section

Library Updates:

• Alphabetized the macros in _global_macros.njk
• Created a new macro for buttons: button_sizes()

Library Files with macros moved to the system _global_macros.njk file:

• _bs_utilities_spacing.njk
• _alert_colors.njk
• _badge_colors.njk
• _bg_basic.njk
• _bg_gradients_1.njk
• _bg_gradients_2.njk
• _bg_gradients_3.njk
• _bg_gradients_4.njk
• _bg_gradients_5.njk
• _bg_gradients_6.njk
• _bg_gradients_7.njk
• _bg_gradients_8.njk
• _bg_varients.njk
• _border_colors.njk
• _border_varients.njk
• _button_colors.njk
• _button_disabled_colors.njk
• _card_colors.njk
• _card_outline_colors.njk
• _form_colors.njk
• _list_group_colors.njk
• _modal_colors.njk
• _navbar_colors.njk
• _progress_bars_colors.njk
• _table_colors.njk
• _text_link_colors.njk
• _text_tint_shade_colors.njk
• _tooltip_dropdown_popover_colors.njk
• _bs_badges.njk
• _bs_button_groups_toolbars.njk
• _bs_display_lead_abbr_defaults.njk
• _bs_dropdowns.njk
• _bs_forms.njk
• _bs_headline_defaults.njk
• _bs_justifiy_blockquotes.njk
• _bs_navs.njk
• _bs_spinners.njk
• _bs_utilities_embed.njk
• _bs_utilities_flex.njk
• _bs_utilities_sizing.njk
• _button_text_sizes.njk
• _element_shadows.njk
• _element_sizes.njk
• _fab_buttons.njk
• _fonts.njk
• _lists.njk
• _material_design_forms.njk
• _modal_utilities.njk
• _off_canvas_navigaiton_modals.njk
• _opacity_utilities.njk
• _icon_animated_checkboxes.njk
• _icon_animations.njk
• _icon_floats_widths_bullets.njk
• _icon_lists.njk
• _icon_masking.njk
• _icon_orientation.njk
• _icon_positioning_transforms.njk
• _icon_rotate_flip_transforms.njk
• _icon_shrink_grow_transforms.njk
• _icon_sizes_and_borders.njk
• _icon_stacks.njk
• _color_codes_table.njk
• _settings_generator.njk

v0.8.9

This update did some system house cleaning and added a little bit of stuff from recent Bootstrap 4 updates.

Library Content Updates:

• Added examples of responsive horizontal list groups to the defaults page
• Added a few examples of different toasts configurations
• Added some color variations on the colors page
• Added some reference table for responsive column classes

Library Updates:

• Created a new _table_columns.njk file
• Included _table_columns.njk in reference.njk file
• Created a new _bs_toasts.njk file
• Included _bs_toasts.njk in defaults.njk file
• Created a new macro: columns_single_classes()
• Created a new macro: columns_responsive_classes()
• Created a new macro: list_group_responsive()
• Created a new _bs_toasts.njk file
• Included _bs_toasts.njk in defaults.njk file
• Created a new obebs4-toasts.js file
• Created a new _toast_colors.njk file
• Included _toast_colors.njk in colors.njk file

v0.8.10

This update did some more system house cleaning and added new library content from recent Bootstrap 4 updates.

Library Content Updates:

• Added examples of stretched link components to the defaults page
• Added warnings and tips pertaining to stretched links in their section
• Added new Bootstrap defaults checkbox options to settings page

Library Updates:

• Updated the list_group_responsive() macro
• Created a new _bs_stretched_links.njk file
• System gulpfile.js and example-gulpfile.js files were updated to include data processing needed to set settings page checkboxes according to data that's listed in a project's obebs4_settings.json file.
• Fixed bugs in the system handling of all settings with checkboxes on the settings page (including updates to the obebs4_settings.json file).
• Updated the GitHub project readme.md file.

v0.8.11

This tiny update was all about making better directions for updating OBE:BS4 versions in existing projects (via the OBE:BS4 project's readme.md file!).

v0.8.12

This update did some more house cleaning, and started the long journey of including core Bootstrap SASS settings into the settings tool.

Library Content Updates:

• Removed buttons on link-related settings cards on the settings page to expose the hidden form elements by default
• Created the beginning of many BS core settings inputs on settings page

Library Updates:

• Updated the obe-text-toggle-vanilla-mini-plugin.js) file
• Wrapped the obe-text-toggle-vanilla-mini-plugin.js) file code in a vanilla JS document ready function
• Created a new settings_text_input() macro
• Extended the settings page settings_number_step_input() macro so it now needs data for units, min, max, & increment
• Updated all instances of the settings_number_step_input() with data for units, min, max, & increment
• Extended increment up and down scripts to include an increment behavior
• Added note option to settings_number_step_input() macro
• Added note option to settings_text_input() macro

v0.8.13

This update focused on getting the system and settings tool ready for future Bootstrap settings options. So a ton of commented out placeholders were added to the markup of the settings page. Over time, each setting or group of settings will be brought into the settings tool for complete control of your OBE:BS4 and Bootstrap 4 SASS.

Library Content Updates:

• Added more core Bootstrap settings options to the settings page/tool

Library Updates:

• Moved over all Bootstrap SASS vars to settings_generator.njk as comments/placeholders
• Fixed increment up/down bugs where float number increments were messing up add/subtract functionality
• Cleaned up headings for new core settings
• dded "sass" property to global_strings.json
• Extended increment up and down scripts to include an increment behavior
• Got all of the new core settings full integrated into the system core settings working impacted: obebs4_settings.json, global_strings.json, settings.njk & _settings_generator.njk
• Fixed bug in settings.njk js - where global_strings calls needed to be wrapped in double quotes and nunjucks double curly braces to pass the data from Nunjucks to a JavaScript script.

v0.8.14

This tiny update focused on cleaning up recently integrated SASS settings that were commented out placeholders on the settings page. Also the project readme.md file was updated to help developers deal with the settings changes.

v0.8.15, v0.8.16, v0.8.17

While working with the library on a single page that had to be added to a WordPress site showed up a nasty bug. Basically, because WordPress uses jQuery itself, and since jQuery has become a bit of a target of ridicule by the newest generation of front end devs, WordPress decouples the $ symbol so other JavaScript libraryies can use it without conflicts.

Sadly even after creating the obebs4.wds.bundle.js file option (containing all of the CSS and JS for OBE:BS4, but without any jQuery packed in), didn't solve the problems the OBE:BS4 page was having in WordPress. Because when usingn the wds js file, there was no jQuery available for the OBE:BS4 code!

Enter a very specific variation of the jQuery document ready pattern. Using the example below, this variation leverages the jQuery namespace and then passes the dollar sign as a reference to allow the code inside access to a decoupled jQuery $ symbol! Whew! Here's the key code:

Updated Document Ready (WP Safe):

                            
                                jQuery(document).ready(function($) {
                                    
                                    // your code here

                                });
                            
                        

In the end, v0.8.15, v0.8.16, v0.8.17 were all quick iterations. All core system js file scropts wrapped with $(function() {}); calls were changed to jQuery(document).ready(function($) {}); calls project wide (Excluding the obeDatePicker plugin which threw an error in WordPress if wrapped in the jQuery function instead of the shorthand version.

Library File Document Ready Updates v0.8.15, v0.8.16, v0.8.17:

• obebs4-dataTables.js
• obebs4-dropdown-select-plugin.js
• obebs4-library.js
• obebs4-popovers.js
• obebs4-toasts.js
• obebs4-tooltips.js

v0.8.18

This tiny update focused on adding more BS4 SASS settings to the system.

Contextual color ID's (Added to gulpfile.js and example-gulpfile.js):

• yiq-text-dark
• yiq-text-light
• headings-color

System Files Updates:

• Updated macro settings_contextual_selects() to include null values
• Updated macro setColorsData() to include null values
• Updated color/tint/shade data ingest function in gulpfile.js and example-gulpfile.js
• Cleaned up _settings_generator.njk file

v0.8.19

This update was focused on adding more editable BS4 SASS settings to the design system. This update, all of the Topography and Tables BS4 SASS variables are now available to customize in the library settings page/tool.

Contextual color ID's (Added to gulpfile.js and example-gulpfile.js):

• text-muted
• blockquote-small-color
• table-head-bg
• table-head-color
• table-dark-color
• table-dark-bg
• border-color

System Files Updates:

• Updated color/tint/shade data ingest function in gulpfile.js and example-gulpfile.js

v0.8.20

This tiny update was done because I totally forgot to add the Font Awesome version number step to the OBE:BS4 installation guide! The readme.md file was also updated with the newest settings added to the system for developers upgrading from prior versions.

v0.8.21

This update focused on cleaning up now old settings page placeholder comments and adding more settings functinoality. All of the Buttons + Forms BS4 SASS variables are now available to customize in the library settings page/tool.

v0.8.22

This update focused on project housekeeping. There was a bit of refactoring done in the settings page JavaScript, and all of the default fallback values for the system in global_strings.json were changed from the key "sass-defaults" to the key "sys" for sake of code brevity.

System Files Updates:

• Converted the obebs4-fa5-animated-checkboxes.js core system plugin file from a jQuery syntax to a vanilla JavaScript sytnax!

v0.8.23

This tiny fixes a tiny but important bug. Now the example code for the (currently) two boilerplate code examples on the boilerplates page - has correctly prefixed file include path strings with "library/" so boilers should now work out of the box!

U P D A T E D P U B L I S H E D