README
Buldy
Modern CSS framework distilled from the best of larger frameworks
Buldy
Key Features
Built using the tastiest flavours of larger frameworks this minimal CSS framework is a suitable companion and starter point for small web projects as well as big design systems.
- πΈ Everything you need to create a solid project
- π Typography system where all font sizes are intertwined
- ποΈ Powerful responsive spacing system using multipliers of a unit value
- π Easily editable and extendable CSS variables
- π± A handful of elements, components & utilities
- π― No preprocessor necessary β just plug'n'play
- β Good Semantics
Introduction
Buldy is a CSS framework. As such, the sole output is a single CSS file: buldy.css
You can use that file out of the box and adapt it to your needs by changing the corresponding colors, typography, spacing and much more CSS variables.
Folder Structure β What's Included?
Some notes about the folder structure with some additional comments on important files.
Expand folder tree
buldy/scss/
|
| # Core mixin configuration
βββ config/
| |
| | # Breakpoint viewport sizes & responsiveness helpers like `@media-breakpoint-above()`
| βββ _breakpoints.scss
| |
| | # Elegantly scales type and space without breakpoints
| βββ _fluid-scales.scss
| |
| | # Global Sass mixins for various components
| βββ _mixins.scss
|
| # Main stem of the framework
βββ base/
| |
| | # Tiny CSS reset that covers the basics, may also be used standalone
| | # Built on top of Bootstrap's # [`reboot.scss`](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss), Jeremy Thomas' (creator of Bulma) [`minireset.sass`](https://github.com/jgthms/minireset.css/blob/master/minireset.css)
| | # and Jonathan Neal's [`sanitize.css`](https://github.com/csstools/sanitize.css/blob/master/sanitize.css)
| βββ resets.scss
| |
| | # Fluid type and space scales, semantic color definitions, themes & more CSS variables
| βββ variables.scss
| |
| | # Scoped theme containers via `[data-theme]`
| βββ themes.scss
| |
| | # Extends standalone resets with further generic opiniated styles
| βββ generic.scss
| |
| | # Support for `:focus-visible` polyfill
| | # See: https://github.com/WICG/focus-visible
| βββ accessibility.scss
|
| # Design the structure of your webpage with these CSS classes
βββ layout/
| |
| | # Simple way to build responsive columns with Flexbox
| βββ columns.scss
| |
| | # Simple container to center content horizontally
| βββ container.scss
| |
| | # Simple container to divide your page into sections
| βββ section.scss
| |
| | # Let elements flow vertically or horizontally
| βββ stack.scss
|
| # Essential interface elements that only require a single CSS class
βββ components/
| |
| | # Container for fixed or auto-growing responsive embeds
| βββ aspect-ratio.scss
| |
| | # A colored box to contain other elements
| βββ box.scss
| |
| | # Buttons in different colors, sizes, and states
| βββ button.scss
| |
| | # Handle WYSIWYG generated content, where only HTML tags are available
| βββ content.scss
| |
| | # Basic indispensable form controls
| βββ form.scss
| |
| | # Classic modal overlay
| βββ modal.scss
| |
| | # Sass port of the [Raster Grid System](https://rsms.me/raster/) by Rasmus Andersson
| βββ raster.scss
| |
| | # Simple headings to add depth to your page
| βββ title.scss
|
| # Modular helper classes to handle common layout tasks
βββ helpers/
| |
| | # Adds bottom gap to other `.block` elements
| βββ block.scss
| |
| | # Essentials
| βββ miscellaneous.scss
| |
| | # Hide content visually but make it available for screen readers
| βββ screen-reader-only.scss
| |
| | # Make any element clickable by stretchingβa nested link
| βββ stretched-link.scss
|
| # For faster mobile-friendly and responsive development
| # Includes utility classes for showing, hiding, aligning, sizing and spacing content
βββ utilities/
| |
| | # Runner to create all utility classes from `utilities.scss`
| βββ _api.scss
| |
| | # The utility generator function
| βββ _generator.scss
| |
| | # Editable list to generate utilities programmatically
| βββ utilities.scss
|
| # Main entry point
βββ buldy.scss
How Did We Get Here
Well, yet another framework which seeks to be used? Yes. I used Bulma and Bootstrap heavily over the years β Bulma's class naming syntax was a breeze to work with, although I preferred Bootstraps grid breakpoints. I often found myself removing unwanted stuff from every big framework I worked with (Bulma came as close as it can probably get to be the perfect allrounder).
One influental dev once said that every programmer should develop his own framework. I guess he's right as this is my try. I wanted to use a framework which only includes the essentials a project needs. Everything else should be added per project. Thoroughly searching the interweb didn't brought me closer to what I wished to find.
Then Codyhouse came along and presented the world with a series of articles and shortly after published their own framework. The use of CSS custom properties for a framework blew my mind. Which is pretty common nowadays, even Bootstrap 5 adapts them. But again, some design choices incorporated into the framework weren't my taste. So I used their great ideas and created my own framework.
Improvements and suggestions are always welcome.
Browsers Support
All of the latest and greatest browsers. Including Safari.
Credits
Big shoutout to @CodyHouse and @jgthms for their inspiring frameworks.
License
Code released under the MIT License.