github dribbble twitter facebook google arrow-up arrow-down arrow-left arrow-right

BaseWeb is a fresh SCSS front-end development framework and library built to help keep your projects simple, organized and responsive.

How Does it Work?

BaseWeb was designed to take advantage of the most current techniques and best practices for your projects. The goal is to give designers control of output while speeding up development.


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 Look Inside

The key to any project is organization. BaseWeb's architeture is designed to be easy to maintain and expand. Take a peak inside and see how BaseWeb's files are structured.

├── settings/
│   ├── _global.scss
│   ├── _grid.scss
│   ├── _media.scss
│   ├── _palette.scss
│   └── _typography.scss
├── core/
│   ├── _functions.scss
│   ├── _grid.scss
│   ├── _media.scss
│   └── _mixins.scss
├── elements/
│   ├── _base.scss
│   ├── _blockquotes.scss
│   ├── _buttons.scss
│   ├── _code.scss
│   ├── _forms.scss
│   ├── _icons.scss
│   ├── _images.scss
│   ├── _lists.scss
│   ├── _rules.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   └── _videos.scss
├── blocks/
│   ├── _breadcrumbs.scss
│   ├── _button-groups.scss
│   ├── _dropdowns.scss
│   ├── _notices.scss
│   ├── _tabs.scss
│   └── _off-canvas.scss
├── custom/
│   ├── _custom.scss
│   └── _overrides.scss
├── _colophon.scss
└── baseweb.scss
  • 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. Elements are 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.

Check It Out

See if BaseWeb can help your workflow. Try it out on your next project!

Get Started Download