What's new#

• Spectre.css
• Getting Started
• What's new

Spectre.css changelog

v1.0.0-beta #

• Update Spectre.css documentation.
• Functions
  • Add get-from-list() function to obtain values from the list argument.
  • Add important() function to provide the !important.
  • Add map-get-default() to get value from the map with default value if null.
  • Add css-var() function to return CSS var() function with $prefix $suffix.
  • Update the get-var() function to have the ability to adjust the value and to pass the $name parameter as a list.
  • Add size-var() function to return the CSS variable from sizes.
  • Add unit-var() function to return the CSS variables from units.
  • Add var-adjust() to return calculated variable by given $operator.
  • Update the var-negative() function by adding $calculate parameter to have ability to calculate on demand.
  • Add var-unit() function to return the CSS variables multiplied by the unit.
  • Add the typeof function to check whether the given value is a boolean type true or false.
• Colors
  • Add dark/light/normal color themes (mixins, functions) depending on the $color-scheme.
  • Add spectre-dark.scss spectre-light.scss with dark and light color schemes.
  • Add is-scheme-dark() is-scheme-light() is-scheme-normal() functions to determine selected $color-scheme.
  • CSS color variables are set by the set-color() mixin in the one file _colors.scss from the $theme-dark $theme-light $theme-normal Sass variables giving the ability to add new colors to the themes.
    • Dark theme CSS variables are set under the prefers-color-scheme: dark on $color-scheme Sass variable set to dark or light dark.
    • Light theme CSS variables are set under the prefers-color-scheme: light on $color-scheme Sass variable set to light or light dark.
    • Normal theme CSS variables are set when dark and light theme is not set on the $color-scheme Sass variable set to normal.
  • Reorder color() function parameters to be consistent with the hsla() function. d4423be
• Background styles moved to the separate folder with mixins, variables, and styles with CSS color variants.
  • Update the bg-color-variant() mixin to no longer supports the $hex-color to calculate its lightness, because of the new way of providing the colors and adding the $prefix.
  • Add bg-color-variants() to set the background color variants from the predefined Sass variables $bg-theme-dark, $bg-theme-light, $bg-theme-normal.
  • Add bg-theme-dark() bg-theme-light() bg-theme-normal() bg-theme() mixins to handle the dark/light/normal themes.
  • Add the $bg-theme Sass variable to indicate which group colors of $bg-theme-dark $bg-theme-light $bg-theme-normal should be used.
• Add border styles in the separate folder with mixins, variables, and styles with CSS color variants.
  • Add get-border() Sass function to return the border with specified $width $style and $color. db793b2 14bd4b3 afcb5b8
  • Add border-color-variant() border-color-variants() border-size-variant() border-size-variants() and border() mixins.
  • Add $border-colors Sass variable to indicate the border color variants.
• Button styles moved to the separate buttons folder with mixins, variables, and styles with CSS color variants.
  • Add button outline variant colors.
  • Add button-theme-dark() button-theme-light() button-theme-normal() and button-theme() mixins to handle the dark/light/normal color themes.
  • Add button-outline-theme-dark() button-outline-theme-light() button-outline-theme-normal() and button-outline-theme() mixins to handle the dark/light/normal color themes of the outline button.
  • Add $button-theme-dark $button-theme-light $button-theme-normal and $button-theme Sass variables.
  • Add $button-outline-theme-dark $button-outline-theme-light $button-outline-theme-normal and $button-outline-theme Sass variables for outline buttons.
  • Add button-color-variants() button-outline-color-variants() mixins.
  • Update the button-color-variant() button-outline-color-variant() mixins.
  • Add the colors subdirectory to have separate CSS color variants.
• Hero styles moved to the separate hero folder with mixins, variables, and styles with CSS color variants.
  • Add hero-theme-dark() hero-theme-light() hero-theme-normal() and hero-theme() to handle dark/light/normal color themes.
  • Add hero-color-variants() used in the theme mixins and hero-size-variant() hero-size-variants() mixins to have different padding sizes.
  • Add $class-prefix to the classname.
  • Add $hero-size $hero-theme-dark $hero-theme-light $hero-theme-normal and $hero-theme Sass variables.
  • Add CSS variables for the hero sizes initiated by the Sass $hero-size.
  • Add the colors subdirectory to have separate CSS color variants.
• Label styles moved to the separate labels folder with mixins, variables, and styles with CSS color variants.
  • Add label-theme-dark() label-theme-light() label-theme-normal() and label-theme() to handle dark/light/normal color themes.
  • Add label-color-variants() used in the theme mixins and label-size-variants() mixin to have different padding sizes.
  • Add $class-prefix to the classname.
  • Add $label-theme-dark $label-theme-light $label-theme-normal and $label-theme Sass variables.
  • Add the colors subdirectory to have separate CSS color variants.
• Pagination styles moved to the separate pagination folder with mixins, variables, and styles with CSS color variants.
  • Add pagination-border to have bordered page and next buttons.
  • Add pagination-theme-dark() pagination-theme-light() pagination-theme-normal() and pagination-theme() to handle dark/light/normal color themes.
  • Add pagination-color-variants() used in the theme mixins.
  • Add $class-prefix to the classname.
  • Add $pagination-theme-dark $pagination-theme-light $pagination-theme-normal and $pagination-theme Sass variables.
  • Add the colors subdirectory to have separate CSS color variants.
• Text styles moved to the separate text folder with mixins, variables, and styles with CSS color variants.
  • Add text-theme-dark() text-theme-light() text-theme-normal() and text-theme() to handle dark/light/normal color themes.
  • Add text-color-variants() used in the theme mixins.
  • Add $class-prefix to the classname.
  • Add $text-theme-dark $text-theme-light $text-theme-normal and $text-theme Sass variables.
• Toast styles moved to the separate toasts folder with mixins, variables, and colors.
  • Add toast-theme-dark() toast-theme-light() toast-theme-normal() toast-theme() mixins to handle the dark/light/normal themes.
  • Add toast-color-variants() used in the theme mixins.
  • Remove toast-class-variant().
  • Add two parameters $name and $bg-color to the toast-color-variant().
  • Add $toast-theme-dark $toast-theme-light $toast-theme-normal $toast-theme Sass variables to set color variants.
  • Add the colors subdirectory to have separate CSS color variants. Mixins
  • Add padding margin disabled() hide-scrollbar() set-var() set-vars() z-index() mixins and use them in styles.
  • Replace the define-color() and define-color-based-on() with set-color() mixin.
  • Use the color() background() mixins in styles.
  • Add color background() background-color() color() color-picker() set-color() set-var-alpha() set-color-hsla() set-var-hue() set-var-lightness() and set-var-saturation() mixins.
  • Deprecated mixins label--variant() label-class-variant() and label-class--variant(). Variables
  • Add $class-prefix Sass variable with the default value '' to set prefix for primary CSS classes.
• Remove unnecessary import @use 'variables' as * and comments. f745fbf

v1.0.0-alpha.3.0.1 #

v1.0.0-alpha.3

• Add new toast-class-variant() and label-class-variant() mixins. 87ebe64 e6d2ac8 921dc86 fdbe64b
• Add sass variable $transition-duration and css variable transition-duration of the default value equal to 0.2s and use in styles. 1db668c
• Add text and bg color variants. 8e6822e
• Add mixin box-shadow-side() to include sided box-shadow. c010f4c
• Add toasts accent, dark, disabled, gray, gray-dark, gray-light, info, light, and secondary colors. b5b3e0e
• Add label colors, accent, dark, light, disabled, info. ed96a91
• Add missing mixins and add new. 845c528 cc720f9

v1.0.0-alpha.2

• Update define-color() mixin by adding $alpha parameter. 5a4f317
• Update CSS variable body-bg-color to use SCSS variable $body-bg-color instead of basing on bg-color-light. c529aa9
• Change the $body-bg SCSS variable to $body-bg-color. d6b582f
• Move parallax variables into _variables.scss and add to CSS variables. 5b2c0b4 84f247c
• Remove $grid-spacing in _layout.scss in favor of CSS variables calculation.
• Update forms state disabled to use disabled-color instead bg-color-dark and the color is assigned to background-color not background.
• Update grid sizes to use CSS variables for size. e875ec2
• Add CSS variables for z-index and responsive breakpoint. 53a9c0e
• Update styles to use CSS variable of the z-index. 7d7d6da
• Update styles to use get-var() to use CSS variables instead of Sass variables, change avatar-base() mixin parameters to string to use CSS variables. Calculate grid sizes with css variables. 5f2714e
• Update styles to use get-var() function and update including mixins to use string parameters of CSS variables. 7381a86
• Add set-var() mixin to define variable with a specified $prefix and optional $suffix. 8ad9180
• Use get-var() Sass function to use CSS variables instead of scss variables in the margin-variant() and padding-variant() mixins. 32dfd63
• Update define-color() and define-color-based-on() mixin to use set-var() Sass function to define CSS variables. 5bc2df3 bed18ef
• Update avatar-base() mixin to use CSS variables by adding get-var() function. c829c8b
• Fix Color class by adding Math.round() to the color: number argument to properly calculate hex. 8e53827
• Add var-negative() Sass function to make the given value negative by multiply -1. 08c9bae
• Add strip-unit() Sass function to strip unit from the given value. 8c48cf1
• Add get-var() Sass function to get CSS variable with prefix and/or unit. f6da5fa
• Update color() mixin by adding argument $prefix to use $var-prefix for CSS variable name customization. 7e84edc
• Add CSS variables border-width, border-radius, control-padding-x, control-padding-y, control-icon-size, control-size, control-width, font-size, html-font-size, html-line-height, line-height, layout-spacing,unit-o, unit-h, and unit-0 to unit-16. dfdc843
• Separate defining CSS variables into different files. b82878c
• Add $var-prefix to customize CSS variable name, add $disabled-color SCSS variable. 7623233
• Add CSS variables font-size, html-font-size, html-line-height, line-height. 4cddda6

v1.0.0-alpha.1

• Change file name from general function/_css-variable-color.scss to just functions/_color.scss. a8b14ac
• Move mixins from mixins/_css-variable-color.scss to separate files _define-color.scss and _define-color-based-on.scss. e9bb18b
• Change folder name from function to functions for Spectre.css naming consistency. 4582370
• Change .bg-gray to use $bg-gray SCSS variable instead of $bg-color. ebd492c
• Fix includes mixin bg-color-variant() by adding missing sass variables. ebd492c
• New background class colors .bg-color-dark and .bg-color-light. fb1224c
• Fix variable name from $lighten to $lightness in textarea.form-input. 54790ae
• Update missing color() function in styles and use prettier on files. aed7fe0
• Update sass variable name to css style and add !important to text-color-variant mixin. 03713ee

v1.0.0-alpha

• Add helpers. a3fac35
• Update from #688.
• Update the mixins to use string parameters. 5cf16fa
• Change the spectre.css variables and mixins to use color() function. [759feb] 978a9ba a89d3f7 b8dd9c4 4b5e065
• Define CSS variables in HSL. 4ead2ca
• Add $accent-color and $info-color. 5aebf31
• Add function and mixins to handle CSS variables. 9d6c62a 214c17e
• Change @import in favor of @use and @forward. 4110d67 6ad8904

v0.5.10 #

• Add columns order #632.
• Add icons #535.
• Fix buttons visited style for a tag #572.
• Change box-shadow in the mixins.
• Add class card-shadow in the _cards.scss.

v0.5.9 #

• Update gulp and dependencies
• Update docs, fixes typos, merging PRs, and add more examples like Hero layout and custom prefix
• Update column classes less verbose
• Fix #619 by adding pointer-events to 3 dots
• Fix the behavior of class loading together with tooltip
• Only rotate the first child icon when accordion is open/close
• Add a "Reviewed by Hound" badge

v0.5.8 #

• IMPORTANT: Moving
• Add Auto width column #541
• Add more Menu badge support #545
• Improve 360-Degree Viewer
• Fix gulp issue #547
• Fix the errors in the Docs #538

v0.5.7 #

• Add pure CSS 360-Degree Viewer
• Improve Docs SEO
• Change Carousels image number to variable #428
• Fix Form textarea height issue

v0.5.6 #

• Add Docs Search #509 #291
• Add Copy icon
• Add Hero layout #380
• Add multiline Tooltips #500
• Replace transition: all; #526
• Fix #511 issue
• Fix sidebar background height for short docs pages

v0.5.5 #

• IMPORTANT: New Docs
• Add Changelog to What's New section
• Fix chip vertical scrollbar #521
• Fix circle -> s-circle #489
• Fix code font-family issue for asian languages #476

v0.5.4 #

• IMPORTANT: Change naming of position utilities to avoid conflicts
• Update dark color variable
• Fix sidebar hash link bug #482
• Fix browser support typo #469
• Fix code typo #460
• Fix GitHub button z-index bug #458
• Fix Bar background color issue by adding !important to color utilities
• Fix chip bug when content is too long #506
• Fix multiple select height bug #508

v0.5.3 #

• Add dark text color to utilities
• Add error state to the indeterminate checkbox
• Add inline forms
• Add more code examples
• Fix errors in the Docs

v0.5.2 #

• IMPORTANT: Move Docs to Pug templates
• Add more Docs examples
• Add visited link style
• Add 100% modal height class #391
• Fix off-canvas-overlay bug #392
• Fix margin and padding values #431
• Fix Accordion example #438
• Fix a bug of input addons width on mobile devices #449
• Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)

v0.5.1 #

IMPORTANT: Move Autocomplete to the Experimentals

• Add form checkbox, radio and switch support to Menus
• Add responsive horizontal form support #375
• Add Favicons in the docs #398
• Fix Off-canvas z-index problem #361
• Fix icons disappearing on group classes on focus
• Fix Deprecation Warning #396 #356
• Initial commit of RTL support (not finished)

v0.5.0 #

• IMPORTANT: Restore /dist folder
• Add Grid nesting example #353
• Add Form control sizes support
• Update Off-canvas default behavior and new option available #347
• Split Mixins
• Fix Navbar last-child align right bug #346
• Fix modal doc typo
• Fix docs examples #348

v0.4.7 #

• Add new button colors (success and error) #227 #241 #342
• Add overflow-scrolling: touch; CSS for better scrolling
• Add touch support to Parallax image hover effect
• Update the Modal example code
• Fix form horizontal layout spacing

v0.4.6 #

• Add new Sliders example #328
• Add Table with horizontal scroll support #333
• Update Calendar event style which makes use of color utilities #326
• Define $parallax-fade-color as default variable #332
• Fix the Docs content mistake
• Fix breadcrumb-item extra spacing #337
• Fix comparison slider image responsive bug #338

v0.4.5 #

• Rewrite Off-canvas component
• Add active support to the Off-canvas #308
• Update the Docs pages

v0.4.4 #

• IMPORTANT: Increase default font sizes to 16px #271
• Add version number to CSS #288 #289

v0.4.3 #

• Add Icon Sizes #284
• Add Large Modals #293
• Update primary color to #5755d9
• Change Tooltips white-space to pre #292
• Encode SVG Data URI (thanks to @mariodev) #297 #298
• Improve Buttons and Forms small and large variables
• Improve Filters code
• Improve gulpfile and package
• Add Importing Sass Docs

v0.4.2 #

• Add Off-screen experimental
• Fix Docs rendering bug in Safari

v0.4.1 #

• Add default modifier to all variables
• Add address reset which changes font-style to normal
• Add Details and Summary Accordions support
• Fix responsive video
• Update the Docs

v0.4.0 #

• Switch from Less to Sass
• Add Cursor utilities

v0.3.2 #

• Add label-rounded classes
• Add Avatars presence status code
• Add Typography Fonts Docs
• Add Button variant mixins
• Update Autocomplete style
• Update Autoprefixer rules
• Update label mixin and code mono font family

v0.3.1 #

IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

• Fix margin and padding utilities bug
• Add grid offset
• Rename Display utilities class names
• Move Panels and Empty states to Components from Layout
• Fix Docs bugs and cleanup codes

v0.2.15 #

• BIG Update to the Docs experience, completely rewritten and improved #240
• Add Text and Background colors utilities #205 #219
• Add Install from CDN option #191
• Add unit size (4px) and unit size variables
• Add Responsive container (max width container) #222
• Add error and success states to checkbox, radio and switch #246
• Fix Rem unit issue in East Asian Chrome #110
• Fix icon direction bug #218
• Fix Dropdown menu max items/height #226

v0.2.14 #

• Add vertical divider
• Add Form icon support
• Add Accordions
• Add anchor links to Docs
• Add new container grid size
• Fix link error and typo

v0.2.13 #

• Add Timelines code
• Add input readonly style
• Change Gulp building process and ignore /dist
• Change naming danger to error
• Change label-variant mixin
• Fix dropdown-toggle border radius in button groups
• Fix Calendars date item width bug under Firefox

v0.2.12 #

• Add pure CSS Comparison Sliders
• Add pure CSS content Filters
• Add Avatars badge support
• Add more icons
• Change :focus support
• Change Docs image sizes and add object-fit support
• Update Navbar code
• Fix typos, Modals bugs

v0.2.11 #

• Add pure CSS Popovers
• Add pure CSS Icons
• Add Slider bars
• Add tvOS Parallax effect text layer
• Update shadow mixin

v0.2.10 #

• Add Shadows and Z-index variables
• Add Divider text
• Improve color variables
• Cleanup components code
• Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)

v0.2.9 #

• Add Panels layout: flexible view container layout with auto-expand content section
• Update Navbar layout
• Update docs and examples

v0.2.8 #

• Add Carousels previous and next buttons
• Improve disabled state for forms
• Improve calendar events style
• Improve Sliders disabled style
• Improve Autocomplete menu position
• Merge Menus and Dropdowns

v0.2.7 #

• Add Calendars experimental support
• Add tabindex note to the dropdowns docs
• Add shrink-to-fit=no to head meta
• Add Colors docs and update colors
• Fix wrong shadow colors with form-select
• Fix grid-480

v0.2.6 #

• Add Carousels initial experimental version
• Add Spectre.css Twitter account (@spectrecss) link
• Improve Docs experience and navbar
• Fix the bug of form input focus colors

v0.2.5 #

• Improve color variables completely
• Add Menu badges
• Add Responsive visibility (show-x)
• Add Parallax effect (pure CSS)
• Fix elements and components
• Update empty state layout code

v0.2.4 [#] (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)

• ADD: Meters element experimental support
• ADD: Progress indeterminate animation
• ADD: Text-decoration-skip support
• CHG: Split Codes and improve docs codes
• FIX: Steps with tooltips z-index bug

v0.2.3 #

• Bars component
• Badges for buttons
• Experimentals CSS and docs
• Sliders experimental component
• A number of fixes as usual

v0.2.1 #

I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:

• New Docs experience with better navigations and better mobile off-canvas menu
• New components: Tiles, Steps and Navs (part of Navigation)
• Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support
• Improvements: better focus style
• Fixes

v0.0.1 - March 2016

Initial commit

Thank you. ♥

Releases