bonescss

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:

  • .centered
    • .centered-container
      • .centered-inner
        • .centered-content
          • .centered-body

  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