symmetric-block

An OOCSS component for fluid symmetrtical blocks of different shapes: square, circle, etc.

This CSS rule displays .symmetric in a 1:1 ratio.

Based on OOCSS principles and frameworks like Basscss.

Symmetric-block is an immutable component designed to be skinned with simple module classes.

Features

Fluid

Symmetric-block will symmetrically stretch to fill it's container.

Low Specificity

Low Specificity makes it easy to style the Component without worrying about complicated CSS hierarchies.

No Preset Styling

Shape, colors, overflow, etc are available to the author to implement in any number of combinations. Ie, The styles have not been preset. See examples:

Usage

PostCSS

@import 'symmetric-block';

This module is meant to be an add-on for Basscss. To use, first install a Basscss project (Basscss, Bassplate, Ace, etc... ) with NPM, and then include @import 'symmetric-block'; in the source css file.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Examples

Needs examples.

Explanation

This rule works because padding and margin HEIGHT are based on the parent's WIDTH in CSS, and the pseudo-element's parent is .symmetric. So, padding-top will equal .symmetric's width. A padding-top or margin-top of 100% will stretch the height of the pseudo-element's parent to equal it's own width.

This component requires two classes. .symmetric for the outer element and .symmetric__inner for the innter element.

MIT license