Changelog

The SendGrid Style Guide is a library for developing consistent UI/UX at SendGrid. It is made up of modular, reusable components based on OOCSS and SMACSS principles.

Latest

[1.7.1] - 2018-05-21

S3 style-guide.css version: KAszD4vu66M80ZepDUqLI56zlUi5vn21

Changed

  • Swapped export icon to use download icon
  • Export icon now represents upload
  • S3 version number for style-guide.css

Archive

[1.7.0] - 2018-05-09

S3 style-guide.css version: XhMyWmZn.lBwnttPpGzlxf0eu31npLWB

Added

  • Selected state for action cards
  • Promo alert banner
  • Unsubscribe groups full page example

Changed

  • Actions for cards switched to dropdown menu
  • Actions for campaigns table switched to dropdown menu
  • S3 version number for style-guide.css

[1.6.0] - 2018-05-03

S3 style-guide.css version: 8S1f4gCyOleviE08IG7ySvolDNCSw6sE

Added

  • New icons to icon font (check-shield, cloud-question, download, and help-error)
  • Table loading state component
  • Signup summary component
  • Browser chrome component
  • Support for toggle buttons with btn-small modifier

Changed

  • Updated styles for toggle buttons
  • Updates styles for switches
  • S3 version number for style-guide.css

[1.5.0] - 2018-04-02

S3 style-guide.css version: mjNiR5K3TDg5fjU3_xNnNS2XuudtuOUd

Added

  • Email cards with alerts
  • Segment terms with alerts
  • Labels component added to Misc.

Changed

  • Cleaned up styles for labels within tables
  • Cleaned up styles for buttons within alerts
  • S3 version number for style-guide.css

Fixed

  • Transition for table header actions gear

[1.4.2] - 2018-03-19

S3 style-guide.css version: tKkpIqgbQWvSkE7SQNmXg2tC5VOIdZo7

Added

  • New icon to icon font (click)
  • Class modifier for cards with fixed heights (.is-fixed-height)

Changed

  • S3 version number for style-guide.css

Fixed

  • Cell labels that would word-break in tables w/ long strings

Removed

  • Deprecated 'fit' length for tooltips
  • Left over styles that directly referenced Colfax

[1.4.1] - 2018-03-05

S3 style-guide.css version: ghXmj2_nNeTpd1q87d1M2ug4r.1gcx7x

Added

  • Support to hide legacy template nav link
  • Support to allow scrolling in the body when a modal is open

Changed

  • S3 version number for style-guide.css

Fixed

  • Attribute selector for children on the grid, class can appear anywhere in the list

[1.4.0] - 2018-02-07

S3 style-guide.css version: B4s3cprsruOw89X7jnG15MYQSP36E6ch

Added

  • Colfax regular webfont (joins set with light and medium)

Changed

  • Typography styles switched to use Colfax
  • S3 version number for style-guide.css

[1.3.1] - 2018-02-20

S3 style-guide.css version: .RZw2hSAstTvdEvElFmpYObn60M93VLN

Added

  • Support for a button to positioned in the tabs component
  • Support for items on the grid that don't have a .col class

Changed

  • S3 version number for style-guide.css

Fixed

  • Card children width issues, setting flex basis for common elements
  • Tooltip inheritance of parent styling

[1.3.0] - 2018-02-14

S3 style-guide.css version: _8Fw9ED4ppTQUUe1vtetcJf5grosJ5Y1

Added

  • Style Guide grid separated into style-guide-grid.css
  • Usage info for style-guide-grid.css
  • Text field valid and invalid examples

Changed

  • Table state alignment styles
  • Text style for email card buttons
  • S3 version number for style-guide.css

Fixed

  • Display issue for horizontal rule with label
  • Checkbox and radio styles for table cells

[1.2.32] - 2018-02-06

S3 style-guide.css version: SKE8z5OMHbJiBxMMWT3.6K3lMrZySIkn

Added

  • Copy as new template svg icon

Changed

  • Contributing info to remove reference to scss-lint gem
  • S3 version number for style-guide.css

Fixed

  • Column offset classes corrected to start/end on correct grid line

[1.2.31] - 2018-02-01

S3 style-guide.css version: Q0qc_cT0Xby1pnbiEThP9A.pAGYdsCPY

Changed

  • Linting for scss
  • Grid styles to use CSS grid
  • S3 version number for style-guide.css

Removed

  • Proxima Nova webfonts, mixins, and styles
  • Scss linting tool that required Ruby
  • Susy grid library that required Ruby

[1.2.30] - 2018-01-24

S3 style-guide.css version: mk6a9pi_jjUKG0sTaV01YrFYqyUEbfVq

Added

  • New icons to icon font (automation, check-thin, and test-data)
  • Disabled state for multi select values

Changed

  • Replaced check icon for segment terms
  • Moved segment terms variable to global variables partial
  • S3 version number for style-guide.css

[1.2.29] - 2018-01-18

S3 style-guide.css version: 7qiftOWprI6LVFcbC80M5d5oer6TvdSr

Changed

  • Updated markup and styles for segment terms component
  • S3 version number for style-guide.css

Fixed

  • Dropdown gear icon color if used on primary button

[1.2.28] - 2017-12-14

S3 style-guide.css version: 4U1XaNHgABwWU1xhwFDjAPFaVZI5njdi

Added

  • Email card component
  • Global scss variables for stats
  • VSCode preferences for gitignore

Changed

  • Switched table stat variables to global stat vars
  • S3 version number for style-guide.css

[1.2.27] - 2017-12-05

S3 style-guide.css version: YuNX6Gaqp3HKk_bhh_nW9sCtSLDESEij

Added

  • Segment terms component

Changed

  • Moved dropzones from Misc. page to their own top level page
  • Moved filters and segment terms from Misc. page to their own top level page
  • S3 version number for style-guide.css

Fixed

  • Numbered list style were too generic, added child selector to help keep them contained

[1.2.26] - 2017-10-24

S3 style-guide.css version: j7YTvtMq6mCkk6KRqoNkZKyenwNF3i4M

Added

  • Size modifiers for HTML content tooltips

Changed

  • Category badge display (inline-block to inline-flex) to avoid spaces based on HTML markup
  • S3 version number for style-guide.css

[1.2.25] - 2017-10-17

S3 style-guide.css version: kK5zgO2CUtTAnFqUq5.i_5IESuy8b_BJ

Added

  • Unsubscribe icon for MC module
  • Storage svg icon

Changed

  • S3 version number for style-guide.css

[1.2.24] - 2017-09-26

S3 style-guide.css version: YzhWtGhr.3nMxyeIuKY3NUVVEIfKjUq_

Added

  • Override for max-width on .table-wrap, fixes table display issue in MC
  • Examples of large and small loaders

Changed

  • S3 version number for style-guide.css

[1.2.23] - 2017-09-14

S3 style-guide.css version: NCHczv8hc1KtGASIKomv1K8Mn0cB8Znv

Added

  • New icon font icons for campaigns table (editor-code, editor-design, editor-old)
  • Color and background color utility classes (.color-name and .bg-color-name)
  • Card actions component

Changed

  • Campaigns table updates (statuses, badges, truncation, actions, etc.)
  • Select2 components to use classes to clean up demo js
  • Adjusted HTML Content tooltips js
  • Reduced padding on filter component
  • S3 version number for style-guide.css

[1.2.22] - 2017-08-31

S3 style-guide.css version: _Rs1gt_GZrFQCJo.tSDI9G9BrZ2teT9_

Added

  • Feature comparison tables (thanks Alfred!)

Changed

  • S3 version number for style-guide.css

Fixed

  • Edge case for table actions to fit 6 icons (GitHub issue #119)

[1.2.21] - 2017-08-16

S3 style-guide.css version: 9gmTtVrkdpGKCTOri4YgSKDUTYhtlcDp

Added

  • Advanced filter component to Activity page example

Changed

  • Cards and table state to be more consistent
  • Adjusted date pickers to use classes for demos
  • S3 version number for style-guide.css

Fixed

  • Vertical progress stage number alignment (GitHub issue #117)

[1.2.20] - 2017-08-10

S3 style-guide.css version: kqt.UxVfaTjNtFfbTkaWClG57QZQpEry

Added

  • Advanced filter component

Changed

  • Button background colors (rgba to hex to avoid background transparency)
  • Adjusted table component to better support edge cases for MC
  • S3 version number for style-guide.css

Fixed

  • Property sort order for modals
  • Gulp task was deleting the compiled S3 version of style-guide.css on clean

Removed

  • Read only fields (team agreed to utilize disabled fields for simplicity)
  • Pointer events on search field icon

[1.2.19] - 2017-07-26

S3 style-guide.css version: 7mstSZs74utscUsVyEx2i8EKBTa9nHzn

Added

  • Read only support for select fields

Changed

  • S3 version number for style-guide.css

[1.2.18] - 2017-07-26

S3 style-guide.css version: EIX0DOMZbZeAW2kUoIgBnl._oSEw_h_F

Added

  • Read only support for text inputs

Changed

  • Updated Activity page demo (set up for re-work of filters)
  • S3 version number for style-guide.css

[1.2.17] - 2017-07-14

S3 style-guide.css version: HSxTfipvro_.hKzgIwD7S51daJo0YQPt

Added

  • Help icon

Changed

  • Table empty state layout and spacing
  • Table empty state help text
  • Gulp workflow, improve efficiency
  • S3 version number for style-guide.css

Fixed

  • Additional icon font icons that had SVG path issues

[1.2.16] - 2017-07-03

S3 style-guide.css version: PAa3cx5xxMWnqPAL3wA4ICgyGJJFCqz2

Added

  • Dropzone alerts (thanks Krish!)
  • Visible containers for page examples

Changed

  • Layout section with pages for grid and containers
  • S3 version number for style-guide.css

[1.2.15] - 2017-06-29

S3 style-guide.css version: rDldDiewyIFQV6R5zPzKx2hFbds2sfMe

Changed

  • S3 version number for style-guide.css

Fixed

  • Icon font SVG path issues

[1.2.14] - 2017-06-21

S3 style-guide.css version: wZJOUYJuKMchHJDB48Ck2ym_SraeCqxY

Added

  • Libraries installed via npm (jquery, select2, moment, bootstrap-daterangepicker)
  • Disabled states for table rows
  • Page examples (wizard, custom fields, and senders)
  • Helper classes for badges on senders page example
  • Styles for dot labels in Select2

Changed

  • Adjustments to content containers for page examples
  • Adjustments to grid (align-right, fix linter errors)
  • Adjustments to vertical progress stages (width to allow longer step names)
  • Break-word settings on tooltips to avoid breaking words
  • Updated dropzone placeholder images
  • S3 version number for style-guide.css

Fixed

  • Loader issues in Firefox (set width & height as attributes not css properties)
  • Prev/next arrows on date range picker

Removed

  • Antialiasing on typography and button elements (to increase readability)
  • Local js libraries (jquery, select2, moment, bootstrap-daterangepicker)
  • Pointer events on date range icon

[1.2.13] - 2017-06-01

S3 style-guide.css version: KXFxrvupjp4LyYhdMMKrKlLswy_MOwFR

Added

  • Additional font icons (export, status-positive, status-negative, status-caution)

Changed

  • Text alignment for tooltips
  • Grid spacing and gutters
  • Swap check-circle icon for status-positive (too similar)
  • S3 version number for style-guide.css

[1.2.12] - 2017-05-16

S3 style-guide.css version: 5ycKnxMZd9mL0IgxXRgCGLAsf_A3Ls2I

Added

  • Page examples (campaigns, contacts, email activity)
  • Content containers to help with page layouts (content-main, content-header)

Changed

  • Icons and loaders layout in Buttons
  • Minor table adjustments based on page examples
  • Moved Tiara icons to their own section in Icons
  • Moved GitHub templates to .github folder
  • S3 version number for style-guide.css

[1.2.11] - 2017-05-05

S3 style-guide.css version: RPq9k4Qzp3Q.JanSs4b6C5l8TUzNxZS_

Added

  • Additional font icons (contacts-alt, csv, list)

Changed

  • S3 version number for style-guide.css

[1.2.10] - 2017-04-13

S3 style-guide.css version: M0UFkkVNvVQb.ojxoNBRZLj2hUXqMrlG

Added

  • Buttons with badges
  • Dividers with labels
  • Usage instructions to introduction

Changed

  • Tooltip underlines to be element agnostic
  • S3 version number for style-guide.css

Fixed

  • Demo site table tooltip width issue
  • Consistent quotes in components js
  • Table with search input spacing

[1.2.9] - 2017-04-11

S3 style-guide.css version: XHzd9zmnNKIOLfyA.bA9GMf.oP_QoptM

Changed

  • Gitignore to ignore compiled app/css assets
  • S3 version number for style-guide.css

Fixed

  • Selectable button radio margins

Removed

  • Generated stylesheets from app/css

[1.2.8] - 2017-04-03

S3 style-guide.css version: sQSlSlhFNWPCvP8BMAN0x0YMnT9ShfcO

Added

  • Textarea example with info icon and tooltip
  • Select example with info icon and tooltip
  • Support for checkboxes and radios to have input-info text (validation errors or helpful notes)
  • PNG version of favicon

Changed

  • Contributing info to use npm commands
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Card flexbox issue with larger displays (children fitting on one line)
  • Dropzone hovered/editor state, adjusted mantis rgba value to hex
  • Adjusted vertical-alignment for headlines with info icons
  • Select example label name
  • Syntax error on changleog
  • Demo site class tables, added min-width for tooltip labels

[1.2.7] - 2017-03-15

S3 style-guide.css version: bA.aw7WrwxPAbV9wMhWB6cN.TShSBDfw

Added

  • A/B testing tabs with badges and modal support
  • Badge line-height
  • Legacy editor icons (to be updated)
  • Underline tooltips
  • Loading buttons
  • Various table edge case updates (word-break, widths, etc.)

Changed

  • Updated class documentation for editor tabs
  • Updated loaders with various fixes and improvements
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Modal display issue with browser resizing

Removed

  • Demo site specific style for underline tooltips

[1.2.6] - 2017-03-08

S3 style-guide.css version: YPCqbJz1arsSyHNMO6BfBGLZC8jPBsM7

Added

  • Dropzone component
  • Max-width for images sitting in grid columns

Changed

  • Minor changes to tables to allow them to sit on any background color
  • Removed white background on disabled secondary buttons that site on dark backgrounds
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Prevent scrolling on body when modals are open
  • Indented text for checkboxes and radios if the line wraps

[1.2.5] - 2017-02-23

S3 style-guide.css version: cTJh31Ht5XM.kZipC0R3UeZFj1ioi_Ok

Added

  • Typography classes to switch families, weights and styles
  • Icon font-size classes to adjust size
  • Guidelines styles and structure (see guidelines.html)

Changed

  • Compiled /app/css
  • S3 version number for style-guide.css

Removed

  • Proxima Nova Thin font files and font-face declaration

[1.2.4] - 2017-02-20

S3 style-guide.css version: YHyleYx6vhuByasOD.dlpOKi5qGjy8UE

Added

  • SVG icon for teammate billing
  • Directional arrows for text inputs with units
  • Fixed width tabs for editor panel
  • Module cards for editor panel
  • Accordion with module cards for editor panel
  • Hovered class support for tooltips (is-hovered)

Changed

  • Footer copyright year (2016 to 2017)
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Positioned info icon to bottom of textarea border
  • Updated icon font to fix minor display issues

[1.2.3] - 2017-02-10

S3 style-guide.css version: yfnhmVIlALny6oXvPMUpqOVprbSsopYk

Added

  • Icons font icons (button, code, columns, divider, drag, image, images, image-text, locked, reload, social, spacer, text, unlocked)
  • Units for text inputs
  • Nested accordions
  • Large center modal for code editing
  • Large tabbed modal for image library
  • Loaders section w/ fragment loader example

Changed

  • Adjusted contrast on info icon for tooltips
  • Increased padding on tabs
  • Modal close class (modal-close) for demo site example
  • Refactored demo site JS for modals
  • Minor adjustments to demo site styles
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Text input border color on error focus

[1.2.2] - 2017-02-06

S3 style-guide.css version: J37TKe7FbvEEubvCMEpiKk6Z_GHIBHBA

Added

  • Icon font icon (key)

Changed

  • Compiled /app/css
  • S3 version number for style-guide.css

[1.2.1] - 2017-01-31

S3 style-guide.css version: X9GGGZb7MO7JdYHMUZf.RYp1caE9jyHd

Added

  • Textarea component to text fields
  • Side modal spacing example with multiple components
  • Vendor specific style to hide scrollbars by default in Edge
  • Select2 example for side modals

Changed

  • Increased margin bottom for checkboxes and radios
  • Gitignore /dist folder
  • Compiled /app/css
  • S3 version number for style-guide.css

Fixed

  • Padding and height issue with badges in tables

Removed

  • MyFonts typography import (no longer needed)
  • Max width on select fields
  • Old breadcrumbs partial

[1.2.0] - 2016-12-30

S3 style-guide.css version: RLfnOjMvTc0eKeTModlnNPbAPm3F4ST0

Added

  • Class and element documentation for components
  • Button classes to support has-icon and is-disabled (legacy classes backwards compatible)
  • Progress classes to support is-selected and is-done (legacy classes backwards compatible)
  • Switch classes to support is-disabled (legacy classes backwards compatible)
  • Gist examples with async js library
  • SendGrid complete logo (svg)
  • Pointer cursor for sortable table headers
  • Link to favicon in <head>
  • Misc. section for badges, meters, and dividers
  • Statistics tables section for advanced tables

Changed

  • Updated demo site page layout
  • Updated demo site header and footer navigation
  • Overhaul demo site with component pages and improved organization
  • Improved contributing documentation
  • Typography font-size and line-height for <ol> and <ul> elements
  • Increased line-height on tabs from 18px to 20px
  • Favicon.ico path
  • Compiled /app/css and /dist folders
  • S3 version number for style-guide.css

Fixed

  • Accordion padding issue where content was getting covered by carets
  • Alerts demo styles to display offset message
  • Pickers display issue (conflict w/ dropdown class in menus)
  • Progress stages line-height issue
  • Select2 groups max-height issue (avoid multiple scrollbars)

Removed

  • Unnecessary top level pages (Style, Layout, Components)
  • Unnecessary demo site .scss files
  • Webkit font smoothing for <ol> and <ul> elements
  • Previous demo site nav partials

[1.1.1] - 2016-12-07

S3 style-guide.css version: RY.ZWjsXjG5sYOkovmytO3qMuw2pKkFb

Changed

  • Compiled /app/css and /dist folders
  • S3 version number for style-guide.css

Removed

  • Max width on text input fields (MAKO-5811)

[1.1.0] - 2016-12-03

S3 style-guide.css version: XVUDuxmiTh91P5280Wk6Myv6vdr0brUY

Added

  • Modifier classes for tabs (is-centered and zero-border)
  • Flexbox support for tabs to remove floats
  • Bottom border to tab-wrapper
  • Gulp s3 task to minify style-guide.css for S3
  • S3 version number for style-guide.css

Changed

  • Active state class name from tab-active to is-active
  • Minor adjustments to tabs CSS (padding, height, line-height, etc.)
  • Minor adjustments to tabs example JS
  • Minor adjustments to change log notes for consistency
  • Compiled /app/css and /dist folders

Fixed

  • CSS maps path issues

[1.0.7] - 2016-12-02

Added

  • Date range component
  • Icon font icon (calendar)
  • Font smoothing for typography and buttons

Changed

  • Cleaned up CSS comments
  • Moved meter mixin to global mixins
  • Compiled /app/css and /dist folders

Fixed

  • CSS maps path issues

[1.0.6] - 2016-11-29

Added

  • Icon font icons (analytics, builder, and clean ui)

Changed

  • Compiled /app/css and /dist folders

[1.0.5] - 2016-11-22

Added

  • Vertical progress stages component
  • Card components (standard, large, inline)
  • Breadcrumb component
  • JS version of tooltips
  • Email server svg icon

Changed

  • Border radius values updated to global variable
  • Compiled /app/css and /dist folders

[1.0.4] - 2016-11-21

Added

  • CSS Nano dev dependency

Changed

  • Style Guide installation instructions (npm install)
  • Package title and version
  • Compiled /app/css and /dist folders

Removed

  • Node modules folder

[1.0.3] - 2016-11-18

Added

  • Loader examples

Changed

  • Compiled /app/css and /dist folders

Fixed

  • Horizontal rule gist url

[1.0.2] - 2016-11-16

Added

  • Horizontal rule styles
  • Table states and empty states
  • Basic footer for demo site
  • Smooth scrolling between demo site sections
  • Contacts icon to icon font, variables, and typography
  • View source links to gist example markup

Changed

  • Increased contrast by 20% on disabled checkboxes and radios
  • Renamed style-guide demo site partial for 'nav' to 'header'
  • Reorganized style-guide component examples
  • Compiled /app/css and /dist folders

Removed

  • Gist examples on demo site to reduce page load times

[1.0.1] - 2016-11-04

Changed

  • Compiled /app/css and /dist folders

Fixed

  • SVG icon paths in demo site

[1.0.0] - 2016-11-04

Added

  • Tables (standard, sort-asc, sort-desc, search, composite, stats, a/b stats, hierarchy, and simple)
  • Bootstrap grid recommendations
  • SVG icons displayed that were in the images folder
  • Gist link button to example containers
  • SendGrid favicon
  • Font icons airplane-fill & save-draft

Changed

  • Style Guide demo grid classes for demo site
  • Updated primary button left/right padding
  • Compiled /app/css and /dist folders

Removed

  • Row containers that were wrapping typography examples