This is a reaction the over engineered frameworks – a minimal and opinionated css framework. DOM-verbose. 2 breakpoints (Desktop + mobile). 5 column widths. Basic styles and variables.
.col-50
.col-50
.col-33
.col-33
.col-33
.col-25
.col-25
.col-25
.col-25
.col-100
.col-25.collapse-to-50
.col-75.collapse-to-50
.col-50.dont-collapse
.col-50.dont-collapse
boot.css uses Brute.css for all things layout. Its opinionated and restrictive design fits perfectly the ethos of this site. The class names reflect their width in % (col-50 = 50%). By default, all columns collapse to width:100% on mobile (any screen under 840px wide). 2 columns are possible on mobile by using the classes .col-50.dont-collapse and col-25.collapse-to-50 col-75.collapse-to-50. If you don't want gutters/gaps use .row.unpadded. No responsive classes classes. No offsets. No alignment control. No ordering control. If anything can't be done out of the box it need to be custom built.
All elements inside columns are width:100% blocks unless nested within an inline element like a paragraph. Most basic html markup is left as-is, because native CSS is THE mother of all design systems.
.label.regular.primary.border
.label.small.secondary.border
.label.small.brand.filled
// This is a .box.large.radius.secondary-bg.no-border
.text-large.text-color-brand
.text-regular.text-color-primary
.text-small.text-color-secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. I love a good placeholder. This is an inline link in a nice paragraph with some code, and coming up a fancy quote.
"I don't have a solution.
Just concerning thoughts."
— Ana Rodrigues
This above is an hr. Below are forms where, each input is a block, no funky inline-business. I hope your not looking for table I don't have (or like) them.
This is not a full-feldge framework covering all the possible layouts and UI elements. It is designed to (brute) force a minimal design approach that is spacious, simple, focused: respectful of human attention. It covers 90% of my needs, and probably yours. It is the distillation of 10 years of me building websites, and developing my taste – a savant-melange of restraint and ignorance that shaped this tiny package. Its simplicity allows me to work with it in my mind without needing plugin or other gadget, something valuable to preserve sanity and creativity.