Implement Front Street - Githubissues

Notes for merging Front Street into Jump Start:

When settings up gulp task to merge stylesheets, frontstreet.css should come first and frontstreet-colors.css should come after all WordPress theme styles.
General background color for boxed content style should use $clr-lightest (#f8f8f8) for consistency.
Icon Lists: Need to add class "list-icon" everywhere there is "tb-icon-list". Can remove all styling from themeblvd.css.
Close Icons:
- Find "close-search" icon and add classes "fs-close close-md close-light", and re-asses styling added. Check floating search in browser.
Responsive Utilities: Need to adjust themeblvd_responsive_visibility_class() function. Classes are now shifted from hidden-sm and up. Need to update table in dev.themeblvd.com article on responsive utilities.
Responsive Breakpoints: Will need to adjust the Viewport Ranges table and bootstrap references at http://dev.themeblvd.com/tutorial/responsive-design/
"highlight" color in framework is now "secondary" color.
New button colors. Need to update shortcode docs. Need to update color choices in layout builder and theme.
Subtitles: Use filter subtitle_markup of Subtitles plugin to adjust to use <small> instead of span to match Front Street styling.
In theme, markup for entry-meta should get <small> tag and "text-muted" class to minimize styling.
On columns elements, use row-flush-start and row-flush-end classes instead of inline margins.
Test full screen quote post and with aligning quote to left/right from content’s shortcode. HTML markup has been simplified slightly. Can probably do less CSS hacks in themeblvd.css for epic thumb quote.
Search theme for instances of class "pagination" and eliminate a DIV by adding class to btn-group div.
In hero unit when set of button is outputted, if more than one button, transform to justified button group. "btn-group btn-group-justified"
Search for any instances of "ban-group" and remove "clearfix" class.
Add role="button" to themeblvd_button().
Change all button color classes in themeblvd_button() to be prefixed with "btn-", i.e. .btn-blue, .btn-red, etc. Also when color class is passed in, convert all underscores to dashes, i.e. "dark_blue" becomes "dark-blue".
In themeblvd_colors() function, change $bootstrap variables to say $contextual. Update list to have all current colors. Don’t forget "light" color which will match default button style, but helpful since some theme bases allow altering default button color.
When listing button colors in layout builder and shortcode generator, also list transparent choices.
WooCommerce sorting should be replaced with Front Street’s <select>. No more Bootstrap dropdown. Also instead of btn-sm on each button, we should use btn-group-sm on the wrapping group. It will need to be a <select> next to a ban-group wrapping buttons. <select> will need to be given a width, as it will be 100% by default.
Styling for .button isn’t included in Front Street; so make sure to add .button styling specifically for WooCommerce.
Look at any "hamburger" instances in theme. Now wrapping link must have class "menu-toggle". Inner markup has changed to <span class="hamburger"><span></span></span>. When implementing GitHub issue #262, will either have <span class="sr-only">Menu</span> or <span class="text">Menu</span> following hamburger span.
Menus
- Menus with dropdowns need class "fs-menu" on the <ul>. Delete superfish styling and JS. Any "sf-" classes using in styling or menu walkers need to be changed to "fs-" * i.e. for front street. Consider keeping sf-menu classes in HTML output for styling backwards compatibility.
- Main menu on dev, superuser, and executive bases: Can we just implement class "navbar" to get front street navbar element and eliminate some styling from theme.css? This would probably also allow us to eliminate some extra overriding styles from agent and entrepreneur bases.
- Main menu for entrepreneur and agent bases should be converted to flexbox. Consider #258 for styling menu items and their button sizes.
- Search for any manual uses of sfHover - like JavaScript for sticky header, for example.
- Check for anything relating to .sf-sub-indicator.
Add typography options for buttons. Should be bolder, by default, instead of inheriting default font.
Look at button theme options for Super User, Entr, and Executive bases. Consider simplifying this like in Agent base and making a shared option section (like footer options, typo options, etc). Note that buttons in Front Street do have a 2px transparent border by default always. So maybe buttons can have a selection for 1. background color, 2. border color. But no more border width or border radius options.
Redo mobile menu completely. Let’s do it like Greenlight, where the menu is not duplicated with JavaScript. Maybe we can add mobile options to include things like header text, search bar, social icons, etc, below the menu when it goes mobile. New Jump Start mobile menu will need to open below header. It should have filterable classes on all elements to determine what viewports menu collapses and it hides/shows along with other inner elements.
Incorporate new .mobile-navbar element for js-generated mobile menu. Make sure background color of menu and inner ul’s match panel color. Also make sure text-dark or text-light is added. A new approach to this could be to output the opening and closing <ul></ul> for the main menu and then add inner list items via JavaScript. This way, we can print starting structure and text color classes right there. In themeblvd.js mobile menu needs to be binned with FrontStreetMobileMenu(), and need to pass in direction ltr or rtl as parameters.
Use "heading-underline" class consistently on all header element markup currently getting the underline. On various elements, this may require filtering from base files. If not possible, can make new filters so it is? Make sure to adjust user-generated styles in superuser, entrepreneur, and executive.
Create javascript local "fsConfig" that goes with including frontstreet.js. When generating output of javascript local, make various elements filterable, or accessible from themeblvd config array. Everything will be true.
Tab deep-linking: Remove themeblvd_tabs_deep_linking filter from JavaScript locals. Instead, use filter to add CSS class tabs-deep-link to .fs-tabs element.
For framework RTL stylesheet re-float main layout columns left, because Front Street will be floating RTL columns right.
Remove Jump Menu code from themeblvd.js. Now in frontstreet.js.
Breadcrumbs components needs class "fs-breadcrumbs" — consider keeping class "breadcrumb" on <ul> for backwards compatibility.
Create new widget and element in layout builder for sub menus. Use menu-bar and submenu-* elements. Allow selection between vertical or horizontal. Allow selection of Menu Bar, Submenu Bar, Submenu Tabs, or Submenu Pills. Allow selection from framework background colors and light/dark text. Only if "horizontal" is selected, add class "fs-menu" to enable fly-outs. Color selection can only be possible if "Menu Bar" or "Submenu Bar" style is selected. (might be a good excuse for widgets plugin to add JavaScript file to admin that we can use with more widget options later)
Transform framework filtering menu into just using submenu-pills.
Add general branding options for user to select "Primary" and "Secondary" branding colors. And on themes/bases where there’s no Button color options on theme options, let’s add a checkbox in this branding section that says something like "Apply branding colors to default buttons". Note that new highlight color is the secondary color, which is now the Jump Start blue and no longer the Theme Blvd yellow. This should somehow tie into pulling shared options set up in #342.
Need to reassess any dynamic "primary" color code. Do a thorough search through front street for "primary." Need all instances of primary classes and anything pulling from branding of $clr-branding map. Same goes with secondary branding color (but used less).
Add class "fs-tabs" to tabs element. Leave "tb-tabs" for WP framework continuity. Also need to add class "tabs-framed" along with already used "tb-tabs-framed". Add selection for "submenu-bar" style navigation, maybe with color selection? "fixed-height" class needs to be changed to tabs-fixed-height, now in Front Street.
For toggle elements, completely re-do HTML. Also for element and shortcode, add option to select title styling * h1, h2, h3, h4, h5, h6, heading-sm, heading-xs, heading-xxs, heading-xxxs, heading-lg, heading-xl, heading-xxl, or heading-xxxl.
Incorporate new modal markup. Effects Gnar, Denali, and Agent lang switcher. Effects WooCommerce floating shopping cart. Will still use modal-sm for those two. Also make sure to update shortcodes plugin, accounting for older versions of theme. In shortcodes plugin, remove "animate" option.
Adjust searchform.php to use .field-icon markup. Make note of top-level template change in changelog.
Password form: I already added field-group markup to the password form on password-protected pages using filter the_password_form. Just double check the markup is still correct, to account for any possible changes to Front Street form groups since then. And the temporary/experimental styles for form groups copied from Front Street to themeblvd.css can now be removed.
Lightbox stuff
- Add second js local to frontstreet.js "fsModal" using lightbox theme options.
  - Note: If WP doesn't allow a second local array to one js file, then add to magnific popup js file.
  - All js locals can be moved here except "magnific_popup" local.
  - Make sure new locals array has all items without being prefixed by "lightbox_".
  - In js locals output, change mobile_gallery to mobileGallery, and mobile_iframe to mobileIframe.
- In theme options add additional "slide" animation to select. Implement.
- [popup] shortcode - remove option for animation.
- Use new classes for linking to lightbox - .fs-modal-link-*. Do search in theme for "themeblvd-lightbox".
- Search theme for "themeblvd-gallery" and change to "fs-modal-gallery".
- Use wp filter "gallery_style" to add in "fs-modal-gallery" class to markup of WP gallery.
- Need to have javascript file that gets compiled BEFORE modal.js of Front Street which sets up WP gallery markup in a way modal.js is expecting. It will look for class "fs-modal-gallery" because we’ve filtered it into the HTML markup.
Grids:
- Check any elements styling .col within them.
- Search theme directory for instances of "col". Columns all must have "col" class.
- In columns element, adjust info printed to user for column stacking as viewports have changed a bit.
- All columns output must be adjusted to have .wrap element directly inside .col.
- User-added padding must then get added to that inner .wrap DIV instead of top-level column div.
- Add a checkbox to columns element that disables gutters. Will add class "no-gutters" to row.
- For sidebar layouts, get rid of push/pull classes; for any sidebar to go before content, simply add class "col-order-{breakpoint}-first". And yes, on double left sidebar layout when adding *-first to both sidebars, this should keep the left sidebar coming before the right.
Widgets:
- All theme bases should support selecting three widget styles: default, panel-classic, panel-modern. Remove widget styling from outer base, standardize in theme/frontstreeet styles. Apply appropriate classes by filtering "themeblvd_default_sidebar_args" and "themeblvd_custom_sidebar_args" - these should be standardized styles, part of the new "Content" bases, separate from outer bases.
- Default style should have checkbox to enable heading-underline or not. Apply by filtering in class, and remove generic widget-title styling for this.
- "Bootstrap Panel" needs to become "Classic Panel". Change default value for title size option to 16px. Remove "Widget Title Text Shadow" option. Under "Panel Style" add new library colors; when custom is selected, change gradient option to single color. Add checkbox for including border; with "custom style" selected write in border color option description that it only applies if checkbox is selected.
- With "Modern Panel" widget, if new "open" content base is selected, filter on class "over-bg-content" to the widget.
- ~~For altering widget markup based on user options, use new filter shared across theme and widget area plugin, themeblvd_shared_sidebar_args.~~ That filter will not account for the current location; use new themeblvd_sidebar_args instead.
Remove drop cap shortcode.
[label] shortcode needs to use CSS classes like instead of "label label-warning" use "label-inline warning".
Responsive embeds: Use new markup on current filters. Only need one DIV with class "fs-embed widescreen".
New loader icon.
- Now .fs-loader instead of .tb-loader.
- Need adjust function that outputs loader for markup.
- Need to change any JavaScript references to .tb-loader to .fs-loader
- Note: Other than name and simplifying markup, should work all the same. JavaScript still needs to use $.fadOut().
Captions: In themeblvd_img_caption_shortcode() remove addition of "thumbnail" class and add "fs-caption" class along with "caption-text" to "wp-caption-text".
All "tb-thumb-link" instances need to become "fs-thumb-link".
- Where "image" is manually used with that class, it needs to be come "fa-enlarge". Check themeblvd_is_lightbox_url().
- All thumbnail classes now reference direct fa-* icon. Make this filterable somehow in themeblvd_link_to_lightbox().
- Remove option "Add frame around the image." and instances of "thumbnail" class throughout theme.
Sliders:
- Combine two simple slider elements into one element. Need to convert in update script.
- Add option for fade animation on simple slider
- Convert old options into new data attributes in markup: <div class="fs-simple-slider" data-speed="500" data-autoplay="3000" data-pause="true" data-loop="false">
- When dark text checkbox is selected, should add the class "text-dark" instead of "dark-text".
- Add class "carousel-heading" to <h3> in carousel-caption.
- If ever passing mini arrows, add class "slider-mini" to the .fs-simple-slider element. Will go with $class .= ' nav-arrows-'.$args['arrows’]; in themeblvd_get_simple_slider().
- Class tb-gallery-carousel needs to be fs-gallery-slider.
Testimonials:
- New HTML markup.
- Instead of standard and showcase styles, now we have sm, md, lg.
- Sm and Md testimonial styles MUST have a background color class on testimonial-text element. Class bg-light can be default. Can we maybe add this an option to layout builder element and shortcode?
- Note that the testimonial slider is not a part of Front Street.
Play button
- .tb-play class still needs to work for backwards-compat. Map it to .fs-play.play-light.
Dividers:
- Simplify and remove options. See new simplified markup.
- Select between preset colors or pick custom color.
- Selection of thickness.
- No more style options.
- Front Street doesn’t have divider with icon… so if we want to keep that we’ll have to style it in theme... which I believe is the case already, any way.
Layout Builder:
- Incorporate classes "fs-section" and "fs-element"
- New markup and classes for background parts. See background.html.
Background / Sections
- When section has background slider, parallax, or video, add .fs-loader.
- New markup for background shade.
- New markup for background slider.
- New markup for parallax image. Should no longer contain .fs-loader (because it’ll be in section).
Scroll To:
- Remove code for "scroll_to_section_offset" … Check if other themes are filtering this. We can do it with CSS tricks instead, by adding empty space above sections instead of modifying JavaScript.
- On scroll to next section elements, instead of just linking to no element, add data-next="fs-section" to link. (JavaScript is untested, make sure it works)

themeblvd / jumpstart

Implement Front Street #264

Notes for merging Front Street into Jump Start: