fastspot / boilerplate Goto Github PK

Use the aria-current="page" attribute to indicate the current page in
the menu. This technique is particularly useful when the anchor ()
cannot be removed from the HTML.

In the following example the link in the navigation points to the main
content of the page.

Code snippet: HTML

<li>
        <a href="#main" aria-current="page">
        Space Bears

FileError: 'imports/icons.less' wasn't found. Tried - css/src/imports/icons.less,css/src/imports/icons.less,imports/icons.less in css/src/site.less on line 23, column 2:

Looks like we're expecting a default icons less file but it's not included with the boilerplate.

WCAG 2.1 introduced new success criteria. We are going to need to update pa11y at some point. I know they've documented migration but it seems like a big task. I'd like to help you with this but since you are the man who put this plan into action it's going to start with you.

In every BigTree site, I usually add this source file (src/css/tinymce.scss) so it might be worth adding to the boilerplate. Also have to add it to package.json so it gets compiled. Looks like I also added it to Adelphi so it's useful in WordPress as well.

/* ==========================================================================
	Imports
============================================================================= */

@import "../../node_modules/normalize.css/normalize";

@import "base/fonts";
@import "base/setup";
@import "colors";
@import "base/base";

@import "symbols";
@import "mixins";
@import "type";
@import "buttons";
@import "forms";

body#tinymce {
	padding: 20px;

	.typography {
		h1, h2, h3, h4, h5, h6, p {
			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

We need to add core examples of accessible drawers, accordions, tabs, and modals using examples from Dean.

Part of the boiler plate is moving to Modernizr for feature detection. This will allows us to utilize the '.not-feature' classes in our styles, however I don't think we need to include every test they offer. We normally don't need to worry about stuff like box-shadow not being available so I would like some input on what should be included in our custom build.

Sidebar: I was reading that the new version is slated to have a grunt build process where this could be automated on a per-project basis. However until that version is released we need a more generic a custom build, which could then be overwritten if the project requires extra tests.

Right now I plan to include:

-Flexbox
-Flexbox legacy
-multiple backgrounds
-rgba
-css animations
-css columns
-css generated content
-css gradients
-css 2d & 3d transforms
-css transitions
-history api
-html5 audio & video
-svg
-touchevents

Take a look at what is offered (http://modernizr.com/download/) and let me know if you think we need to add/remove anything from this list.

When "header" is true in navigation/main.twig and "title" is present, it draws this markup:

<div class="{{class}}_header">
	<h2 class="{{class}}_title">{{title}}</h2>
</div>

{{class}} doesn't appear to be used in the file, so I'm guessing this should really be main_nav_header and main_nav_title.

Which makes the menu not transition TToTT

I can run gulp trello to generate the components in the styleguide. However, when I go to check in I run gulp build --production and it clears out the static html file.

Shouldn't the handle.twig and search-handle.twig files really be drawing tags rather than tags that aren't really links?

Can we rename the "tel" variable to "phone" in address.twig?

Seems like every site we do has a sticky header and the BigTree admin bar is a known quantity in terms of height, etc. Is there a way to update the CSS of the bar itself OR add something to the boilerplate so that this always works across projects? Flexbox? Grid? Some kind of standard class name we can apply to sticky headers?

Allow fo an offset to be passed into the scrollTo function. This would be useful on sites with fixed/sticky headers. Additionally, we'd want to use an offset with fragment identifiers in the URL of sites with fixed/sticky headers.

Consider using pa11y.

Can we update the pagination.twig file to include left/right arrows and ellipsis for when there are too many shown? Also disabled and selected states. I don't think the twig necessarily needs to reflect real data, so if it's always 5 pages shown or something that's fine.

The code from FKCC looks like it would be fine as boilerplate, though maybe not using "dots" for the modifier but rather something like pagination_ellipsis:

<div class="pagination{% if theme %} theme_{{theme}}{% endif %}">
	<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#previous">Previous</a>
	<span class="pagination_number_link pagination_number_selected">1</span>
	<a class="pagination_number_link" href="#2">2</a>
	<a class="pagination_number_link" href="#3">3</a>
	<a class="pagination_number_link" href="#4">4</a>
	<a class="pagination_number_link" href="#5">5</a>
	<span class="pagination_number_link dots">…</span>
	<a class="pagination_arrow pagination_arrow_right" href="#next">Next</a>
</div>

Nick suggests that remembering to bring in the JS modules file is bad, why not automate?

https://github.com/Fastspot/Boilerplate/blob/master/src/twig/partials/background-video.twig

Since we no longer use Ogg, WebM, or YouTube files, I think it would make sense to drop the "sources" data for just a simpler "video" field which puts the MP4 into the proper background options location.

https://github.com/Fastspot/Boilerplate/blob/master/src/twig/partials/navigation/basic.twig

How often is it that we use basic navigation with different icons on a per link basis? From the CMS perspective I think it would be much easier to pass in the same icon for all the links in a set as a single parameter rather than injecting it into the link in the array.

In js/src/site.js $(document).ready is called rather than jQuery(document).ready -- I think that's the only place we explicitly expect $ to be available as everywhere else we're passing in jQuery as a reference to $.

https://github.com/assetsjs/postcss-assets

Videos will not play in low power mode.