Awesome

krmp.cc

Inspired by the color css declarations seen in materialize, the goal of this project is to provide on-the-fly css classes who's only responsibility is to manipulate color, background-color, and border-color properties. Rather than rely on materialize classes like light-green however, the classes generated by this application use numerical indices like bg-0, fg-10, etc...

Why?

Given a project that relies on a packaged version of it's stylesheet and is using sass, this allows the application to change it's color pallete/theme much more easily. Consider for example, an application stylesheet using color-based classes:

.light-green
  background-color: $light-green

.button
  @extend .light-green
  // ...

.success-notification
  @extend .light-green

.link
  @extend .light-green
  // ...

Should the application decide to change the colors of it's buttons, notifications, and links from light-green to light-orange, the developers would either need to update the value of $light-green, or update the class that is extended in classes like .button. In the first solution, changing the value of $light-green to be an orange color, thus breaking it's semantics, or trace down all places where they were extending the .light-green class and replace it with .light-orange.

However, with numerical color classes like bg-0 generated based on the hex color sent to the krmp.cc server, the same update to an application who's stylesheet might look like this:

.button
  @extend .bg-3.lighten-2
  // ...

.success-notification
  @extend .bg-3.lighten-2
  // ...

.link
  @extend .bg-3.lighten-2
  // ...

Would only involve an update to the url defined in it's bower.json file:

<pre> before: "krmp.cc": "https://krmp.cc/<b>55ef65</b>/package?steps=10&shade_min=75" after: "krmp.cc": "https://krmp.cc/<b>ef5565</b>/package?steps=10&shade_min=75" </pre>

Using

Stylsheets are generated based on parameters provided to it in the url path as well as the query string. The "base" of the pallete should appear as the first part of the path after the hostname:

https://krmp.cc/:hex

To add the stylsheet to you application, simply add a <link /> element pointed to the krmp.cc host:

<link href="https://krmp.cc/6e6" rel="stylesheet" type="text/css" />

By default, this will generate css classes for a "palette" with the default settings. Ultimately, the code generated looks like:

.bg-1 { background-color: #6aa7d9; }
.fg-1 { color: #6aa7d9; }
.bg-1.darken-1 { background-color: #649dcc; }
.fg-1.darken-1 { color: #649dcc; }

These rules could then be applied to your application's markup through class attributes:

<div class="bg-1 darken-1"></div>

Customization

The following query string parameters can be added in order to customize the generated palette:

Name	Type	Notes
steps	`number`	The amount of adjustments to make to the hue.
shades	`boolean`	If set to `false`, the generated css will not include `lighten`/`darken` classes for shades.
shade_min	`number`	Used to determine the minimum brightness of shades to generate. (0 - 100)
shade_max	`number`	Used to determine the maxium brightness of shades to generate. (0 - 100)
expanded	`boolean`	If set to `true`, the generated css will not be minified.
noconflict	`string`	If provided, this string will be added to every class declaration. This will also be used to modify the bower package name generated during downloads.
rules	`string`	Comma separated pairs of `[property]:[alias]` values to override the classes used by the stylesheet. See customizing class names below.

Customizing Class Names

By default, the stylsheet generated by the server will use .bg, .fg, and .bc as the class selectors for background-color, color and border-color classes respectively.These can be aliased to other values using the rules query parameter, who's value should be a list of comma separated [property][:alias] pieces, where the alias is the class name that will be used for the property. For example, to use foo as the class selector for the background-color rules:

/428aa7/preview?rules=background-color:foo

The query string also supports empty and - values which will not render out the property's class set. Examples:

Previewing

To preview any styesheet, add /preview to the url path:

Downloading + Packaging

Even though downloading a local copy of the generated stylsheet can be done using curl:

$ curl -o generated.css https://krmp.cc/7a9eb1

The application also provides a /download (as well as a /package) endpoint that when used with a path-based hex string will create a .tar.gz archive containing the generated css as well as a bower.json file. This allows any generated stylsheet to be listed as a dependency of a project using bower for their asset management:

$ bower i https://krmp.cc/656/package?noconflict=app --save

Which, would be inserted into the bower.json file of the project as:

  "dependencies": {
    "krmp-app": "https://krmp.cc/656/package?noconflict=app"
  }

This is helpful when working with sass/scss to allow a project to @extend the classes provided by the stylesheet.