Socket
Socket
Sign inDemoInstall

@carbon/styles

Package Overview
Dependencies
Maintainers
9
Versions
184
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@carbon/styles - npm Package Compare versions

Comparing version 0.16.0-rc.0 to 0.16.0

scss/grid/_config.scss

47

docs/sass.md

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc