KT-Color-Scheme

Idea

I needed to harmonize the styles across my different sites and services. Instead of copying and pasting my rules into each project, I preferred to create two stylesheets: one to define my variables and another to style the elements I use in at least two different projects. This makes updates and maintenance easier.

I tried to use semantic tags as much as possible and as few classes as possible.

Preview

theme.knah-tsaeb.org or serve index.php.

Color scheme (kt-scheme.css)

All variable are define in kt-scheme.css.

Components (kt-rules.css)

It's a share rules over my service.

Icons (fullset.svg)

All SVG icon in one file, see Icons sections bellow for usage.

Install with composer (prefered method)

composer config repositories.kt-color-scheme vcs https://forge.leslibres.org/knah-tsaeb/kt-color-scheme

composer require knah-tsaeb/kt-color-scheme --dev

In example folder you find two file for help you with automatic deployement.

composer.json

You can add or update scripts section in your composer.json.

"scripts": {
    "copyCSS": "php bin/deploy.php -o copyCSS",
    "copySprite": "php bin/deploy.php -o copySprite",
    "post-update-cmd": [
        "@copyCSS",
        "@copySprite"
    ]
}

deploy.php

This file is an example; you need to modify it for your project.

Icons

My icons try to follow specifications:

• Size: 48px
• Viewport : 0 0 48 48
• No predefined color
• Circular or square shapes should be 48x48
• Rectangular shapes should be 40x48
• Stroke 4px
• Align center and middle
• SVG file must have ID

I use many icons from other set, see sources section bellow. The original icon can be found in src dir, on public/asssets/icons/ the SVG file must be minified.

Use icons

Use sprite

Include the SVG sprite file in your HTML head :

<link rel="preload" href="assets/sprites/full.svg" as="image" type="image/svg+xml">

Add this in your HTML file :

<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-caution</title>
    <use href="assets/sprites/full.svg#admonition-caution"></use>
</svg>

Use inline

Just copy content of icon in your html file.

<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
  <path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z"
  transform="translate(-1.142 -1.142) scale(2.09516)"/>
</svg>

Use like other img file

<img class="svg-icon" src="assets/icons/admonition-caution.svg" 
  alt="admonition-caution"
  aria-hidden="true"
  focusable="false"
  role="presentation"
/>

You can copy/paste code directly from icons.php page

Sprite building

When you add new icon in public/assets/icons/, you need rebuilding sprite file.

You can use bash script bin/build.sh for generating all sprite :

• admonition.svg | all icons with admonition prefix
• file.svg | all icons with file prefix
• folder.svg | all icons with folder prefix
• full.svg | all icons
• hardware.svg | all icons with hardware prefix
• logo.svg | all icons with logo prefix
• ui.svg | all icons with ui prefix

Or you can use svg_sprite_generator in bin dir.

Usage :

bash svg_sprite_generator.sh {-d <directory> | -f <file_list>} -o <output_file>

Or

php svg_sprite_generator.php {-d <directory> | -f <file_list>} -o <output_file>

Example :

For generate one file name fullSet.svg contain all icons in directory public/assets/icons

bash bin/svg_sprite_generator.sh -d public/assets/icons -o public/assets/sprites/fullSet.svg

You can use preset for generating specific type of icons. For generate one file name ui.svg contain all icons with prefix ui in directory public/assets/icons

bash bin/svg_sprite_generator.sh -f presets/ui.list -o public/assets/sprites/ui.svg

You can make your own preset, just create file with custom- prefix in presets folder, edit and add list of icons you want (one icon by line).

Licence

All content are under CC0 1.0 Universal EXPECT ORIGINAL ICONS, see bellow.

Sources

SVG icons

Icons are adapted from :

Industrial Sharp UI Icons

• Author: Siemens
• License: MIT License
• Collection: Industrial Sharp UI Icons

Universe 11

• Author: SVG repo
• License: CCO License
• Collection: Universe 11

Atlas Variety Line Icons

• Author: Vectopus
• License: MIT License
• Collection: Atlas Variety Line Icons

Technical Support

• Author: SVG repo
• License: CCO License
• Collection: Technical Support

Hashicorp Line Interface Icons

• Author: SVG repo
• License: MLP License
• Collection: Hashicorp Line Interface Icons

Popular Company Logo Icons

• Author: Unknown
• License: Logo License
• Collection: Popular Company Logo Icons

Essential Set 2

• Author: SVG repo
• License: CCO License
• Collection: Essential Set 2 Collection

Ios Ul

• Author: Unknown
• License: CCO License
• Collection: Ios Ul

Bigmug Interface Icons

• Author: Catalin Fertu
• License: CC BY License
• Collection: Bigmug Interface Icons

Libre Variety Filled Icons

• Author: Diemen Design
• License: MIT License
• Collection: Libre Variety Filled Icons