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.