fractures

fr·ctures

Baseline atomic CSS toolkit.

Fractures helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.

Getting started GitHub
version: 0.5.0
size: ~3kb gzipped
							// Basic grid with horizontal and vertical gap
							<div class="grid grid-cols-3 gap-2">
								 <div></div>
								 <div></div>
							</div>
						
							// Centered flex content
							<div class="flex flex--center">
								 <div></div>
							</div>
						
							// Responsive containers based on material design breakpoints
							<div class="fr-container-small"></div>
							<div class="fr-container"></div>
							<div class="fr-container-large"></div>
						
							// Sticky footer with minimum element height
							<div class="flex flex--column minvh-100">
								 <div class="grow-1"></div>
								 <footer></footer>
							</div>
						
							// Working examples
							// fractures.github.io/fractures
						

Getting started

Goals

List of classes