THEME

Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.

If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework

GUIDELINE - CREATE & MOD A THEME

Create a custom theme for app, web and software.

CORE CSS

Unlike other frameworks, this divides what is necessary and immutable from everything that is a stylistic issue. The task of the Core is precisely that of "setting each element in the correct way", that of the Theme is "making it user friendly ... beautiful".

This answers one of the oldest questions on the framework: "why the core is in css and the theme is in less?"

The Core system is pure css because it is compatible with every type of compiler present today. It is obvious that Less is not a mandatory tool. You can, in fact, choose any compiler, but less is recommended and helps a lot.

Once loaded the k-core folder (or however included via cdn) it is the turn of the theme. Then copy the k-theme folder inside your root.

/k-theme/theme.css -> It's the basic file of theme.

we suggest to create a "app.css" ,"web.css,desk.cc" for the software for all types of custimez details.

INTO THE THEME LOGIC

We state that the stylist could be modified and structured in a thousand different ways (it depends on you) but, to maintain maximum compatibility, it is advisable to maintain a scheme like the one provided in the demo provided.

To this end, we advise you to think in terms of "params and properties of the theme", ie recyclable nomenclature between a site and another (or app or software)

░░ Sections Orders

Compared to previous editions, the theme system, to date, is usable and simple.

You can see the entire model, in clear text, on the tester css https://github.com/ShapeGroup/kimera-tester/blob/main/resources/libraries/k-theme/theme.css

At present we have only 2 sections:

the root
which defines each variable, including the color scheme
the subsections
commented in a unique and easy to understand way

Each subsection, of course, will deal with a specific concept or component.

The current order of the subsections, as with older versions, are

properties
the text
all element and ui

Distinguishing them is very simple thanks to the simple headcode like this:

/*
// NAME OF SUBJECT
// Info and links
*/

░░ Colors scheme & Vars

The first thing to look at are the colors scheme and var of all style.

 :root {


        --tone01: Black;
        --tone02: SlateGrey;
        --tone03: WhiteSmoke;
        --tone04: DarkSlateBlue;
        --tone05: Fuchsia;

        --error: FireBrick;
        --alert: Gold;
        --news:  DarkTurquoise;
        --pass:  GreenYellow;

        --basespace: 5%;
        --basepad:   12px;

        --baseradius:   6px;
        --baseborder:   1px dotted;
        --baseopacity:  0.33;

        --fontfamily: 'Exo', sans-serif;

        --fontsize09: 90px;
        --fontsize08: 67px;
        --fontsize07: 51px;
        --fontsize06: 38px;
        --fontsize05: 28px;
        --fontsize04: 21px;
        --fontsize03: 16px;
        --fontsize02: 14px;
        --fontsize01: 10px;


    }

    [data-theme='dark']
    {

        --tone01: WhiteSmoke;
        --tone02: SlateGrey;
        --tone03: Black;
        --tone04: DarkSlateBlue;
        --tone05: Fuchsia;

    }

data-theme='dark' is an element applicable everywhere (we recommend on html or body) and is a reference to how to change the theme on the fly in dark mode.

"tone" is the color (from dark to clear to colored) of theme
"error,alert,news,pass" is the simple logically color for make uxd friendly theme
"basespace" and "basepad" is the basic volume (multiplied or divided after) of objects
"baseradius", "baseborder" and "baseopacity" is another basic meter used for homonymous cases
"fontfamily" is the font of document
"fontsizeNN" is the meter of basic size into document texts elements

Remember that the theme is a guideline and does not affect the core system. You can edit everything and import elements into this file as you like. It is possible, as mentioned, even to use compilers or other. As long as they are read as a normal CSS.

Everything else is a simple beauty made in css that recalls the variables and combines them.

And this is all! Simple, right?

[ Theme download list ]