GitHub - angular-package/spectre.css: Spectre.css - A Lightweight, Responsive and Modern CSS Framework

angular-package

The angular-package supports the development process of angular-based applications in varied ways through the thoughtful, reusable, easy-to-use small pieces of code called packages.

Spectre.css

This Spectre.css is maintained by the @angular-package.

Spectre.css is a lightweight, responsive and modern CSS framework.

Lightweight (~10KB gzipped) starting point for your projects
Flexbox-based, responsive and mobile-friendly layout
Elegantly designed and developed elements and components

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the further development. ♥

Getting started

There are 2 ways to get started with Spectre CSS framework in your projects. You can use NPM or Yarn.

Install with NPM

$ npm install @angular-package/spectre.css --save

Install with Yarn

$ yarn add @angular-package/spectre.css

Demonstration

Demonstration will be available soon here https://angular-package.dev/ui-kit/component/theme

Usage

// Main spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Define variables.
@use 'node_modules/@angular-package/spectre.css/css-variables' as *;

// Get functions.
@use 'node_modules/@angular-package/spectre.css/functions' as *;

// Get mixins.
@use 'node_modules/@angular-package/spectre.css/mixins' as *;

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

SCSS Variables

Colors with a specific hex on which others are based.

// src/_variables.scss
// Core colors
$accent-color: #9932CC !default; // New.
$dark-color: #303742 !default;
$light-color: #fff !default;
$primary-color: #5755d9 !default;

// Control colors
$error-color: #e85600 !default;
$info-color: #d9edf7 !default; // New.
$success-color: #32b643 !default;
$warning-color: #ffb700 !default;

// Other colors
$code-color: #d73e48 !default;
$highlight-color: #ffe9b3 !default;

Colors that are based on the hex colors above.

// Core colors
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 37.5%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;

// Gray colors
$gray-color: lighten($dark-color, 55%) !default;
$gray-color-dark: darken($gray-color, 30%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;

$border-color: lighten($dark-color, 65%) !default;
$border-color-dark: darken($border-color, 10%) !default;
$border-color-light: lighten($border-color, 8%) !default;
$bg-color: lighten($dark-color, 75%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;

// Other colors
$body-bg: $bg-color-light !default;
$body-font-color: lighten($dark-color, 5%) !default;
$link-color: $primary-color !default;
$link-color-dark: darken($link-color, 10%) !default;
$link-color-light: lighten($link-color, 10%) !default;

CSS properties/variables

The color-scheme variable is set to normal.

:root, :host {
  color-scheme: normal;
}

Each hex color has four CSS variables defined by the mixin define-color($name, $color), split into hsl form, where suffix h indicates hue, l lightness, s saturation and a - alpha.

// src/mixins/_define-color.scss
// Defines CSS variable color in hsl form.
@mixin define-color($name, $color) {
  --s-#{$name}-h: #{hue($color)};
  --s-#{$name}-l: #{lightness($color)};
  --s-#{$name}-s: #{saturation($color)};
  --s-#{$name}-a: #{alpha($color)};
}

For example primary-color is built from the CSS variables.

--s-primary-color-h: 240.9090909091deg; // Hue.
--s-primary-color-l: 59.2156862745%; // Lightness.
--s-primary-color-s: 63.4615384615%; // Saturation.
--s-primary-color-a: 1; // Alpha.

CSS variables are defined in both :root and :host.

// src/_css-variables.scss
:root, :host {
  // Core colors.
  @include define-color('primary-color', $primary-color); // #5755d9
  @include define-color('accent-color', $accent-color); // #9932CC
  @include define-color('dark-color', $dark-color); // #303742
  @include define-color('light-color', $light-color); // #ffffff

  // Control colors
  @include define-color('info-color', $info-color); // #d9edf7
  @include define-color('success-color', $success-color); // #32b643
  @include define-color('error-color', $error-color); // #e85600
  @include define-color('warning-color', $warning-color); // #ffb700

  // Other colors
  @include define-color('code-color', $code-color); // #d73e48
  @include define-color('highlight-color', $highlight-color); // #ffe9b3  
}

Each color that is based on hex color has four CSS variables defined by the mixin define-color-based-on($name, $color, $lightness: 0%), split into hsl form, where suffix h indicates hue, l lightness, s saturation and a - alpha.

// src/mixins/_define-color-based-on.scss
@mixin define-color-based-on($name, $color, $lightness: 0%) {
  --s-#{$name}-h: var(--s-#{$color}-h);
  --s-#{$name}-l: calc(var(--s-#{$color}-l) + #{$lightness});
  --s-#{$name}-s: var(--s-#{$color}-s);
  --s-#{$name}-a: var(--s-#{$color}-a);
}

Color that based on primary-color for example secondary-color is built from the css variables:

:root, :host {
  --s-secondary-color-h: var(--s-primary-color-h);
  --s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
  --s-secondary-color-s: var(--s-primary-color-s);
  --s-secondary-color-a: var(--s-primary-color-a);
}

CSS variables that are based on others are also defined in both :root and :host.

// src/_css-variables.scss
:root, :host {
  // Core colors.
  @include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
  @include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)

  @include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
  @include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
  @include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;

  // gray-color
  @include define-color-based-on('gray-color', 'dark-color', $lightness: +55%); // lighten($dark-color, 55%)
  @include define-color-based-on('gray-color-dark', 'gray-color', $lightness: -30%); // darken($gray-color, 30%)
  @include define-color-based-on('gray-color-light', 'gray-color', $lightness: +20%); // lighten($gray-color, 20%)

  // border-color
  @include define-color-based-on('border-color', 'dark-color', $lightness: +65%); // lighten($dark-color, 65%)
  @include define-color-based-on('border-color-dark', 'border-color', $lightness: -10%); // darken($border-color, 10%)
  @include define-color-based-on('border-color-light', 'border-color', $lightness: +8%); // lighten($border-color, 8%)

  // bg-color
  @include define-color-based-on('bg-color', 'dark-color', $lightness: +75%); // lighten($dark-color, 75%)
  @include define-color-based-on('bg-color-dark', 'bg-color', $lightness: -3%); // darken($bg-color, 3%)
  @include define-color-based-on('bg-color-light', 'light-color'); // $light-color

  @include define-color-based-on('body-bg-color', 'bg-color-light'); // $bg-color-light
  @include define-color-based-on('body-font-color', 'dark-color', $lightness: +5%); // lighten($dark-color, 5%)

  @include define-color-based-on('link-color', 'primary-color'); // $primary-color
  @include define-color-based-on('link-color-dark', 'link-color', $lightness: -10%); // darken($link-color, 10%)
  @include define-color-based-on('link-color-light', 'link-color', $lightness: +10%); // lighten($link-color, 10%)
}

Colors are read by the function color($name, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 1).

// src/functions/_color.scss
// Color variable.
@function color($name, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 1) {
  @return hsla(
    calc(var(--s-#{$name}-h) + #{$hue}),
    calc(var(--s-#{$name}-s) + #{$saturation}),
    calc(var(--s-#{$name}-l) + #{$lightness}),
    calc(var(--s-#{$name}-a) * #{$alpha})
  );
}

For example primary-color or primary-color-dark:

@use 'node_modules/@angular-package/spectre.css/functions' as *;

.primary-color {
  background: color('primary-color');
}

.primary-color-dark {
  background: color('primary-color-dark');
}

Background colors

In the original Spectre.css, background colors are based on SCSS variables, but in @angular-package Spectre.css they are based on CSS variables. They are also set the same way, by the bg-color-variant() mixin, but using respective SCSS variables to change the lightness of the background font color. In the future version, the lightness of the text color will depend on the CSS variable.

Original Spectre.css backgrounds are using the same SCSS variable name as the class name except one .bg-gray, which uses $bg-color. This version, $bg-color SASS variable is used in the new background .bg class, and .bg-gray uses $gray-color to have consistent naming.

There are also new background .bg-accent ($accent-color), .bg-gray-dark ($gray-color-dark), .bg-gray-light ($gray-color-light), .bg-info ($info-color) classes that are consistent in Spectre.css naming convention, but they are also .bg-color-dark ($bg-color-dark), .bg-color-light ($bg-color-light) that aren't.

/*
  Background colors
*/
// BG core colors
@include bg-color-variant('.bg', 'bg-color', $bg-color); // ! New color, it's an old .bg-gray
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color); // ! New color.
@include bg-color-variant('.bg-dark', 'dark-color', $dark-color);
@include bg-color-variant('.bg-color-dark', 'bg-color-dark', $bg-color-dark); // ! New color that uses $bg-color-dark
@include bg-color-variant('.bg-light', 'light-color', $light-color);
@include bg-color-variant('.bg-color-light', 'bg-color-light', $bg-color-light); // ! New color that uses $bg-color-light
@include bg-color-variant('.bg-primary', 'primary-color', $primary-color);
@include bg-color-variant('.bg-secondary', 'secondary-color', $secondary-color);

/*
  Control colors.
*/
@include bg-color-variant('.bg-error', 'error-color', $error-color);
@include bg-color-variant('.bg-info', 'info-color', $info-color); // ! New color.
@include bg-color-variant('.bg-success', 'success-color', $success-color);
@include bg-color-variant('.bg-warning', 'warning-color', $warning-color);

/*
  Gray colors.
*/
@include bg-color-variant('.bg-gray', 'gray-color', $gray-color); // ? .bg-gray is not $bg-color but directly $gray-color.
@include bg-color-variant('.bg-gray-dark', 'gray-color-dark', $gray-color-dark); // ! New color.
@include bg-color-variant('.bg-gray-light', 'gray-color-light', $gray-color-light); // ! New color.

Helper class

There is temporary class to help handle css variables CssPropertyColor and here is example usage of it:

First, you need to initialize the color you want to handle.

import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

Get the hex of the primary color:

import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

console.log(primary.getHex()); // #5755d9

// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #6362dc

// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #4b48d6

Set the color dynamically in the spectre.css:

import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

primary.setHex('#aaaaaa');

console.log(primary.getHex()); // #aaaaaa

// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #b2b2b2

// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #a2a2a2

It's possible to change the shade of the color:

import { CssPropertyColor } from '@angular-package/spectre.css';

const primary = new CssPropertyColor(
  'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
  's' // Prefix s in the CSS variable --s
);

primary.setHex('#aaaaaa', 'light');
console.log(primary.getHex('light')); // #aaaaaa

with the CSS variable result:

// style.attribute
--s-primary-color-light-h: 0deg;
--s-primary-color-light-l: 66.6667%;
--s-primary-color-light-s: 0%;

Documentation and examples

Elements

Layout

Components

Utilities

Utilities - colors, display, divider, loading, position, shapes and text utilities

Experimentals

360-Degree Viewer - CSS ONLY
Autocomplete
Calendars
Carousels - CSS ONLY
Comparison Sliders - CSS ONLY
Filters - CSS ONLY
Meters
Off-canvas - CSS ONLY
Parallax - CSS ONLY
Progress
Sliders
Timelines

Browser support

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

Chrome (LAST 4)
Microsoft Edge (LAST 4)
Firefox (EXTENDED SUPPORT RELEASE)
Safari (LAST 4)
Opera (LAST 4)
Internet Explorer 10+

Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

Designed and built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.

angular-package / spectre.css Public

README.md

angular-package

Spectre.css

Getting started

Install with NPM

Install with Yarn

Demonstration

Usage

SCSS Variables

CSS properties/variables

Background colors

Helper class

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

About

Releases 1

Packages

Languages

angular-package / spectre.css Public

License

Latest commit

Git stats

Files

README.md

angular-package

Spectre.css

Getting started

Install with NPM

Install with Yarn

Demonstration

Usage

SCSS Variables

CSS properties/variables

Background colors

Helper class

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

About

Resources

License

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages