buldy

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.