avalanche

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

Subscribe to updates I use avalanche


Statistics on avalanche

Number of watchers on Github 606
Number of open issues 7
Average time to close an issue 15 days
Main language CSS
Average time to merge a PR 2 days
Open pull requests 5+
Closed pull requests 2+
Last commit over 1 year ago
Repo Created about 3 years ago
Repo Last Updated 10 months ago
Size 77 KB
Homepage http://colourgard...
Organization / Authorcolourgarden
Latest Release1.3.0
Contributors2
Page Updated
Do you use avalanche? Leave a review!
View open issues (7)
View avalanche activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating avalanche for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Avalanche CSS grid system

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

Why use Avalanche?

  • No bloat. Only create the selectors you'll actually use
  • No duplication. 1/2 == 2/4 so why create two selectors?
  • No floats. No clears. No .last
  • Flexible, configurable naming conventions
  • Nesting to infinity and beyond
  • Real-world breakpoint naming. 'thumb', 'handheld' and 'desk'; not 'xs', 'md' and 'xl'
  • Integrated media query mixin. Connect your media queries to your grid breakpoints

Demo

View the demo to see Avalanche in action!

Installation

  1. Import _avalanche.scss to your project via Bower, NPM or manually copying to vendor folder (@import "vendor/avalanche")
  2. Override settings to fit your requirements or use the defaults
  3. Compile!

NPM

npm install --save avalanche-css

Bower

bower install --save avalanche-css

Usage

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers.

<div class="grid grid--center">
  <div class="3/4 1/2--thumb grid__cell"></div>
  <div class="1/4 1/2--thumb grid__cell"></div>
</div>

Settings

$av-namespace Global prefix for layout and cell class names. Default: grid.

$av-element-name Element (in a BEM context) or grid cell name. Default: cell.

$av-element-class-chain Chain characters/separator between BEM block and element. Default: __.

$av-modifier-class-chain Chain characters/separator between BEM block and modifier. Default: --.

$av-breakpoint-class-chain Chain characters/separator between width class and breakpoint. Default: --.

$av-gutter Gutter width between cells. Default: 20px.

$av-width-class-namespace Prefix for width class names. Default: ''.

$av-width-class-style Naming style of width classes. Default: 'fraction'. Options: fraction (1/2, 3/4 etc), percentage (25, 50 etc), fragment (1-of-3, 4-of-5 etc). N.B. If using percentage then $av-width-class-namespace above cannot be null. Avalanche escapes leading integers for fraction and fragment naming styles but this isn't possible with percentage style as Sass attempts to escape the whole number (e.g. 50 instead of just 5 or 30 instead of just 3) so fails.

$av-widths Sass list of width denominator values (when expressed as a fraction). For example, 2 produces 1/2 width class, 3 produces 1/3 and 2/3 width classes etc. Default: ( 2, 3, 4 ). N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the numbers you'll use.

$av-enable-responsive Enable/disable the inclusion of responsive width classes. With this enabled, class names (for denominators set above) will be created for each of your breakpoint aliases (set below). Default: true.

$av-breakpoints Sass map of responsive breakpoint aliases and associated media queries (in key-value pairs). N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the breakpoints you'll use. Default:

(
  "thumb":            "screen and (max-width: 499px)",
  "handheld":         "screen and (min-width: 500px) and (max-width: 800px)",
  "handheld-and-up":  "screen and (min-width: 500px)",
  "pocket":           "screen and (max-width: 800px)",
  "lap":              "screen and (min-width: 801px) and (max-width: 1024px)",
  "lap-and-up":       "screen and (min-width: 801px)",
  "portable":         "screen and (max-width: 1024px)",
  "desk":             "screen and (min-width: 1025px)",
  "widescreen":       "screen and (min-width: 1160px)",
  "retina":           "screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)"
)

Grid layouts

Apply as modifier classes to your base grid element. For example; <div class="grid grid--center">.

All optionable grid layouts listed below are switched off by default. Set to true to enable.

$av-enable-grid-center All cells are horizontally centered within the container.

$av-enable-grid-cell-center Center an individual grid cell within the container. N.B. Class should be applied to an individual cell, not the grid container. For example; <div class="grid__cell grid__cell--center">.

$av-enable-grid-right All cells are horizontally aligned to the right within the container.

$av-enable-grid-middle All cells are vertically centered within in the container.

$av-enable-grid-bottom All cells are vertically aligned to the bottom of the container.

$av-enable-grid-flush Gutters removed between cells.

$av-enable-grid-tiny Gutters between cells set to a quarter of the global gutter value. Default: 5px.

$av-enable-grid-small Gutters between cells set to half of the global gutter value. Default: 10px.

$av-enable-grid-large Gutters between cells set to double the global gutter value. Default: 40px.

$av-enable-grid-huge Gutters between cells set to quadruple the global gutter value. Default: 80px.

$av-enable-grid-auto All cells take up an unspecified width set by their content.

$av-enable-grid-rev Grid cells are displayed in the opposite of their source order.

Media query

Avalanche includes a media query mixin that makes use of the breakpoint aliases you set. This enables better coupling between your grid and other responsive content items. Usage as follows.

@include av-mq(pocket){
  .content-item{
    /* responsive CSS */
  }
}

Browser support

All modern browsers are supported and Internet Explorer from IE9 upwards. If IE8 support is required then all that is needed is a pixel-value to be set for font-size on .grid__cell. This is due to IE8 not supporting rem units. Use of a 'rem-to-px' check during build is recommended.

Contributing

When issuing a pull request to improve this project, please:

  1. Rigourously comment your code, particularly where new variables are introduced or manipulated
  2. Ensure your work passes the stylelint linter (sample gulpfile)
  3. Be as descriptive as possible in your commit message

Questions

If you have any questions or need some help then feel free to tweet me at @colourgarden or open an issue.

avalanche open issues Ask a question     (View All Issues)
  • about 2 years BEVM syntax
  • over 2 years Add 'show breakpoint' option
avalanche open pull requests (View All Pulls)
  • remove trailing whitespace
  • Make BEM syntax configurable
  • Feature debug
  • Feature/scss lint
  • Encourage sane contributions with editorconfig & stylelint
avalanche questions on Stackoverflow (View All Questions)
  • Feature Hashing / Avalanche Effect
  • Avalanche Mountain - Noise.png is missing from iPhone 5s, 5c, 6 and 6+ devices
  • Why there's a difference between CBC ECB CTR regarding avalanche efect?
  • Avalanche magento theme customer login not working
  • How Avalanche Imagine Bundle can work on production environment?
  • Problems with Avalanche-imagine in symfony2
  • Good hashing algorithm with proximity to original text input , less avalanche effect?
  • Error avalanche in Boost.Spirit.Qi usage
  • Avalanche magento theme and scp
  • Preventing avalanche of runtime errors in Mathematica
  • java string hash function with avalanche effect
avalanche list of languages used
avalanche latest release notes
1.3.0 1.3.0

Introduction of stylelint and editorconfig files to encourage consistent and sane contributions.

Thanks to @meowsus for the groundwork.

1.2.0 1.2.0

Introducing new variables to enable use of BEVM naming convention.

  • Element name (cell by default) can now be modified independently of global namespace (grid)
  • Class chain separators for element, modifier and breakpoint can now be set individually. Changing modifier to '.-' enables use of BEVM variation classes like grid -center rather than grid--center

Thanks for @willemvb for initial idea and groundwork.

1.1.2 1.1.2

Fixing numerator escaping. Check for presence of a namespace and, if so, skip over escaping the numerator. Previously, class names were being unnecessarily escaped when using a namespace e.g. .col-\31-of-2. Also fixed small comment typo.

Other projects in CSS