https://github.com/xi/mfbs

CSS microframework
https://github.com/xi/mfbs

css sass scss

Last synced: about 1 month ago
JSON representation

CSS microframework

• Host: GitHub
• URL: https://github.com/xi/mfbs
• Owner: xi
• License: gpl-2.0
• Created: 2015-03-08T17:44:14.000Z (almost 10 years ago)
• Default Branch: main
• Last Pushed: 2024-04-26T06:29:00.000Z (8 months ago)
• Last Synced: 2024-10-10T00:38:40.461Z (3 months ago)
• Topics: css, sass, scss
• Language: CSS
• Homepage: https://xi.github.io/mfbs/examples/styleguide.html
• Size: 129 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE

Awesome Lists containing this project

README

        
mfbs (motherfuckingbootstrap) is a CSS microframework inspired by [twitter

bootstrap](https://getbootstrap.com/) and

.

I found that I started every new project with mostly the same CSS code. So

instead of duplicating that code again and again, I distilled the base styles

from several projects into this little library.

It consists of some basic styling (`base.css`) and some optional components.

See how it looks

[here](https://xi.github.io/mfbs/examples/motherfuckingwebsite.html) and

[here](https://xi.github.io/mfbs/examples/styleguide.html).

## how to use it

The code is plain CSS, so you can use it any way you want:

-   Reference the file you want using ``

-   Concatenate the files and your own code into a single big file.

-   Or just read the code and copy the parts you like.

## features

-   mfbs on its own is completely sufficient for simple text-only websites.

-   It can easily be customized with variables.

-   The default colors were carefully picked to look nice and satisfy minimum

    contrast requirements.

-   Opinionated styling for buttons, layout, and some more things is available

    in additional modules.

-   Base styles have low specificity, so they can easily be extended with

    custom components.

-   The small set of variables is very focused and scales well for projects of

    any size.

## when to use

-   Use the default for simple general-purpose styling

-   For small projects, overwrite some variables and define some custom

    components (e.g. header)

-   For large projects, you probably do not want to include the optional,

    opinionated modules. But the base styles and variables are still a solid

    base to build on.