_base.images.scss

Another type of generator for generating grid widths. This is the version we commonly use, because it outputs significantly less css. Most elements can be aligned to the design in…

This file generates the grid width classes for the major breakpoints, IF the variable $mk-grid-generator is set to true. By default, this is set to FALSE, because the grid generator outputs…

This contains the core functions needed for the Matter Kit, outside of the functions that bourbon provides. Below is a list of functions that are standard across installs. mk-get-media-query-size( $size )…

Allow floated elements to be cleared and the flow of the document restored. Floats are not used generally in the base – we use display-inline block instead, however some 3rd…

Base styling for table elements. Included at the top of this partial are several configuration variables for padding and alignment. By default the colour used for table headings is the secondary colour assigned for the project.

Sets spacing on block element styles to create a consistent vertical rhythm. Here are some of the elements affected with margins added below: p blockquote h1-h6 table ol, ol, dl…

Add quote marks “” around the inline q element and the block blockquote elements. Blockquote styling itself is separated into it’s own element partial. Examples Inline quote Blockquote element. Lorem ipsum…

Base typography styling and overflow for the HTML elements. Also included is a transition on the body element for interactions with body, such as opening an off-canvas menu.

Standard styling to force object, video, embed and iframe elements to respond to their container. The only thing set here is a max-width on the items.

Styling for standard ordered and unordered lists, as well as their list items. By default, the margins below list items are removed and the list styles are set as disc…

Base styling for links. These use the primary call to action colour defined in the colours partial by default and has colours set for the different states; visited, hover, active….

Styling for image elements and svg elements. There are also a couple of implementation styles related to images here, such as hiding images that are replaced with SVG images via Javascript (inject-svg).