A front-end development framework built to help make your next project:

npm install baseweb

What's the scuttlebutt?

BaseWeb is the passion project of a UI designer and front-end developer. The goal is to take care of the boring stuff and let you focus on building an interface that's sexy as hell.


It's a Framework

Build on top of beautiful default styles and components. BaseWeb provides a starting point for your website or application that will make development faster and easier.

Learn More


It's a Library

Written to give you full control of production output, BaseWeb makes available all mixins and functions with the option to omit default classes and styles.

Learn More


It's Flexible

BaseWeb is built mobile first, starting from the grid system to each component block. Using media queries to deliver the best user experience regardless of device.

Learn More

Take a peek under the hood

This shit is organized. BaseWeb's architeture is designed to be easy to maintain and expand. Go ahead, take a look and see what I mean.

  • scss/
    • settings/
      • _palette.scss
      • _palette-social.scss
      • _media.scss
      • _grid.scss
      • _typography.scss
      • _global.scss
    • core/
      • _colophon.scss
      • _functions.scss
      • _mixins.scss
      • _media.scss
      • _grid.scss
    • elements/
      • _base.scss
      • _typography.scss
      • _lists.scss
      • _blockquotes.scss
      • _code.scss
      • _tables.scss
      • _images.scss
      • _rules.scss
      • _forms.scss
      • _buttons.scss
      • _icons.scss
      • _videos.scss
    • blocks/
      • _button-groups.scss
      • _notices.scss
      • _breadcrumbs.scss
      • _dropdowns.scss
      • _tabs.scss
      • _offcanvas.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
    • _tabs.js
    • _offcanvas.js
    • baseweb.js
  • Settings

    This is where we store all of our global project variables and maps. Variables and maps that are used in core modules, multiple element and/or block modules go here.

  • Core

    This is the heart and soul of BaseWeb. At a bear minimum, the Settings and Core files are required for BaseWeb to function. Core files do not output styles directly but are a collection of global functions and mixins.

  • Elements

    Elements refer to individual components of an HTML document. They're the backbone of any HTML documents and have inherit semantic meaning. BaseWeb styles these elements here and makes them easy to customize and enhance.

  • Blocks

    Blocks are a group of Elements that become an independent component. A block can be simple or compound (meaning it contains other blocks). A Block is contextually independent, but can be modified either through an internal modifier or parent block.

  • Custom

    The Custom directory is a place to store all of your project specific code. By default, BaseWeb comes with an _override.scs file for setting overrides and _custom.scss file that will output a generic mobile first grid system.

  • JavaScript

    This is where all the component JavaScript lives. Any block that requires some kind of JavaScript behavior will appear here and initiated from baseweb.js where you can change default settings.

I won't be held responsible...

if you end up loving the shit out of BaseWeb. I'm not saying it's going to save your marriage... or am I? Here are some links to get you started.