diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 84992eae08..b3e7863d3f 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -41,6 +41,20 @@ Technically, it means that you can get rid of the following things: - `orange-helvetica.*.css` file (default, RTL, or minified version). - If you were customizing your Sass compilation, you can remove the `@import "orange-helvetica";` line from your Sass files if it was there. +## Layout + +- Breaking Responsive breakpoints have changed: + - `2xs` and `3xl` have been added. + - `xxl` has been renamed to `2xl`. + - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}). + - The default container to use is now `.container-fluid` associated to `.container-max-width` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}). + - Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you. + + All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints. + +- Info `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`. +- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled. + ## Components ### Close button @@ -53,40 +67,26 @@ Technically, it means that you can get rid of the following things: - Warning `form-star-rating()` mixin has been removed as it was deprecated in Boosted v5.3.2. -## Layout - -- Breaking Responsive breakpoints have changed: - - `xxl` has been renamed `2xl`. - - `2xs` and `3xl` have been added. - - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}). - - The default container to use is now `.container-fluid` associated to `.container-max-width` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}). - - Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you. - - All responsive classes, helpers and utilities have been changed accordingly to the new breakpoints. - -- Info `.container` and `.container-{breakpoint}` classes can still be available when $enable-bootstrap-compatibility is on. -- Info `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when $enable-bootstrap-compatibility is on. - ## Helpers ### Position -- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. +- Breaking Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`. - New Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`. ## Utilities ### Border -- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. +- Breaking Border operative utilities have been removed: `.border-0`, `.border-top-0`, `.border-bottom-0`, `.border-start-0`, and `.border-end-0`. Please check the new [border values]({{< docsref "/utilities/borders#border" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Border operative utilities: `.border-none`, `.border-top-none`, `.border-bottom-none`, `.border-start-none`, and `.border-end-none`. -- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]({{< docsref "/utilities/borders#width" >}}) directly in the documentation and adapt your websites to them. +- Breaking Border width utilities have been removed: `.border-0`, `.border-1`, `.border-2`, `.border-3`, `.border-4` and `.border-5`. Please check the new [border values]({{< docsref "/utilities/borders#width" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`. -- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]({{< docsref "/utilities/borders#radius" >}}) directly in the documentation and adapt your websites to them. Removed utilities are: +- Breaking Border radius utilities with many sizes have been removed. Please check the new [border values]({{< docsref "/utilities/borders#radius" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`: - 0: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`. - 1: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`. - 2: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`. @@ -102,48 +102,41 @@ Technically, it means that you can get rid of the following things: - New Border style utilities: `.border-drag`. -- Info `.border-{|top|bottom|start|end}-0`, `.border-{0|1|2|3|4|5}` and `.rounded-{|top|bottom|start|end}-{0|1|2|3|4|5}` utilities can still be available when $enable-bootstrap-compatibility is on. - -#### Display +### Display -- Breaking `.d-xxl-{value}` responsive display utilities have been replaced by `.d-2xl-{value}` utilities. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Breaking `.d-xxl-{value}` responsive display utility has been replaced by `.d-2xl-{value}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have it using `$enable-bootstrap-compatibility`. - New `.d-xs-{value}` and `.d-3xl-{value}` responsive display utilities have been added. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). -- Info `.d-xxl-{value}` responsive display utilities can still be available when $enable-bootstrap-compatibility is on. -#### Flex +### Flex -- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Breaking `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have them using `$enable-bootstrap-compatibility`. - New `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). -- Info `xxl` responsive flex utilities can still be available when $enable-bootstrap-compatibility is on. -#### Float +### Float -- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Breaking `xxl` responsive float utilities have been replaced by `2xl` utilities: `.float-xxl-{start|end|none}` utilities have been replaced by `.float-2xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have it using `$enable-bootstrap-compatibility`. - New `xs` and `3xl` responsive float utilities have been added: `.float-xs-{start|end|none}` and `.float-3xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). -- Info `xxl` responsive float utilities can still be available when $enable-bootstrap-compatibility is on. -#### Object fit +### Object fit -- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). +- Breaking `xxl` responsive object fit utilities have been replaced by `2xl` utilities: `.object-fit-xxl-{contain|cover|fill|scale|none}` utilities have been replaced by ``.object-fit-2xl-{contain|cover|fill|scale|none}``. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have them using `$enable-bootstrap-compatibility`. - New `xs` and `3xl` responsive object fit utilities have been added: `.object-fit-xs-{contain|cover|fill|scale|none}` and `.object-fit-3xl-{contain|cover|fill|scale|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). - Info `xxl` responsive object fit utilities can still be available when $enable-bootstrap-compatibility is on. ### Opacity -- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. +- Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. -- Info `.opacity-{0|25|50|75|100}` utilities can still be available when $enable-bootstrap-compatibility is on. ### Shadow -- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. +- Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Shadows utilities: `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized` and `shadow-sticky-navigation-scrolled`. -- Info `.shadow-{|sm|lg}` utilities can still be available when $enable-bootstrap-compatibility is on. ## Examples -- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). +- New New [Grid system example]({{< docsref "/examples/grid-system" >}}). ## CSS and Sass variables @@ -259,13 +252,15 @@ Technically, it means that you can get rid of the following things:
  • $ouds-grid-2xs-margin
  • $ouds-grid-3xl-column-gap
  • $ouds-grid-3xl-margin
    • -
  • $ouds-grid-3xl-max-width
  • $ouds-grid-3xl-min-width
  • $ouds-grid-column-gap-100
  • $ouds-grid-column-gap-200
  • $ouds-grid-column-gap-400
  • $ouds-grid-column-gap-600
  • $ouds-grid-column-gap-800
    • +
  • $ouds-grid-lg-column-gap
    • +
  • $ouds-grid-lg-margin
    • +
  • $ouds-grid-lg-min-width
  • $ouds-grid-margin-100
  • $ouds-grid-margin-1100
  • $ouds-grid-margin-1700
    • @@ -274,8 +269,7 @@ Technically, it means that you can get rid of the following things:
  • $ouds-grid-margin-400
  • $ouds-grid-margin-500
  • $ouds-grid-margin-700
    • -
  • $ouds-grid-max-width-650
    • -
  • $ouds-grid-max-width-800
    • +
  • $ouds-grid-max-width
  • $ouds-grid-md-column-gap
  • $ouds-grid-md-margin
  • $ouds-grid-md-min-width
    • @@ -286,19 +280,15 @@ Technically, it means that you can get rid of the following things:
  • $ouds-grid-min-width-600
  • $ouds-grid-min-width-700
  • $ouds-grid-min-width-800
    • -
  • $ouds-grid-lg-column-gap
    • -
  • $ouds-grid-lg-margin
    • -
  • $ouds-grid-lg-min-width
  • $ouds-grid-sm-column-gap
  • $ouds-grid-sm-margin
  • $ouds-grid-sm-min-width
    • -
  • $ouds-grid-xl-column-gap
    • -
  • $ouds-grid-xl-margin
    • -
  • $ouds-grid-xl-min-width
  • $ouds-grid-xs-column-gap
  • $ouds-grid-xs-margin
  • $ouds-grid-xs-min-width
    • -
  • $ouds-grid-max-width
    • +
  • $ouds-grid-xl-column-gap
    • +
  • $ouds-grid-xl-margin
    • +
  • $ouds-grid-xl-min-width
  • $ouds-opacity-0
  • $ouds-opacity-100
  • $ouds-opacity-300
    • @@ -317,8 +307,6 @@ Technically, it means that you can get rid of the following things: -
    New Sass maps:
    +-
    + New Sass mixins: + +
    + -
    New keys in $utilities map:
    -
    - Warning Dropped deprecated Sass variables: + Warning Dropped Sass variables:
    -
    - Warning Dropped deprecated CSS variables: + Warning Dropped CSS variables:
    +-
    + Warning Dropped Sass mixins: + + -
    Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on:
    -- Warning OUDS Web changes the signature of `make-row($gutter, $gutter-sm)` to have `make-row($gutter)`. +- Warning Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index e3fe8a3036..0266f6b606 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -13,13 +13,14 @@ toc: true ### Layout -- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl` and `3xl`. +- New Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`. - Container class: `.container-fluid` - Limiting class: `.container-max-width` + - Row system with `.row` + - Column system with classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` - Row columns classes: `.row-cols-{number}` - - Column classes: `.col-{number}`, `.col-{breakpoint}-{number}`, and `.offset-{breakpoint}-{number}` -- New Responsive css-grid classes: `.g-col-{breakpoint}-{number}`. +New Responsive CSS grid classes: `.g-col-{breakpoint}-{number}`. ### Helpers @@ -29,6 +30,10 @@ toc: true ### Utilities +#### API + +- New The `responsive` option is now available in the API to indicate if responsive classes should be generated. + #### Border - New Border operative utilities: `.border`, `.border-none`, `.border-top`, `.border-top-none`, `.border-bottom`, `.border-bottom-none`, `.border-start`, `.border-start-none`, `.border-end` and `.border-end-none`. @@ -46,20 +51,20 @@ toc: true - New Border style utilities: `.border-drag`. -#### Display +### Display - New Responsive display utilities: `.d-{breakpoint}-{value}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. -#### Flex +### Flex - New Responsive flex utilities where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`: `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`. -#### Float +### Float - New Responsive float utilities: `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. -#### Object fit +### Object fit - New Responsive object fit utilities: `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. @@ -74,9 +79,9 @@ toc: true ### Examples -- New New OUDS Web [example for the grids]({{< docsref "/examples/grid" >}}). +- New New [Grid example]({{< docsref "/examples/grid" >}}). -- New New OUDS Web [example for the usable grids]({{< docsref "/examples/grid-system" >}}). +- New New [Grid system example]({{< docsref "/examples/grid-system" >}}). ### CSS and Sass variables @@ -92,9 +97,19 @@ toc: true ```
    +- New `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). + -
    New Sass variables:
    +-
    + New Sass mixins: +
    --
    - New CSS variable: - -
    - -
    Breaking keys in $utilities map only available when $enable-bootstrap-compatibility is on: