Bonkstrap

Responsive design

Bonkstrap offers a column-based system to organize content. An item in a column layout can specify how many columns to span and in which column to begin, using the classes col-nw for a width of n columns and col-m to have the leftmost end of the item in column m. Columns will wrap around on narrower screens. Nested column systems will automatically tint their backgrounds to help distinguish them. There is also a plain class available to prevent tinting, which may be useful in footers, for example. The number of columns used may be adjusted by overriding the $columns variable as described in the Bonkstrap configuration documentation.

CSS reset

The Meyer reset works to undo all or most of the default styles that browsers apply. This leaves us with a clean slate on which to design everything else. Because changing the contents of the reset could affect how Bonkstrap's styles are interpreted, we treat it as an integral part of the framework and compile it in with the rest of the Sass code, as opposed to linking it separately.

CSS classes

Bonkstrap offers a handful of CSS classes for convenience, including several for responsiveness.

• .{above|below}-{n}[r]em: If the viewport is not above/below n em/rem wide, then hide the element with display: none. For example, there's a line break in the heading of CSS transitions/transforms that is marked with .below-40rem, so the line will only break when the window is narrower than 40rem. These classes are available for multiples of 10 up through 100.
• .[{max|min}-]{width|height}-{n}{em|rem|pct}: Sets the corresponding style rule on the selected element. For example, the image in the demo figure has .max-width-20rem applied to keep it from growing ridiculously large on wider screens. These are available for multiples of 5 up through 50 for em and rem, and up through 100 for percent.
• The classes described in Responsive design allow rapid design of grid-based systems.
• form.easy: Apply simple styles to form elements automatically. This is opt-in so that users may easily choose to design their own forms.
• .well:
  Place content in a Bootstrap-style well.
• .alert:
  • just a regular neutral alert

    here's more content lol, this one has a details/summary as its content
  • .good
  • .warn
  • .bad
• button.thicc: Easy readable buttons

However, the number of classes included is designed to be lower rather than higher. There is no way a framework can accurately predict what every site designer will envision; there will always be some need to tweak what's there, or to write new CSS. Bonkstrap focuses on styling markup simply and without all the Big Class hassle, so that designers can work with their own custom classes with less clutter, or design a simple and elegant site with almost no class fiddling at all.

CSS transitions
/transforms

Bonkstrap is built around the philosophy that good design is simple. In the extreme, adding too many CSS transitions to a page will result in every movement of the mouse causing something to move and grab the user's attention. This is undesirable. There are few places in a hypertext document where it makes sense to catch the user's eye like this. As such, Bonkstrap keeps transitions to a minimum, but does demonstrate one for the purpose of the assignment: the items in the nav menu on the left move out to the side when hovered over. The transition is subtle and quick, and helps the user see where they're about to click rather than distracting them from the content of the page. Information about configuring this transition can be found on the Sass page.

Update: I read the rubric again, and it requires a second transition. Hover here for the other one.

Navigation bars

Bonkstrap styles navigation areas for individual articles and for the whole site. Neither requires any classes; the article navigation area does require an input and a label. Beyond that, as long as the nav tags and their children appear in the expected format, everything should just work. The general structure of a Bonkstrap-compatible navigation area looks like this:

<nav>
	<input type="checkbox" id="article-nav-toggle-Bonkstrap"/>
	<label for="article-nav-toggle-Bonkstrap">Navigate within this article: Bonkstrap</label>
	<ul>
		<li><a href="#Bonkstrap">Bonkstrap</a>
			<ul>
				<li><a href="#Responsive_design">Responsive design</a></li>
				<li><a href="#CSS_reset">CSS reset</a></li>
				<li><a href="#CSS_classes">CSS classes</a></li>
				<li><a href="#CSS_transitions_transforms">CSS transitions/transforms</a></li>
			</ul>
		</li>
	</ul>
</nav>

Nested lists may be used, as demonstrated in the navigational area for the styles documentation. The above is an example of an article's nav tag structure; to adapt this for sitewide navigation, simply remove the input and label tags (the hamburger) and prefix all anchor href attributes with the appropriate page name. Place an article's nav tag as the last child of the article, after all sections. Place the sitewide nav tag immediately after the page's main tag. For examples, examine the source of any page on this site.