symmetric-block v1.0.1
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.