@carbon/styles
Advanced tools
Comparing version 0.16.0-rc.0 to 0.16.0
@@ -125,5 +125,6 @@ # `@carbon/styles` | ||
| Import | Filepath | | ||
| :--------------------------------- | :---------------- | | ||
| `@use '@carbon/styles/scss/grid';` | `scss/_grid.scss` | | ||
| Import | Filepath | | ||
| :----------------------------------------- | :------------------------ | | ||
| `@use '@carbon/styles/scss/grid';` | `scss/grid/_index.scss` | | ||
| `@use '@carbon/styles/scss/grid/flexbox';` | `scss/grid/_flexbox.scss` | | ||
@@ -134,4 +135,4 @@ ### Using the grid | ||
[`@carbon/grid`](https://github.com/carbon-design-system/carbon/tree/main/packages/grid) | ||
package. The full source for Carbon grid styles can be found there alongside | ||
more comprehensive documentation on package contents, configuration, and usage. | ||
package. For full documentation, visit the | ||
[Sass Documentation](../../grid/docs/sass.md) for the package. | ||
@@ -142,9 +143,25 @@ To use the grid via `@carbon/styles`, it must be brought in directly or the grid | ||
```scss | ||
/* All the grid styles are included through this central entrypoint */ | ||
// All the grid styles are included through this central entrypoint | ||
@use '@carbon/styles'; | ||
/* Alternatively, the grid styles can be brought in on their own */ | ||
// Alternatively, the grid styles can be brought in on their own | ||
@use '@carbon/styles/scss/grid'; | ||
``` | ||
By default, the emitted grid will be a CSS Grid based implementation. If you | ||
prefer to use flexbox version, you can configure the package by writing the | ||
following: | ||
```scss | ||
@use '@carbon/styles' with ( | ||
$use-flexbox-grid: true, | ||
); | ||
``` | ||
Or you can import the flexbox grid directly: | ||
```scss | ||
@use '@carbon/styles/scss/grid/flexbox'; | ||
``` | ||
### Classes provided | ||
@@ -178,18 +195,2 @@ | ||
### Grid Mixins | ||
In the event that you'd like to configure your own classes for portions of the | ||
grid, there are a few mixins that can be used. | ||
- `css-grid()` provides the base grid definition | ||
- `subgrid()` provides the subgrid definition | ||
- `carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios)` generates the | ||
CSS classname utilities for the aspect ratios | ||
```scss | ||
.custom-grid-class { | ||
@include css-grid(); | ||
} | ||
``` | ||
## Motion | ||
@@ -196,0 +197,0 @@ |
{ | ||
"name": "@carbon/styles", | ||
"description": "Styles for the Carbon Design System", | ||
"version": "0.16.0-rc.0", | ||
"version": "0.16.0", | ||
"license": "Apache-2.0", | ||
@@ -25,7 +25,7 @@ "repository": { | ||
"@carbon/feature-flags": "^0.7.0", | ||
"@carbon/grid": "^10.42.0", | ||
"@carbon/grid": "^10.43.0", | ||
"@carbon/layout": "^10.37.0", | ||
"@carbon/motion": "^10.29.0", | ||
"@carbon/themes": "^10.52.0", | ||
"@carbon/type": "^10.42.0", | ||
"@carbon/themes": "^10.53.0", | ||
"@carbon/type": "^10.43.0", | ||
"@ibm/plex": "6.0.0-next.6" | ||
@@ -37,3 +37,3 @@ }, | ||
}, | ||
"gitHead": "4cb0cf93101e8a4a6a67a950518793e006ed8a07" | ||
"gitHead": "05b57e9181903cb87173d48a0635691a2e942e30" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
601737
190
Updated@carbon/grid@^10.43.0
Updated@carbon/themes@^10.53.0
Updated@carbon/type@^10.43.0