Basscss is a collection of interoperable CSS modules and can be used in conjunction with many other frameworks, libraries, and stylesheets.
Basscss is written in spec-compliant CSS with bleeding edge features and uses cssnext to transpile to CSS that is compatible with today’s browsers. Basscss can also be transpiles with Rework. To learn more about using future CSS features, see the Future CSS Guide.
The quickest way to start customizing Basscss is through the official boilerplate project Bassplate, which includes scripts and basic file and folder structure for building a simple website.
To get started, clone the repo, install dependencies, and run the start script.
git clone https://github.com/basscss/bassplate.git new-project cd new-project rm -rf .git npm install npm start
This will start a server at
http://localhost:8080 and watch the
/src folder for changes.
Edit the files in
/src/css to customize the compiled stylesheet.
All individual Basscss modules are available on npm.
Basscss uses npm to manage its CSS modules. Cssnext automatically inlines files with the following syntax.
If you’re using Rework or Myth, be sure to use the
rework-npm plugin to correctly import files.
To import modules that have been installed through npm, use the following syntax:
@import 'basscss-base-typography'; @import 'basscss-defaults';
To import modules relative to the parent file, use this syntax:
Import custom properties (variables) last. Just as with other CSS declarations, whatever is last in the source code is used.
@import 'basscss-utility-layout'; @import './variables';
Although Basscss is written in spec-compliant CSS4,
you can also incorporate it into an existing Sass project with the css-to-scss transpiled partials in the
basscss-sass repo. Be sure to include the variables file
basscss-sass/defaults before all other partials.
@import: 'basscss-sass/defaults'; @import: 'basscss-sass/utility-layout';
To override the default values, include your own variable definitions before Basscss.
// Custom variables @import: 'variables'; // Basscss @import: 'basscss-sass/defaults'; @import: 'basscss-sass/utility-layout';
Although Basscss’s individual modules are distributed through npm, the core package is available through Bower, which also contains the compiled CSS.
bower install basscss