bullframe.css

v4.1.2

Published

2 months ago

Solid, fluid, cross-browser Sass (SCSS) framework.

Downloads

125

bullframe.css

https://github.com/marcop135/bullframe.css

bullframe.css is a Sass (SCSS) framework that works in a wide range of desktop and mobile browsers. It's a cross-browser and responsive collection of default HTML UI elements (atoms) for your Sass project.

You could be easily use it for marketing sites, landing pages, mini sites, micro sites, blog posts, e-commerce product listings, help and documentation, and more.

Just add bullframe.css in your webpage, write semantic HTML, and you are ready to go!

Best features

Wide range of desktop and mobile browsers support
Responsive-ness and style normalization out-of-the-box
Cross-browser form elements by default
Sass architecture
CSS BEM
Responsive typography
Dark mode and theming support
RTL support
Gulp-friendly
Classless-friendly

What's included

You'll see something like this:

bullframe.css/
└── dist/
    ├── css/
    │   ├── bullframe-classless.css
    │   ├── bullframe-classless.min.css
    │   ├── ...
    │   ├── bullframe-dark.css
    │   ├── bullframe-dark.min.css
    │   ├── ...
    │   ├── bullframe-utilities.css
    │   ├── bullframe-utilities.min.css
    │   ├── ...
    │   ├── bullframe.css
    │   ├── bullframe.min.css
    │   ├── ...
    │   ├── bullframe-classless.css.map
    │   ├── bullframe.min.css.map
    │   ├── ...
└── src/scss/
    └── forms/
    └── miscellaneous/
    └── mixins/
    └── typography/
    └── utilities/
    └── variables/
    ...
    ├── bullframe-classless.scss
    ├── bullframe-system-default.scss
    ├── bullframe-dark.scss
    ├── bullframe-utilities.scss
    ├── bullframe.scss
    ...
└── gulpfile.js
└── index.html
...

Getting started

Download

Download the latest release

CDN

JSDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">

npm

Once you have installed Node.js, you can run this command to install bullframe.css into your project:

# create a package.json file
# $ npm init

npm install bullframe.css

What is Node?

What is npm?

Gulp.js

After installing bullframe.css from npm, you may use gulp.js to re-compile all files, and customize your Sass project as needed.

# navigate to /node_modules/bullframe.css

# install all dependencies
npm install

# run gulp and have fun!
gulp

What is gulp.js?

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bullframe.css starter template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4/dist/css/bullframe.min.css">
</head>
<body>
  <div class="bf-container">
    <!-- Add your site or application content here -->
    <p>Hello world! This is a bullframe.css starter template</p>
  </div>
</body>
</html>

Codepen

Take a look at this CodePen collection and fork a ready-made templates of your choice.

Use bullframe.css as a CodePen template

Click on the links below, and start a new pen in CodePen using bullframe.css.

Customization

No classes (class-less)

What means "classless"? No classes, no utilities. Feel free to add yours and create your custom components. Read more on css-tricks.com.

Just drop the snippet below in the <head> of your webpage, and the job is done! Write semantic HTML and get nice styles and cross-browser normalization.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@4/dist/css/bullframe-classless.min.css">

<!-- Center the page (optional)  -->
<style>
  body {
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    max-width: 80rem;
  }
</style>

Theming

There are three builds available:

bullframe.css: the light theme
bullframe-dark.css: the dark theme
bullframe-system-default.css: the theme set by the user as default (which can be light or dark). Read more on MDN.

`bullframe.css`

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe.min.css">

`bullframe-dark.css`

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-dark.min.css">

`bullframe-system-default.css`

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-system-default.min.css">

Utilities - Reference

A set of utilities for bullframe.css customisation:

Grid system

Breakpoints: 576, 768, 992 and 1200 pixels

| Utility class | Description | | ------------- | ----------- | | .bf-container | Sets a centered block container with a max-width of 1140px, and a custom padding | | .bf-container--fluid | Sets a fluid centered block container with a custom padding | | .bf-container--break-xs | Collapses all the columns when the viewport is 575px and below | | .bf-container--break-md | Collapses all the columns when the viewport is 767px and below | | .bf-container--break-lg | Collapses all the columns when the viewport is 991px and below | | .bf-row | Sets a block container with a custom negative margin | | .bf-col-1 | Sets a floated container with a custom padding and a width of 8.3333% | | .bf-col-2 | Sets a floated container with a custom padding and a width of 16.666666666666664% | | .bf-col-3 | Sets a floated container with a custom padding and a width of 25% | | .bf-col-4 | Sets a floated container with a custom padding and a width of 33.33333333333333% | | .bf-col-5 | Sets a floated container with a custom padding and a width of 41.66666666666667% | | .bf-col-6 | Sets a floated container with a custom padding and a width of 50% | | .bf-col-7 | Sets a floated container with a custom padding and a width of 58.333333333333336% | | .bf-col-8 | Sets a floated container with a custom padding and a width of 66.66666666666666% | | .bf-col-9 | Sets a floated container with a custom padding and a width of 75% | | .bf-col-10 | Sets a floated container with a custom padding and a width of 83.33333333333334% | | .bf-col-11 | Sets a floated container with a custom padding and a width of 91.66666666666666% | | .bf-col-12 | Sets a floated container with a custom padding and a width of 100% | | .no-gutters | Set margin-left, margin-right, padding-left and padding-right to 0 — to be applied to row and column containers |

Layout

| Utility class | Description | | ------------- | ------------- | | .bf-clearfix | Clears the float, read more | | .bf-hide | Sets the display to none | | .bf-hidden | Sets the display to none and the visibility to hidden | | .bf-text-hide | Hides a text (AKA CSS image replacement) using a font hack and a combination o properties | | .bf-sr-only | Shows a text only if screen reader | | .bf-sr-only.focusable | Shows a text only if screen reader and focused | | .bf-invisible | Sets the visibility to hidden | | .bf-visible | Sets the visibility to visible | | .bf-display-block | Sets the display to block | | .bf-display-block-center | Sets the display to block, the left/right margins to auto and text-align to center | | .bf-display-inline | Sets the display to inline | | .bf-display-inline-block | Sets the display to inline-block | | .bf-display-flex | Sets the display to flex | | .bf-display-inline-flex | Sets the display to inline-flex | | .bf-display-flex--justify-start | Sets justify-content to flex-start | | .bf-display-flex--justify-end | Sets justify-content to flex-end | | .bf-display-flex--justify-center | Sets justify-content to center | | .bf-display-flex--wrap | Sets flex-wrap to wrap | | .bf-display-flex--nowrap | Sets flex-wrap to nowrap | | .bf-float-left | Sets the float to left | | .bf-float-right | Sets the float to right | | .bf-position-fixed | Sets the position to fixed | | .bf-align-center-unknown | Sets the position to relative | | .bf-align-center-unknown--item | Centers an element with unknown height and width to a relative positioned parent, IE10+, read more | | .bf-align-center-flex | Centers all elements with known height and width to a flexbox container, IE10+, read more | | .bf-width-25 | Sets the width to 25% | | .bf-width-33 | Sets the width to 33.33333333333333% | | .bf-width-50 | Sets the width to 50% | | .bf-width-75 | Sets the width to 75% | | .bf-width-100 | Sets the width to 100% | | .bf-width-auto | Sets the width to auto | | .bf-z-index-1 | Set z-index to 1 | | .bf-z-index-2 | Set z-index to 2 | | .bf-z-index-3 | Set z-index to 3 | | .bf-z-index-4 | Set z-index to 4 | | .bf-z-index-5 | Set z-index to 5 | | .bf-z-index-6 | Set z-index to 6 | | .bf-z-index-7 | Set z-index to 7 | | .bf-z-index-8 | Set z-index to 8 | | .bf-z-index-9 | Set z-index to 9 | | .bf-z-index-10 | Set z-index to 10 | | .bf-z-index-20 | Set z-index to 20 | | .bf-z-index-30 | Set z-index to 30 | | .bf-z-index-40 | Set z-index to 40 | | .bf-z-index-50 | Set z-index to 50 | | .bf-z-index-60 | Set z-index to 60 | | .bf-z-index-70 | Set z-index to 70 | | .bf-z-index-80 | Set z-index to 80 | | .bf-z-index-90 | Set z-index to 90 | | .bf-z-index-100 | Set z-index to 100 | | .bf-z-index-200 | Set z-index to 200 | | .bf-z-index-300 | Set z-index to 300 |

Spacing

| Utility class | Description | | ------------- | ----------- | | .bf-m-0 | Sets the margin to 0 | | .bf-m-t-0 | Sets the margin-top to 0 | | .bf-m-b-0 | Sets the margin-bottom to 0 | | .bf-m-l-0 | Sets the margin-left to 0 | | .bf-m-r-0 | Sets the margin-right to 0 | | .bf-m-b-1 | Sets the margin-bottom to a custom value that matches the grid system gutter | | .bf-m-b-2 | Sets the margin-bottom to a custom value | | .bf-m-b-3 | Sets the margin-bottom to a custom value | | .bf-m-b-4 | Sets the margin-bottom to a custom value | | .bf-p-0 | Sets the padding to 0 | | .bf-p-t-0 | Sets the padding-top to 0 | | .bf-p-b-0 | Sets the padding-bottom to 0 | | .bf-p-l-0 | Sets the padding-left to 0 | | .bf-p-r-0 | Sets the padding-right to 0 | | .bf-p-t-1 | Sets the padding-top to a custom value that matches the grid system gutter | | .bf-p-t-2 | Sets the padding-top to a custom value | | .bf-p-t-3 | Sets the padding-top to a custom value | | .bf-p-t-4 | Sets the padding-top to a custom value | | .bf-p-t-1 | Sets the padding-bottom to a custom value that matches the grid system gutter | | .bf-p-b-2 | Sets the padding-bottom to a custom value | | .bf-p-b-3 | Sets the padding-bottom to a custom value | | .bf-p-b-4 | Sets the padding-bottom to a custom value |

Texts

| Utility class | Description | | ------------- | ----------- | | .bf-t-transform-uppercase | Sets transform to a uppercase (AKA capitalizes a text) | | .bf-t-transform-none | Sets transform to a none | | .bf-t-left | Sets text-align to a left | | .bf-t-center | Sets text-align to a center | | .bf-t-right | Sets text-align to a right | | .bf-t-shadow | Sets a basic text shadow | | .bf-t-italic | Sets font-style to a italic | | .bf-t-style-normal | Sets font-style to a normal | | .bf-t-weight-300 | Sets font-weight to 300 (AKA light) | | .bf-t-weight-400 | Sets font-weight to 400 (AKA normal) | | .bf-t-weight-500 | Sets font-weight to 500 (AKA medium) | | .bf-t-weight-600 | Sets font-weight to 600 (AKA semi-bold) | | .bf-t-weight-700 | Sets font-weight to 700 (AKA bold) | | .bf-t-weight-800 | Sets font-weight to 800 (AKA black) | | .bf-text-break | Sets word-wrap to a break-word, applied by default to the body | | .bf-t-truncate | Truncates a very long text and replaces the missing text with an ellipsis | | .bf-t-truncate--multiline-2 | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) | | .bf-t-truncate--multiline-3 | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) | | .bf-no-select | Blocks user text selection | | .bf-font-sans-serif | Sets font-family to a sans-serif, and a combination of cross-browser system UI sans-serif font families | | .bf-font-serif | Sets font-family to a serif, and a combination of cross-browser system UI serif font families | | .bf-font-monospace | Sets font-family to a monospace, a combination of widely supported monospaced font families | | .bf-h1 | Matches the font styling of a h1 | | .bf-h2 | Matches the font styling of a h2 | | .bf-h3 | Matches the font styling of a h3 | | .bf-h4 | Matches the font styling of a h4 | | .bf-h5 | Matches the font styling of a h5 | | .bf-h6 | Matches the font styling of a h6 | | .bf-lead | Sets font-size to 125% | | .bf-responsive-typography | Scales font-size from a minimum of 1.6rem (AKA 16px) to a maximum of 1.9rem using calc and some CSS custom properties |

Lists

| Utility class | Description | | ------------- | ----------- | | .bf-list-unstyled | Removes margins, paddings and li list styles from ul, ol and dd elements |

Tables

| Utility class | Description | | ------------- | ----------- | | .bf-table | Sets a border and custom paddings and margins to a table | | .bf-table-responsive | Adds responsiveness to a table container | | .bf-table--zebra | Increases a table readability adding horizontal zebra stripes | | .bf-table-responsive--zebra | Increases a responsive table readability adding horizontal zebra stripes |

Embeds

| Utility class | Description | | ------------- | ----------- | | .bf-embed-responsive | Adds responsiveness to an iframe, embed, object, video or general purpouse element (e.g. youtube embed) | | .bf-embed-responsive--4-3 | Sets a 4:3 ratio responsiveness to an iframe, embed, object, video or general purpouse element container (e.g. youtube embed) | | .bf-embed-responsive--item | A general purpouse element element that behaves like a video |

Buttons

| Utility class | Description | | ------------- | ----------- | | .bf-btn | Creates a standard gray-looking button (e.g. <a class="bf-btn" href="...">...</a>)| | .bf-btn--primary | Creates a primary blue-looking button |

Form states

| Utility class | Description | | ------------- | ----------- | | .bf-focused | Sets a blue-looking focused ring and shadow around an input, textarea or select | | .bf-disabled | Sets opacity to 0.5, and resets a combinations of properties to the default value if is disabled | | .bf-invalid | Sets a red-looking focused ring and shadow around an invalid input, textarea or select |

Reduced motion

| Utility class | Description | | ------------- | ----------- | | .bf-reduced-motion | Adds a combinations of properties and values to an element (e.g. the body) removing all motion-based animations if preferred by the user, read more |

Browser compatibility

Desktop browsers

Latest stable two: Firefox, Chrome, Edge, Safari, Opera
IE 11+

Mobile browsers

Latest stable: Firefox, Chrome, Edge, Opera, Mobile Safari

You might take a look at the .browserslistrc file for Autoprefixer

Screenshots

How can I quickly determine if every HTML element works well on all browsers?

Take a look at some screenshots and screencasts, organized by rendering engines (blink, gecko, trident, webkit).

Contributors

@englishextra the project is still live thanks to you!

Contributing

Please read the contribution guidelines.

Changelog

Acknowledgements

bullframe.css incorporates some of the styles found on some amazing CSS boilerplates and frameworks across the web. Thank you!

@necolas /normalize.css for the extensive old browsers bug fixing documentation
@h5bp /main.css for the excellent print styles base and the keyboard utilities
@twbs /bootstrap for some neat typography tricks, responsive embeds, reboot styles, base24 SVG icons, button styles, grid system breakpoints and spacing utilities (a lot!)
@kognise /water.css for the "classless" concept inspiration and some form tricks
@csswizardry @inuitcss /inuit.css for some advanced Sass tips and tricks
@jensimmons /cssremedy for the prefers-reduced-motion snippet

License

The MIT License (MIT) - http://opensource.org/licenses/MIT "The MIT License"

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

bullframe.css

Best features

What's included

Getting started

Download

CDN

npm

Gulp.js

HTML

Codepen

Use bullframe.css as a CodePen template

Customization

No classes (class-less)

Theming

bullframe.css

bullframe-dark.css

bullframe-system-default.css

Utilities - Reference

Grid system

Layout

Spacing

Texts

Lists

Tables

Embeds

Buttons

Form states

Reduced motion

Browser compatibility

Desktop browsers

Mobile browsers

Screenshots

Contributors

Contributing

Changelog

Acknowledgements

License

`bullframe.css`

`bullframe-dark.css`

`bullframe-system-default.css`