Clone's documentation uses Cookies and Google Analytics to help us better understand our visitors. By viewing this site, you agree to have this basic information collected and relayed back to us. You can learn more about how Google Analytics provides us with this information here.

Patch 2.4.18

• Color  -  Fixed a bug that prevented data-c-colour from working properly.

Patch 2.4.17

• Migrated all default variables to standard language formatting (e.g. color over colour).
  • The alternate spelling can still be used, but defining variables in your theme should be the standard spelling.
• Containers  -  Added media query support for containers - old syntax will be supported until next minor version update (2.5).
• Color  -  Removed $clone-visited-link-color as it was interfering with the ability to properly control the color of links on a variety of background colors.
• Typography  -  Added a reset option for data-c-font-style.
• Accordions  -  Added a custom focus state for accordion triggers.

Patch 2.4.16

• Updated most component example code and removed a bunch of whitespace.
• Containers  -  Added support for aligning containers left, centered, and right.
• Accordions  -  Fixed a bug where a true value on the data-c-accordion attribute would cause the component to break.
• Dialogs  -  Updated dialogs with a new data-c-dialog-escapable attribute that allows the user to use the ESC key to close a dialog.
  • Omitting this attribute prevents this behaviour.
• Dialogs  -  Dialog close buttons now support span elements, images, as well as the original icon font i elements.
• Alerts  -  Alert titles now support span elements, images, as well as the original icon font i elements.
• Alerts  -  Alert close buttons now support span elements, images, as well as the original icon font i elements.

Patch 2.4.15

• Updated "Styling" to "Properties" in the documentation.
• Moved theme documentation to its own menu area.
  • This resulted in a consolidation of "About Clone" and "Getting Started".
• Display  -  Added the display attribute to allow for manual control over the display property of an element.
• Buttons  -  Updated buttons to support images as their child icon instead of just icon fonts.

Patch 2.4.14

• Menus  -  Fixed a bug where padding on mobile menus remained when they transitioned to desktop menus.
• Breadcrumbs  -  Removed the material icon in favor of a simple forward slash.
• Breadcrumbs  -  Reduced CSS involved in placing the slash to give more control to the user.

Patch 2.4.13

• Inputs, Flexbox Grid  -  Fixed a bug where grids nested inside of grids broke the placement of input labels due to specificity.

Patch 2.4.12

• Color  -  Added content under Color to explain manual hover overrides.
• Color  -  Updates data-c-hover-color to accommodate buttons.
• Color  -  Fixes a bug where anchors were not respecting hover attributes that override the default hover value.

Patch 2.4.11

• Typography  -  Added support for styleguide style heading theme variables to help users ensure consistent styles for 5 levels of heading.
  • A new heading section was added to the typography page to explain how headings work.
  • The whole documentation site was updated to reflect these changes.
• Lowered Brave theme's whitespace multiplier value from 1.4 to 1.2.
• Accordions  -  Removed data-c-heading value on accordion triggers in the example code to accommodate support for the new heading system.
• Menus  -  Fixed an issue where menu buttons were overlapping with dividers.
• Menus  -  Fixed an issue where the menu had no padding on its bottom, which caused the mobile button to overlap with the menu items in the list.
• Breadcrumbs  -  Updated the example code to remove excess whitespace within the anchors.
• Alerts  -  Updates the example code to remove heading attribute and fixed examples.
• Removed the $clone-grid-gutter variable from the theme files as its no longer used.
• Inputs  -  Fixed a bug introduced by the new gutter system that broke the placement of input indicators such as "Required" and error messages.

Patch 2.4.10

• Dates  -  Added a placeholder to help with backwards compatibility for date fields in IE11 and Safari.
• Updates whitespace variables to be more granular - they now change at each media query instead of just portrait tablets and large desktops.
• Margins & Padding, Flexbox Grid  -  Began deprecation of word-based values to represent space in favor of numeric values.
  • quarter -> .25
  • half -> .5
  • normal -> 1
  • double -> 2
  • triple -> 3
  • Also introduces 4.
• Flexbox Grid  -  Updated gutter syntax to allow for more granular control over the gutter value (it uses the new numeric value above).

Patch 2.4.9

• Horizontal Rules  -  Added support for custom horizontal rules.
• Dialogs  -  Fixed a bug where dialogs wouldn't size properly if they were close to the viewport's height in size.
• Dialogs  -  Added a bottom margin to dialogs so that they have a buffer of whitespace.
• Telephone Numbers  -  Added support for telephone number inputs.
• Checkboxes  -  Added support for single checkboxes.
  • This means that single and group checkboxes are distinguished using () syntax. Please see the component page for more details.
  • This change will not break checkboxes already in production.

Patch 2.4.8

• Alerts  -  Changed the title element in alert example code to be a paragraph so that it would respect block level styles.
• Dropdowns  -  Fixed a bug where the arrow icon in dropdowns was sometimes positioned behind the input.
• Fixed an issue where date input content wasn't showing up.

Patch 2.4.7

• Flexbox Grid  -  Fixed a bug where grids nested inside grid items that are set to equalized columns break because they aren't direct children.
• Menus  -  Fixes a bug where the body element would be locked if the mobile menu was opened and then the screen was resized to desktop.
• Radios, Checkboxes  -  Adds cursor: pointer to labels.

Patch 2.4.6

• Dialogs  -  Fixes a bug with dialogs and the use of :scope in Internet Explorer 11.

Patch 2.4.5

• Menus  -  Fixes line height of buttons in menus.
• Containers, Menus  -  Adds support for containers on menus (the data-c-container attribute can be used on data-c-menu elements and will style the nested ul accordingly).
• Menus  -  Assigns a minimum width of 25rem to submenus on topbar style menus.

Patch 2.4.4

• Dialogs  -  Adds code that checks for a data-c-dialog-focus element before trying to focus.

Patch 2.4.3

• Buttons  -  Fixes a bug with spans inside buttons.

Patch 2.4.2

• Buttons  -  Fixes a bug introduced by data-c-button="reset" where borders wouldn't show on regular buttons.

Patch 2.4.1

• Dialogs  -  Fixes a missing > in the dialog code example.
• Accordions  -  Removes forced borders from accordions in favor of the border property.
  • This also means the border colour variable for accordions has been removed.
• Breadcrumbs  -  Updates breadcrumbs to support span and p as the aria-current element.
• Buttons  -  Updates buttons to require a span if using an icon.
  • This also allows icons on either side of the button's content.
• Buttons  -  Fixed line height of icons inside buttons.
• Buttons  -  Adds data-c-button="reset" to allow for buttons that don't need generic button styling.
  • This removes borders, backgrounds, and adds a cursor: pointer; value.

Patch 2.3.15

• Menus  -  Removes code that focuses the first element on the menu when it opens on mobile devices in favour of keeping the open/close button focused.
• Margins & Padding  -  Adds support for auto to data-c-margin="tb" and data-c-margin="rl".
• Dialogs  -  Fixes a bug with dialogs popping out of place when closed on certain screen widths.

Patch 2.3.14

• Menus  -  Fixes a bug where the menu locks the body overflow on mobile devices.

Patch 2.3.13

• Includes jQuery and a minified build of jQuery UI to reduce dependency size.

Patch 2.3.12

• Alerts  -  Changes the markup of alerts to better support floated close buttons.
• Dialogs  -  Fixes z-index layering of dialogs over the new menus.
• Adds test folder for components that are regularly modified/tested.
• Accordions, Alerts, Carousels  -  Updates pieces of accordions, alerts, carousels so that their data attributes are specific instead of values.
• Reviewed all code that exists outside of data-clone to ensure minimal consequences of importing the system into existing projects.

Patch 2.3.11

• Fixes hover bugs on touch devices.
• Tags  -  Fixes hover colour on tags.

Patch 2.3.10

• Menus  -  Adds customizable, responsive menus to Clone
  • Menus can be topbars or sidebars, and support up to 5 nested submenus in the ul structure.
  • New variables have been added to facilitate cutomizing the menu.
• Moved Sass functions outside of the [data-clone] attribute.
• Adds light, default, and dark hover variables to account for colour disparity when the hover colour matches a background colour.
• Inputs  -  Fixes inheritance bugs in inputs.
• Buttons  -  Fixes a bug with icon font size in buttons.

Patch 2.3.9

• Migrates .html files to .twig files.
• Color, Typography  -  Fixes quite a few inheritance bugs for colour, font, weight, etc.
• Reduces redundancy in a few utility SCSS functions.

Patch 2.3.8

• Flexbox Grid  -  Fixes a bug with grid elements missing calc.
• Adds a new pen folder in dist to test CodePen Integration.
• Typography  -  Adds monospace alternative to mono for data-c-font.

Patch 2.3.7

• Fixes a bug with the dist file nomenclature (.min. was missing).

Patch 2.3.6

• Revamped .gulpfile to be more explicit and use modern methods for autoprefixer and cssnano.
• Fixed the index.html link to point to new URL.
• Migrated layouts to a more logical nomenclature (large, medium, small) - support for layout, form, and copy continues.
• Cards  -  Creates a variable to control data-c-card's box shadow.
• Borders  -  Adds support for top/bottom (tb) and right/left (rl, lr) to borders.
• Dialogs  -  Fixes a few spacing issues with dialog headers.
• Typography  -  Fixes a bug with data-c-font-style not working with the underline value.

Patch 2.3.5

• Dialogs  -  Adds data-c-dialog-focus to allow for customization of which element gets focused first when a dialog is opened.

Patch 2.3.4

• Cards  -  Adds data-c-card to add reusable box shadows.
• Margins & Padding  -  Adds top/bottom, left/right shortcuts for margins and padding (data-c-margin="tb(double)").
• Alignment  -  Adds shorthand for data-c-align.
• Tags  -  Adds support for data-c-tag (still needs documentation).
• Changes Brave to a more cohesive theme.
• Margins & Padding  -  Removes display: block from data-c-margin/padding
  • This required updates to accordion and dialog subtitles (span -> p).
• Carousels  -  Adds variables to customize carousel colours.
• Typography  -  Fixes font scale to use custom variable.

Patch 2.3.3

• Alerts  -  Fixes a bug with toast alerts on mobile not displaying correctly.

Patch 2.3.2

• Accordions  -  Fixes a bug with accordion alternating colours being too light.
• Carousels  -  Fixes a bug where carousel active dots would be the same colour as inactive ones.

Patch 2.3.1

• Began playing with Clone's default theme, Brave (please note that this will continue to change).
• Default variable file has been reworked to be more informative and structured.
• Color  -  Added a variable for visited link colour.
• Color  -  Added gray as a colour option.
• Typography  -  Added a regular utility argument for font size.
• Inputs  -  Modified the file structure for inputs.
• Inputs, Flexbox Grid  -  Fixed a bug where inputs were breaking outside of grids.
• Breadcrumbs  -  Removed pointer events from the active breadcrumb.
• Tables  -  Added a variable for alternating table row colour.