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.
- 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
.containerstyle 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
yshorthand styles for the x- and y-axes.
- Margin utilities include
.mr-autofor added possibilities with flexbox layouts.
- Padding utilities now include
lshorthand styles for top, right, bottom, and left directions.
- The core modules are now tested with Karma. Run
npm testto see it in action.
- Each npm module now includes compiled CSS in the
- Optional modules are now consolidated into a single monorepo: basscss/addons
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:
btn-outlinestyles should either be imported separately or replaced with custom styles.
- When using the new basscss-forms module, replace instances of the
textarearespectively. Optionally use the
labelstyle for labels. Custom colors styles should be added to replace the older basscss-color-forms module.
table-lightstyle 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.
flex-growhas been removed. In many cases
flex-autocan replace the old
- For elements using
.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: noneat just one breakpoint. Adjust classes on elements using
xs-hide sm-hide md-hide.
sm-hide md-hide lg-hide.
lg-hideworks the same as in the previous module.