Inspired by discussions with the community, Basscss v8 is a simplification of styles and a narrowing of scope based on recent trends in front-end web development – particularly component-based UI approaches – and the unique features that Basscss provides. The core module is now just 2.2 KB minified and gzipped with a focus on widely applicable typography and layout utilities that can be added to virtually any existing style guide or framework.

Basscss v8 should be considered feature complete – that is all essential layout and typography utilities are, for the most part, covered. There may be additional minor features and optional modules added in the future, but this release is meant to be more stable in regards to features and naming conventions than previous releases.

Changes

• Breaking All base element styles (including body, typography, form, and table styles) have been removed in favor of using simpler resets or user-defined styles. To help with transitioning, the new basscss-basic package has been put together for use as-is or as a starting point for custom base styles.
• Breaking The btn, btn-primary, and btn-outline modules have been removed from the core package. The are optionally available in basscss-addons
• Breaking The color-forms module has been removed from the core package. A new optional basscss-forms module is available as a replacement.
• Breaking All color styles have been removed from the core in favor of user-defined styles and more discrete color style modules. Several color modules are available in basscss-addons or checkout basscss/themes for inspiration.
• Breaking The flex-object module is now replaced with basscss-flexbox, a more generic and more powerful suite of utilities.
• Breaking The .container style has been removed from basscss-grid and is replaced with max-width utilities in basscss-layout.
• Breaking The basscss-border module no longer includes border-color styles. By default borders inherit foreground color. To adjust the color, use border-color utilities.
• Breaking The basscss-responsive-states module has been replaced with the basscss-hide module.
• All custom properties and custom media queries are now withing each individual module and basscss-defaults is deprecated.
• Margin utilities now include x and y shorthand styles for the x- and y-axes.
• Margin utilities include .ml-auto and .mr-auto for added possibilities with flexbox layouts.
• Padding utilities now include t, r, b, and l shorthand styles for top, right, bottom, and left directions.

Other

• The core modules are now tested with Karma. Run npm test to see it in action.
• Each npm module now includes compiled CSS in the css folder.
• Optional modules are now consolidated into a single monorepo: basscss/addons

Migrating

For any module that has been removed from the core, they are still available from basscss/addons. To continue using these modules, import them in addition to the core module.

• Base element styles should be replaced with custom styles or something like basscss-basic. The following base elements might be affected: body, img, svg, input, select, textarea, fieldset, label, table, th, td, h1, h2, h3, h4, h5, h6, p, dl, ol, ul, pre, samp, code, a, and hr
• btn, btn-primary, and btn-outline styles should either be imported separately or replaced with custom styles.
• When using the new basscss-forms module, replace instances of the field class with input, select, and textarea respectively. Optionally use the label style for labels. Custom colors styles should be added to replace the older basscss-color-forms module.
• The table-light style has been removed. Replace it with custom styles.
• For color styles, import additional modules or add custom styles.
• The new basscss-flexbox module uses a different naming convention from the flex-object module to be more in-line with property and value names.
  • Replace flex-center with items-center.
  • Replace flex-baseline with items-baseline.
  • Replace flex-stretch with items-stretch.
  • Replace flex-start with items-start.
  • Replace flex-end with items-end.
  • Replace flex-justify with justify-between
  • flex-grow has been removed. In many cases flex-auto can replace the old flex-grow style.
  • Replace flex-first with order-0.
  • Replace flex-last with order-last.
• Replace container with max-width-4 mx-auto.
• For elements using .border, .border-top, .border-right, .border-bottom, or .border-left, add an additional border-color class and custom style where the border color differs from foreground color.
• The basscss-hide module works differently from the older basscss-responsive-states module. Each style in the new module sets display: none at just one breakpoint. Adjust classes on elements using .sm-show, .md-show, .lg-show, .sm-hide, and .md-hide.
  • Replace sm-show with xs-hide.
  • Replace md-show with xs-hide sm-hide.
  • Replace lg-show with xs-hide sm-hide md-hide.
  • Replace sm-hide with sm-hide md-hide lg-hide.
  • Replace md-hide with md-hide lg-hide.
  • lg-hide works the same as in the previous module.

Basscss 7 is a simplification and realignment of design principles intended to better fit in with component-base architectures. Version 7 is less opinionated and more flexible than ever. With 19% fewer rules and 27% fewer declarations, version 7 is just 3.32KB gzipped – 13% smaller than before.

New

• Simpler buttons with btn, btn-primary, and btn-outline modules
• Vertical alignment with the align module
• Utility type-scale module has been separated from base-typography
• .field-light class is now .field
• .border-box utility
• .p0 utility
• .border-none utility

Removes the following styles

• Base font-size for <p>, <dl>, <ol>, and <ul>
• Base <hr> margin styles
• .fieldset-reset – use .p0, .m0, and .border-none instead
• .full-width – use .col-12 instead
• .half-width – use .col-6 instead

Modules removed

Note: modules are still optionally available through npm

• progress - .progress
• input range - .range-light
• base-buttons - .button
• button-sizes - .button-big, .button-small, and .button-narrow
• button-outline - .button-outline
• button-transparent - .button-transparent
• background-images - .bg-cover, .bg-contain, .bg-center, .bg-top, .bg-right, .bg-bottom, .bg-left
• color-forms-dark - .field-dark
• border-colors - .border-black, .border-gray, etc.

Basscss now has it's own GitHub organization, and this repo has been reorganized and cleaned up.

Changes

• The public documentation site is now here: https://github.com/basscss/basscss.github.io
• Transpiled Sass partials are now in their own repo: https://github.com/basscss/basscss.github.io
• Some modules have been renamed for better consistency.
• Minor visual bug fixes for button-transparent and button-outline modules.

Basscss now is more colorful and more flexible with the flex-object flexbox layout module and new extensible button styles.

New

• flex-object flexbox layout module included by default
• New color palette from mrmrs/colors, with a total of 17 colors and 4 background darken utilities
• Border color utilities to alter the default border color
• Default .button color styles in basscss-color-base, extensible with color utilities
• New button-outline module, extensible with color utilities
• New button-transparent module, extensible with color utilities
• ui-utility-button-sizes included by default
• background-images module included by default
• .muted utility to set opacity to .5

Breaking Changes

• Deprecated:
  • table-object
  • button-blue
  • button-blue-outline
  • button-red
  • button-gray
  • button-light-gray
• Changed:
  • basscss-colors module (e.g. dark-gray, mid-gray, light-gray)

Migrating to v5

Deprecated modules are still available through npm for custom builds. To use the default styles new in v5, do the following:

Table Object

Replace instances of the table object with flex-object utilities or clearfix/float solutions.

Buttons

• Replace .button-blue with .button.
• Replace .button-blue-outline with .button-outline.blue.
• Replace .button-red with .button.bg-red.
• Replace .button-gray with .button.bg-gray.
• Replace .button-light-gray with .button.bg-silver.

Colors

The entire color palette has been replaced with mrmrs/colors. For backwards compatibility, .dark-gray, .mid-gray, and .light-gray are mapped to .black, gray, and .silver, respectively, but will be deprecated in a future version. .lighter-gray has been removed. .white has not changed.

The default values for .blue, .green, .yellow, and .red have changed.

The following colors have also been added:

• .aqua
• .navy
• .teal
• .olive
• .lime
• .orange
• .fuchsia
• .purple
• .maroon

What's New

• More flexible styles and variables for buttons, form elements, and tables
• New button-light-gray style
• Removed UI Utilities module from core – now available as optional modules
• Flatter specificity graph
• Small adjustments to default colors

New in the Docs

• Customize web app to build custom stylesheets in the browser
• More documentation for creating custom builds
• Tips & Tricks Guide
• Updated documentation for flex-object module
• Documentation for each individual module in /docs/modules

Utilities for UI elements