Get Started

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.6. For more details, checkout our releases page.

npm install baseweb

Download Compiled

Compiled contains all the expanded, minified and source map files for BaseWeb. These can be used simply by including them in your header.

Download

Download Source

Source contains all of the precompiled SCSS files of BaseWeb. You can use our build scripts to compile, or roll one of your own.

Download

Compiled 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.

  • dist/
    • css/
      • baseweb.css
      • baseweb.css.map
      • baseweb.min.css
      • baseweb.min.css.map
    • js/
      • baseweb.js
      • baseweb.min.js
    • icons/
<!-- BaseWeb styles -->
<link rel="stylesheet" href="css/baseweb.min.css">

The included JavaScript is currently only placeholder but can be used as starter files for writing jQuery scripts. You could copy and paste JS code examples from the documentation for components that require JS behavior. All scripts in the documentation require the latest version of jQuery.

<!-- 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>

BaseWeb Source

When downloading BaseWeb’s source directory, you’ll get all precompiled SCSS files and JavaScript files with utility and component scripts.

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.

  • scss/
    • core/
      • _colophon.scss
      • _functions.scss
      • _palette.scss
      • _settings.scss
      • _mixins.scss
      • _media.scss
      • _grid.scss
    • elements/
      • _base.scss
      • _typography.scss
      • _lists.scss
      • _tables.scss
      • _blockquotes.scss
      • _code.scss
      • _images.scss
      • _videos.scss
      • _rules.scss
      • _forms.scss
      • _buttons.scss
      • _icons.scss
      • _chips.scss
    • blocks/
      • _badges.scss
      • _breadcrumbs.scss
      • _button-groups.scss
      • _dropdowns.scss
      • _notices.scss
      • _offcanvas.scss
      • _tabs.scss
      • _tooltips.scss
    • custom/
      • _custom.scss
      • _overrides.scss
    • _baseweb-core.scss
    • _baseweb-elements.scss
    • _baseweb-blocks.scss
    • baseweb.scss
  • js/
    • _utility.js
    • _dismissible.js
    • _dropdowns.js
    • _offcanvas.js
    • _tabs.js
    • baseweb.js

Import Partials

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:

  1. _baseweb-core.scss
  2. _baseweb-elements.scss
  3. _baseweb-blocks.scss

The default 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”.

© 2018 . All rights reserved.