diff --git a/docs/source/grid/_block-groups.md b/docs/source/grid/_block-groups.md index 263b9eaf5..806b9a6a0 100644 --- a/docs/source/grid/_block-groups.md +++ b/docs/source/grid/_block-groups.md @@ -1,5 +1,5 @@ ## Block Groups -Block groups are designed for quickly creating gridded content, like a tile pattern or image gallery. Block groups are percentage based, so they can subdivide columns. Block groups have the ability to break the regular grid system, and thus should be used sparingly and with thought. +Block groups are designed for quickly creating gridded content, such as a tile pattern or image gallery. Block groups are percentage based, so they can subdivide columns. Block groups have the ability to break the regular grid system, and thus should be used sparingly and with thought. -[View the example](../page-layouts/grid#block-groups) \ No newline at end of file +[View the example](../page-layouts/grid#block-groups) diff --git a/docs/source/grid/_columns.md b/docs/source/grid/_columns.md index a380c6f12..c083da0c4 100644 --- a/docs/source/grid/_columns.md +++ b/docs/source/grid/_columns.md @@ -1,7 +1,9 @@ ## Columns -A column is a constant unit of measure. The width of a column is dynamic, but always between a fixed range. Columns will never get too large or or too small. As the viewport gets smaller, and the columns near the bottom of their range, the Calcite Grid System will simply put less columns on the page. By default, large screens hold 24 columns, medium tablet-sized screens hold 12, and phone-sized screens hold 6. The grid will fold columns at these breakpoints. That means an element that is 3 columns wide will always be 3 columns wide, no matter how big or small the screen. +A column is a constant unit of measurement. The width of a column is dynamic, but always between a fixed range. Columns will never get too large or too small. As the viewport gets smaller the Calcite Grid System will simply put less columns on the page. -On large screens, 3 columns out of 24 is proportionally a small peice of screen real estate. On Phones, the Grid will leave the element at 3 columns wide -- only now it's proportionally more real estate, as 3/6 columns is more significant than 3/24. +By default, large screens hold 24 columns, medium tablet-sized screens hold 12, and phone-sized screens hold 6. The grid will fold columns at these breakpoints. That means an element that is 3 columns wide will always be 3 columns wide, no matter how big or small the screen. -[View the example](../page-layouts/grid#columns) \ No newline at end of file +On large screens, 3 columns out of 24 is proportionally a small peice of screen real estate. On Phones, the Grid will leave the element at 3 columns wide -- proportionally more real estate, as 3/6 columns is more significant than 3/24. + +[View the example](../page-layouts/grid#columns) diff --git a/docs/source/grid/_configuration.md b/docs/source/grid/_configuration.md index 66372162e..32a1f8c10 100644 --- a/docs/source/grid/_configuration.md +++ b/docs/source/grid/_configuration.md @@ -1,6 +1,6 @@ ## Configuration -If you are using Calcite Web as a SASS library, you can customize the grid with SASS variables. Below are the different settings you have access to and their default values: +If you are using Calcite Web as a Sass library, you can customize the grid with Sass variables. Below are the different settings you have access to and their default values: | Variable | Default | Description | | --------------------------- | ------------------ | ------------------------------------------------- | @@ -23,7 +23,7 @@ If you are using Calcite Web as a SASS library, you can customize the grid with | `$vertical-range` | 6 | How many leader and trailer classes to generate | -In your own project, you can override these values to create a custom, project-specific grid. For example, to use a 16 column grid instead of the default 24 columns, you would set the `$large-column-count` variable after importing the library: +You can override these values to create a custom, project-specific grid in your own project. For example, to use a 16 column grid instead of the default 24 columns, you would set the `$large-column-count` variable after importing the library: ``` @import calcite-web; diff --git a/docs/source/grid/_container.md b/docs/source/grid/_container.md index f45385560..0be5c7566 100644 --- a/docs/source/grid/_container.md +++ b/docs/source/grid/_container.md @@ -2,7 +2,7 @@ The `.container` class is required to contain the grid. Using the [column](#columns) classes without them being nested in a containing `div` will cause unexpected results. -The container class applies a max width to the content it contains, and handles the columns relationship with the viewport window, preventing collusions with scroll bars or other exciting bugs. +The container class applies a max width to the content it contains and handles the column relationship with the viewport window, preventing collisions with scroll bars or other exciting bugs. ```html
@@ -10,4 +10,4 @@ The container class applies a max width to the content it contains, and handles
Contain the Columns
-``` \ No newline at end of file +``` diff --git a/docs/source/grid/_inline.md b/docs/source/grid/_inline.md index 58e7f9cc9..f9102af2e 100644 --- a/docs/source/grid/_inline.md +++ b/docs/source/grid/_inline.md @@ -1,3 +1,3 @@ ## Inline -Adds `display: inline-block` to element. \ No newline at end of file +Adds `display: inline-block` to an element. diff --git a/docs/source/grid/_nested-columns.md b/docs/source/grid/_nested-columns.md index 3cbd5c5cd..a6092aa26 100644 --- a/docs/source/grid/_nested-columns.md +++ b/docs/source/grid/_nested-columns.md @@ -1,9 +1,9 @@ ## Nested Columns -Contrary to other flexible-width grid systems, Calcite Grid columns do not change behavior when nested. Because a column is a constant measurement relative the size of the viewport, nested columns still span the same width as their non-nested counterparts. An element with `.column-6` nested within an element with `.column-12` is the same size as an un-nested `.column-6`. Further, clearing of the column-gutter is taken care of for you with `:first-child` and `:last-child` psuedo-selectors on all column classes. +Contrary to other flexible-width grid systems, Calcite Grid columns do not change behavior when nested. Because a column is a constant measurement relative to the size of the viewport, nested columns still span the same width as their non-nested counterparts. An element with `.column-6` nested within an element with `.column-12` is the same size as an un-nested `.column-6`. Further, clearing of the column-gutter is automatically done for you with `:first-child` and `:last-child` psuedo-selectors on all column classes. Column-folding behavior is almost entirely automatic. The only exception is gutter clearing behaviors on deeply nested items after column folding occurs - in some situations we can not know what columns are now first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing `first-column` classes, along with `tablet-first-column` and `phone-first-column`. -In this example, the more transparent the blue, the deeper the column is nested. There are four levels of nesting in this example. +There are four levels of nesting in this example, the more transparent the blue, the deeper the column is nested. -[View the example](../page-layouts/grid#nested-columns) \ No newline at end of file +[View the example](../page-layouts/grid#nested-columns) diff --git a/docs/source/grid/_overview.md b/docs/source/grid/_overview.md index 1dc08faf6..396b4aaa3 100644 --- a/docs/source/grid/_overview.md +++ b/docs/source/grid/_overview.md @@ -1,11 +1,11 @@

Grid

-The Calcite Grid System includes a full, responsive, and configurable grid with columns and a container and also a 'Block Group' grid. The main grid is different from standard css grid systems in two key ways: +The Calcite Grid System includes a full, responsive, and configurable grid with columns, a container, and a 'Block Group' grid. The main grid is different from standard css grid systems in two key ways: 1. Column widths are defined by the viewport size rather than percentage of their containers. 2. Built-in smart defaults for responsive sizing puts less columns across the screen at smaller sizes, rather than smaller columns. -These two principles mean that a column becomes standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it. +These two principles mean that a column becomes a standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it. ### The Grid diff --git a/docs/source/grid/_scroll-show-and-hide.md b/docs/source/grid/_scroll-show-and-hide.md index 3635d7e51..036cd8000 100644 --- a/docs/source/grid/_scroll-show-and-hide.md +++ b/docs/source/grid/_scroll-show-and-hide.md @@ -1,3 +1,3 @@ ## Scroll Show and Hide -Some layouts call for elements to appear or disapear as the user scrolls down the page. An element with the `scroll-show` class will appear when it reaches a point specified by the `data-top=x` attribute, appearing when it comes within the given value of the top of the screen. \ No newline at end of file +Some layouts call for elements to appear or disappear as the user scrolls down the page. An element with the `scroll-show` class will appear when it reaches a point specified by the `data-top=x` attribute, appearing when it comes within the given value of the top of the screen. diff --git a/docs/source/grid/_show-and-hide.md b/docs/source/grid/_show-and-hide.md index 3787419de..3b0572222 100644 --- a/docs/source/grid/_show-and-hide.md +++ b/docs/source/grid/_show-and-hide.md @@ -12,8 +12,8 @@ These convenience classes are meant to help with quick responsive layout. Below #### Show Helpers -Essentially, the show classes will show that breakpoint and the breakpoint below it. So if you'd like something to be visible only on a phone, you would use `phone-show`. If you used tablet show, the element would be visible on tablet and phone. +Essentially, the show classes will show that breakpoint and the breakpoint below it. So if you'd like something to be visible only on a phone, you would use `phone-show`. If you used `tablet-show`, the element would be visible on tablet and phone. #### Hide Helpers -Hide helpers are very similar to show. A responsive hide class will hide that breakpoint and the breakpoint below it. So if you wanted something to be visible on only desktop, you could use `tablet-hide`, hiding the element on tablet and phone. Or if you wanted something to be hidden only on a phone, `phone-hide` would hide it on the phone only. +Hide helpers are very similar to show helpers. A responsive hide class will hide that breakpoint and the breakpoint below it. So if you wanted something to be visible on only desktop, you could use `tablet-hide`, hiding the element on tablet and phone. Or if you wanted something to be hidden only on a phone, `phone-hide` would hide it on the phone only. diff --git a/docs/source/type/_overview.md b/docs/source/type/_overview.md index f6803030b..820c33fb2 100644 --- a/docs/source/type/_overview.md +++ b/docs/source/type/_overview.md @@ -7,7 +7,7 @@ We expose four sets of type families for use in Calcite Web; a Header Family, a The typographic pallete for Calcite Web differs slightly from the official Esri branding document. All typefaces are examined in detail below. -Calcite Web provides a set of weights for each typeface. These are used by either using the helper class in html, or the writing sass to include the mixin, or extending the helper class. The available weights for each face are below. Proper care has been taken to ensure that all type systems used by Calcite avoid faux-bold and faux-italics styled by the browser. +Calcite Web provides a set of weights for each typeface. These are used by either using the helper class in html, or writing sass to include the mixin, or extending the helper class. The available weights for each face are below. Proper care has been taken to ensure that all type systems used by Calcite avoid faux-bold and faux-italics styled by the browser. ### Vertical Rhythym Vertical rhythym is maintained in the Calcite Web Type System by the use of the `$baseline` variable. `$baseline` sets a standard and regular leading in relation to the body copy – 1.5rem. This variable is used for any measurement on the vertical axis in the page, including the [leader and trailer grid helper classes](../grid/#leader-and-trailer) and padding for [components like buttons](../components/#buttons) which use standard measurements like `3/$baseline` and `2/$baseline`.