Use dc-page to set up the page space. It applies the default page padding for several screen sizes.
Use dc-container to create the main content container. Your content and cards should go inside of this container. Use dc-container--limited in addition to dc-container to limit the maximum size of the container.
Use dc-row for rows and dc-column for columns.
All the columns are sized equally based on how many total columns are there in a row.
Gutter space is calulated based on display sizes. 16px for small (320px), 24px for medium (600px), and, 32 px for large (1024px) and above.
Example below shows 5 columns in a row.
<div class="dc-row">
<div class="dc-column">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eveniet.
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, repudiandae.
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, ut.
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, animi.
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, cum.
</div>
</div>
</div>Use dc-column--shrink in order to shrink a column to the size of its contents. Other column(s) fill up the remaining space of the row.
<h3 class="dc-h3">Shrink one column</h3>
<div class="dc-row">
<div class="dc-column dc-column--shrink">
<div class="dc-column__contents">
This column shrinks
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
This Column fills up the space
</div>
</div>
</div>
<h3 class="dc-h3">Shrink two columns</h3>
<div class="dc-row">
<div class="dc-column dc-column--shrink">
<div class="dc-column__contents">
This column shrinks
</div>
</div>
<div class="dc-column dc-column--shrink">
<div class="dc-column__contents">
This shrinks as well!
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
This one fills the reamaining space
</div>
</div>
</div>
<h3 class="dc-h3">Shrinking first column with two more columns to fill up the space</h3>
<div class="dc-row">
<div class="dc-column dc-column--shrink">
<div class="dc-column__contents">
This column shrinks
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
These Other two columns...
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
... take the remaininig space equally!
</div>
</div>
</div>By default there are 4 breakpoints for the media queries, which are as follows :
'small' for phones (320px); 'medium' for tablet sizes (600px); 'large' for desktop sizes (1024px); and; 'huge' for larger screens (1280px);
You can use classes for columns as :
dc-column--[small|medium|large|huge]-[1-12]
examples: dc-column--large-6 OR dc-column--medium-12
Example below shows columns which will show as 3 columns (of size 4) on large screen but will take full width on medium and small screens
Resize your browser window to see it take effect.
<div class="dc-row">
<div class="dc-column dc-column--large-4 dc-column--medium-12">
<div class="dc-column__contents">Column large-4 / medium-12</div>
</div>
<div class="dc-column dc-column--large-4 dc-column--medium-12">
<div class="dc-column__contents">Column large-4 / medium-12</div>
</div>
<div class="dc-column dc-column--large-4 dc-column--medium-12">
<div class="dc-column__contents">Column large-4 / medium-12</div>
</div>
</div><div class="dc-row">
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-10">
<div class="dc-column__contents dc-column__contents--center">10</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents dc-column__contents--center">3</div>
</div>
<div class="dc-column dc-column--small-9">
<div class="dc-column__contents dc-column__contents--center">9</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-4">
<div class="dc-column__contents dc-column__contents--center">4</div>
</div>
<div class="dc-column dc-column--small-8">
<div class="dc-column__contents dc-column__contents--center">8</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-5">
<div class="dc-column__contents dc-column__contents--center">5</div>
</div>
<div class="dc-column dc-column--small-7">
<div class="dc-column__contents dc-column__contents--center">7</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-6">
<div class="dc-column__contents dc-column__contents--center">6</div>
</div>
<div class="dc-column dc-column--small-6">
<div class="dc-column__contents dc-column__contents--center">6</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-4">
<div class="dc-column__contents dc-column__contents--center">4</div>
</div>
<div class="dc-column dc-column--small-4">
<div class="dc-column__contents dc-column__contents--center">4</div>
</div>
<div class="dc-column dc-column--small-4">
<div class="dc-column__contents dc-column__contents--center">4</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents dc-column__contents--center">3</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents dc-column__contents--center">3</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents dc-column__contents--center">3</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents dc-column__contents--center">3</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">2</div>
</div>
</div>
<div class="dc-row">
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
<div class="dc-column dc-column--small-1">
<div class="dc-column__contents dc-column__contents--center">1</div>
</div>
</div>Use dc-column-offset--[small|medium|large|huge]-[1-11] to apply an offset (left margin) to the a column.
Example below shows various implementations of offsets
Offsets are applied from the breakpoint used + higher. This means that an offset applied for medium size will apply for medium, large, and, huge screen sizes. To remove an offset for higher screen sizes, an offset of `0` can be applied, as shown below. Resize the screen to see how offsets are applied and removed.
<h3 class="dc-h3">
Offset first column by 3 columns only on large and huge screens:
</h3>
<div class="dc-row">
<div class="dc-column dc-column--small-2 dc-column-offset--large-3">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
</div>
<h3 class="dc-h3">Offset last column by 2 columns on all sizes</h3>
<div class="dc-row">
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2 dc-column-offset--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
</div>
<h3 class="dc-h3">No offset on large and huge screens, offset by 2 columns on medium</h3>
<p class="dc-p">
Offsets are applied from the breakpoint used + higher. This means that an offset applied for medium size will apply for medium, large, and, huge screen sizes. To remove an offset for higher screen sizes, an offset of `0` can be applied, as shown below.
Resize the screen to see how offsets are applied and removed.
</p>
<div class="dc-row">
<div class="dc-column dc-column--small-2 dc-column-offset--medium-2 dc-column-offset--large-0">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents dc-column__contents--center">
2
</div>
</div>
</div>Sometimes it may be required to use the grid without gutters.
Use dc-row--collapse to have no gutters for columns.
Example below shows 4 columns without gutter space.
<div class="dc-row dc-row--collapse">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eveniet.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, repudiandae.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, ut.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, animi.
</div>
</div>
</div>It is possible to create a nested grid by adding a .dc-row inside of a .dc-column
Example below shows the second column of top grid having another row (of 12 columns) inside it which has 4 equally sized columns inside.
<div class="dc-row">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
<span class="dc-strong">Column 1</span>
</div>
</div>
<div class="dc-column dc-column--small-9">
<div class="dc-column__contents">
<span class="dc-strong">Column 2</span>
<div class="dc-row">
<div class="dc-column">
<div class="dc-column__contents">
Nested Column 1
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Nested Column 2
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Nested Column 3
</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">
Nested Column 4
</div>
</div>
</div>
</div>
</div>
</div>Block grids are great for making responsive pages.
Use .dc-block-grid--[small|medium|large|huge]-[1-12] on the .dc-row to create a block grid. The columns inside only need .dc-column class applied to them.
Block grids allow you to define how many columns per row you need based on the screen size. Block grids also facilitate you to add non-standard number of columns in a row like 5 columns.
Example below shows that the columns below will be placed as "1 per row" on small screens, "3 per row" on meduim screens, and "5 per row" on large screens.
<div class="dc-row dc-block-grid--small-1 dc-block-grid--medium-3 dc-block-grid--large-5">
<div class="dc-column">
<div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quisquam, sit a.</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime aut recusandae.</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ratione hic, obcaecati!</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur eum, error soluta.</div>
</div>
<div class="dc-column">
<div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, ab. Libero, deserunt.</div>
</div>
</div>Hide/show elements according to breakpoint size. Combine hide and show classes to make elements only appear in a specific range of screen sizes.
Hide classes: dc-hide-from-[small|medium|large|huge] will hide starting from the specified breakpoint
Show classes: dc-show-from-[small|medium|large|huge] will show starting from the specified breakpoint
<div class="dc-row">
<div class="dc-column dc-column--small-12 dc-show-from-medium">
<div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> for medium breakpoint size on.
</div>
</div>
<div class="dc-column dc-column--small-12 dc-hide-from-medium">
<div class="dc-column__contents">This element will <strong class="dc-strong">hide</strong> from medium breakpoint size on.
</div>
</div>
<div class="dc-column dc-column--small-12 dc-show-from-small dc-hide-from-medium dc-show-from-large">
<div class="dc-column__contents">This element will <strong class="dc-strong">hide</strong> at medium breakpoint and show for all others.
</div>
</div>
</div>Use dc-row--align--center to center align the columns in a row. (When columns are not totalling to 12)
<div class="dc-row dc-row--align--center">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam possimus reprehenderit minima. Vitae expedita eos temporibus perspiciatis repellendus ipsam necessitatibus!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
</div>Use dc-row--align--right to right align the columns in a row. (When columns are not totalling to 12)
<div class="dc-row dc-row--align--right">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam possimus reprehenderit minima. Vitae expedita eos temporibus perspiciatis repellendus ipsam necessitatibus!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
</div>Use dc-row--align--spaced to place the columns in a distributed way. (When columns are not totalling to 12)
<div class="dc-row dc-row--align--spaced">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam possimus reprehenderit minima. Vitae expedita eos temporibus perspiciatis repellendus ipsam necessitatibus!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
</div>Use dc-row--align--justify to align the first and last columns to the edges, and, distribute the horizontal space equally with other columns. (When columns are not totalling to 12)
<div class="dc-row dc-row--align--justify">
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam possimus reprehenderit minima. Vitae expedita eos temporibus perspiciatis repellendus ipsam necessitatibus!
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
<div class="dc-column dc-column--small-2">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit minima delectus, pariatur molestias, dolorum odit totam quasi sit magni beatae.
</div>
</div>
</div>Use dc-row--align-top to vertically align the columns to the top.
<div class="dc-row dc-row--align--top">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ducimus cumque vero!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>Use dc-row--align-middle to vertically align the columns to the middle of the row.
<div class="dc-row dc-row--align--middle">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ducimus cumque vero!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>Use dc-row--align-bottom to vertically align the columns to the bottom of the row.
<div class="dc-row dc-row--align--bottom">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi explicabo eveniet inventore voluptatibus aliquid debitis laboriosam magni cupiditate possimus facere?
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ducimus cumque vero!
</div>
</div>
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>You can also specify the vertical alignment of indiviual columns by using one of the following classes:
dc-column--align-self--top to align the column to the top
dc-column--align-self--middle to align the column to the middle
dc-column--align-self--bottom to align the column to the bottom
<div class="dc-row">
<div class="dc-column dc-column--small-3">
<div class="dc-column__contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quaerat totam, repellendus, consequuntur officia illo similique pariatur, esse eos magnam exercitationem aut rem commodi.
</div>
</div>
<div class="dc-column dc-column--small-3 dc-column--align-self--bottom">
<div class="dc-column__contents">
This column is bottom-aligned
</div>
</div>
<div class="dc-column dc-column--small-3 dc-column--align-self--top">
<div class="dc-column__contents">
This column is top-aligned
</div>
</div>
<div class="dc-column dc-column--small-3 dc-column--align-self--middle">
<div class="dc-column__contents">
This column is aligned at the middle
</div>
</div>
</div>