BaseWeb can be used a few different ways depending on what you need. The quickest way to get started is to download BaseWeb! BaseWeb is currently on version 3.0.5. For more details, checkout our releases page.
npm install baseweb
Compiled BaseWeb comes with all the expanded, minified and source map files you need to get started right away. You’ll have available all class based systems each component provides.
<!-- BaseWeb styles --> <link rel="stylesheet" href="css/baseweb.min.css">
<!-- jQuery CDN and local fallback --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script> <!-- BaseWeb scripts --> <script src="js/baseweb.min.js"></script>
To get started, you’ll need to setup a build environment or process that compiles SCSS into your production CSS. You could use BaseWeb’s build scripts (powered by Gulp) and adapt them to your own needs, or you can role your own using CodeKit, Grunt, Gulp or Jake to name a few.
All BaseWeb partials are routed through the
baseweb.scss file. Alternatively, you can also use import partials. It’s recommended that you include
_baseweb-core.scss at minimum and piecemeal elements and blocks as needed or use all three import partials to include everything BaseWeb has to offer. Import partials are as follows:
baseweb.scss file looks like this:
// Core [Required] @import "baseweb-core"; // Overrides @import "custom/overrides"; // Elements @import "baseweb-elements"; // Blocks @import "baseweb-blocks"; // Custom @import "custom/custom";
It’s important to not that
custom/overrides should be imported after core but before elements and block files. This ensures that you keep your custom framework overrides.
For information on how to leverage BaseWeb and still be able to customize everything you need, check out “Reusing Design Systems with Yarn and Gulp”.