@carbon/grid - npm Package Compare versions

Comparing version 0.0.1-alpha.24 to 0.0.1-alpha.25

package.json

		{
		"name": "@carbon/grid",
		"version": "0.0.1-alpha.24",
		"description": "Grid for digital and software products using the Carbon Design System",
		"version": "0.0.1-alpha.25",
		"license": "Apache-2.0",
		@@ -22,4 +23,4 @@ "repository": "https://github.com/IBM/carbon-elements/tree/master/packages/grid",
		"dependencies": {
		"@carbon/import-once": "0.0.1-alpha.24",
		"@carbon/layout": "0.0.1-alpha.24"
		"@carbon/import-once": "0.0.1-alpha.25",
		"@carbon/layout": "0.0.1-alpha.25"
		},
		@@ -26,0 +27,0 @@ "eyeglass": {

README.md

		@@ -1,8 +0,9 @@
		# `@carbon/grid`
		# @carbon/grid

		> Grid for digital and software products using the Carbon Design System.
		> Grid for digital and software products using the Carbon Design System

		## Getting Started
		## Getting started

		Run the following command using [npm](https://www.npmjs.com/):
		To install `@carbon/grid` in your project, you will need to run the
		following command using [npm](https://www.npmjs.com/):

		@@ -13,4 +14,4 @@ ```bash

		If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
		instead:
		If you prefer [Yarn](https://yarnpkg.com/en/), use the following
		command instead:

		@@ -23,13 +24,13 @@ ```bash

		`@carbon/grid` has three primitive class types to use in order to structure your
		application. They include:
		`@carbon/grid` has three primitive class types to use in order to
		structure your application. They include:

		- `bx--grid`, defines the overall grid context and sets some useful attributes
		like width and margin
		- `bx--grid`, defines the overall grid context and sets some useful
		attributes like width and margin
		- `bx--row`, defines a row of items in a grid
		- `bx--col`, used to define individual columns

		You can use a combination of these classes to build a layout. For example, if we
		wanted a 4 column layout for a small breakpoint we could use the following
		markup:
		You can use a combination of these classes to build a layout. For
		example, if we wanted a 4 column layout for a small breakpoint we
		could use the following markup:

		@@ -47,10 +48,10 @@ ```html

		While this layout can work for some grid usage scenarios, we probably will want
		more control over how many columns our layout will span at each given
		breakpoint.
		While this layout can work for some grid usage scenarios, we probably
		will want more control over how many columns our layout will span at
		each given breakpoint.

		By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`.
		There are five breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each
		one in combination with a column to specify the number of columns to span at a
		given breakpoint. For example, we could rewrite the above example to be:
		By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`. There are five breakpoints: `sm`, `md`, `lg`, `xlg`,
		and `max`. You can use each one in combination with a column to
		specify the number of columns to span at a given breakpoint. For
		example, we could rewrite the above example to be:

		@@ -68,21 +69,23 @@ ```html

		The `.bx--col-sm-1` class names tells us that this `<div>` should only span one
		column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
		layout will still take up a percentage of the overall width.
		The `.bx--col-sm-1` class names tells us that this `<div>` should only
		span one column at our `sm` breakpoint. By default, as we scale beyond
		the breakpoint the layout will still take up a percentage of the
		overall width.

		## Class reference
		## 📚 Examples

		\| Class name \| Description \|
		\| --------------------------------- \| ----------------------------------------------------------------------------------------------------------- \|
		\| `.bx--grid` \| Use at the top-level of your project to define a grid for a section of the page \|
		\| `.bx--grid--bleed` \| Collapse all the gutters in the layout. Useful alongside `.bx--grid--padding` \|
		\| `.bx--grid--padding` \| Apply padding to the content of every column in the layout \|
		\| `.bx--grid--hang` \| Tell the grid to drop the left (or right) gutter from the overall layout. Useful for hanging type \|
		\| `.bx--row` \| Define a row inside of a grid. \|
		\| `.bx--col`, `.bx--col--auto` \| Define a column that spans as much width as available \|
		\| `.bx--col-<breakpoint>-<span>` \| Define a column at a breakpoint that spans the given number of columns \|
		\| `.bx--offset-<breakpoint>-<span>` \| Define an column at a breakpoint that spans the given number of columns. Can be used on a non-empty column. \|
		If you're looking for more examples on how to use `@carbon/grid`, we
		have some examples that you can check out:

		## 🤲 Contributing
		- [Basic](./examples/basic)

		To learn more about how to contribute, look [here](/.github/CONTRIBUTING.md)!
		## 🙌 Contributing

		We're always looking for contributors to help us fix bugs, build new
		features, or help us improve the project documentation. If you're
		interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)
		! 👀

		## 📝 License

		Licensed under the [Apache 2.0 License](/LICENSE).

scss/_col.scss