bonescss
bonescss is a bare-bones CSS framework. It provides tools that enable you to focus
on the awesome parts of CSS.
- make use of smacss namespaced class-names by default
- all the h5bp CSS defaults are there and up to date
- 100% BEM compatible
- Bootstrap mode that generates ready to use classess
Unlike Compass or Bourbon, bonescss is not meant to provide mixins for bower compatibility.
autoprefixer does that job very well.
##Installation
There are two ways to install it:
- add
node_modules
to your SCSS directories then npm install bonescss --save-dev
, then @include
the individual files in your SCSS files - Or checkout this repository into your SCSS directory and use it as a boilerplate:
git clone https://github.com/meodai/bonescss.git your-scss-directory
##Usage
You can add it to your existing SASS setup and make use
of all the mixins and helpers or you can let it generate helper classes in boilerplate mode.
- Using only the mixins on your own classes.
- all you have to include is
0.setting
and mixins
- adapt the different
0.setting
's file to your project.
- Use it in as boilerplate with placeholder selectors or classes.
- include and adapt
main.scss
- adapt the differet
0.setting
's file to your project.
##Settings
0.settings
-
$boilerplate-mode [true]
will generate ready to use placeholder selectors that can be used with extend and/or regular classes for each helper depending on the $xxx-selector
config
-
$layout-selectors ["%l-" ".l-"], $text-selectors ["%t-" ".t-"] etc...
will prefix you classes and placeholders with smacssy names just remove the l-
, t-
etc. if you don't want this
0.settings.colors
-
$colors (map)
a map containing your named colors.
-
c (function)
helper function to use the colors: c(blue)
-
$gradients (map)
contains only linear gradients for now
-
gradient (function)
usage: background: gradient(dark);
0.settings.sizes
-
$s-base
should be the most important size in your app/website design. Usually 1rem/16px, depending on the design. Used for gaps and grids, Try to express every size with this number later on. Its mandatory though.
-
$s-design-width [1024]
sets the default max-with of your website. Used in some helper classes
-
$s-golden [1.61803398875]
golden radio, just because
-
$sizes (map)
a place to maintain and name your spaces
-
s (function)
usage: s(small)
returns a space by name from $sizes
-
$breakpoints (map)
contains the breakpoints of the project
0.settings.typo
-
$t-default-font-size [$s-base]
Used as base font size for all the size mixins and functions. Usually set to the body font size.
-
$t-default-font-...
Sets the defaults for the most common font on the app
-
$types (map)
a list of all your typographical elements, only add attributes that are different from the default
-
t (function)
@include t(title)
render all the CSS attributes your titles needs
1.base
Contains the part H5BP's main.css before Author's custom styles
2.layout
All rules inside this file are prefixed with .l-
and %l-
but you can overwrite this variable $layout-selectors: "%l-" ".l-";
-
.l-clearfix (@mixin clearfix)
h5bp's cleafix
-
.l-size-width (@mixin site-witdh)
Used as a class for containers. Sets the with of the design and centers it. (Also set it to position relative)
-
.l-horizontal-list (@mixin horizontal)
Makes a UL
or OL
list display horizontally
-
.l-horizontal (@mixin horizontal($childSelector: '*'))
Does the same then .l-horizontal-list
but for every element.
-
.l-horizontal-samewidth-list (@mixin horizontal($type: samewidth))
Uses table layout to make a list that is horizontal where the total with of the list is divided by the number of children.
-
.l-horizontal-equidistant (@mixin horizontal($type: equidistant, $childSelector: '*'))
Every element inside this container will have equal distances in between.
-
.l-table, .l-table-row, .l-table-cell (@mixin table, table-row, table-cell)
Used for table layouts. Because yes sometimes I use them.
.l-table-cell
comes with a modifier .l-table-cell--max
and .l-table-cell--min
. .l-table-cell--min
Is always as wide as its contents. and .l-table-cell--max
as wide as possible inside the table layout.
-
.l-horizontal-extremities (@mixin horizontal-extremities)
Floats all children right and the first one left. Also extends .l-clearfix
.
-
.l-fill (@mixin fill)
Uses position:absolute
and fills its context.
-
.l-centered
Used for a CSS only modal-box. Will always be centered, scrollable and will have the size of its content. Works in all cool browsers and IE8+. in order to Make it work you have to use the following DOM structure:
If you don't need to support uncool browser is suggest you use the mixin center-absolute()
.
-
@mixin center-absolute($direction:both|horizontal|vertical)
Absolutely centers an element in it's parent horizontal, vertically or in both directions
3.helpers
The helpers are mostly text helpers. This is why the rules are prefixed with %t-
and .t-
, this can be changed by overwriting: $text-selectors: "%t-" ".t-";
-
.t-selectable, .t-not-selectable
Will set user-select: none;
or user-select: text;
.
-
.t-antialiased (@mixin antialiased)
-webkit-font-smooting: antialiased;
-moz-osx-font-smoothing: grayscale;
-
.t-truncate (@mixin truncate)
Will truncate text using overflow ellipsis.
-
@mixin smoothscroll ($axis:y/x)
Will make the overflow-y or x play nice on IOS.
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
4.print
The print part from H5BP main.css
5.states
In SMACSS states are prefixed with .is-
but here as well you can modify this with:
$state-selectors: "%is-" ".is-";
$state-selectors-and: "&%is-" "&.is-";
-
.is-visuallyhidden & .is-visuallyhidden-focusable (@mixin visuallyhidden, @mixin visuallyhidden-focusable)
Hide only visually, but have it available for screen readers. H5BP
-
.is-invisible
Hide visually and from screen readers, but maintain layout
-
.is-disabled (@mixin disabled)
Generic class to make any element disabled by removing pointer events and lower the opacity
-
.is-hidden (@mixin hidden)
Hide visually and from screen readers: H5BP
-
.is-visible (@mixin visible)
Used to show elements. Will set to inherit by default, but can be block inline or inline-block as well just use the modifiers --block
, --inline
or --inline-block
.
-
.is-loading
Generic loading class. Will make elements with this class pulsate.
_mixins.scss
Includes all the mixins and functions
Size / Metrics
-
@mixin px2percent ($size,$contextSize)
Converts any size into percents. If in some PSD file your design is 1024px wide and some sidebar in this design has a width of 300px you would use the function like this:
width: px2percent(300px,1024px)
-
@mixin px2rel($px, $baseSize, $unit)
Will convert any pixel unit to a relative unit. Usually used to convert font-sizes.
If for example your h1
should have a font-size of 40px and your base font-size is 16px. The function would be used as such: font-size: px2rel(40px, 16px)
The default unit will be rem
you can set it to something else (like EM) by using the third argument. If you set $s-font-base in your options somewhere you don't have to pass the second argument.
-
@mixin font-size($px)
Sets a font size with a PX fallback for old browsers
font-size: font-size(16px)
will result in
font-size: 16px;
font-size: 1rem:
-
line-height($px)
Set a line-height with a PX fallback exactly as the font-size function
Shapes
-
triangle( $height, $color, $direction, $width )
Creates a CSS triagnle using the border trick. if $width
is not set it will be the same as the height.
-
circle( $size, $color )
Make a circle of a given color using border radius
Contributors
Logo: (CC) Alexandra Hawkhead