Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

Latest commit

 

History

History
447 lines (349 loc) · 18.9 KB

README.md

File metadata and controls

447 lines (349 loc) · 18.9 KB

bullframe.css

NPM page GitHub last commit MIT license


bullframe.css logo

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:

  1. bullframe.css: the light theme
  2. bullframe-dark.css: the dark theme
  3. 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

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"