-
Notifications
You must be signed in to change notification settings - Fork 4
Classes & Colors
At the top <html> tag, there are a few classes which start with the word chayns. They give you information about the
environment of your chayns® site. You can use them as parent css class to customize your styles depending to the environment.
With help of chayns-color-mode--X class, you are able to make your tapp ready for bright and dark mode.
// Normal mode
.chayns-color-mode--0 & {
&:before {
content: "normal mode";
}
}
// Dark mode
.chayns-color-mode--1 & {
&:before {
content: "dark mode";
}
}
// Bright mode
.chayns-color-mode--2 & {
&:before {
content: "bright mode";
}
}The following chayns--X classes will help you displaying different pages to the user depending on his device.
// Desktop (desktop site)
.chayns--desktop &{
&:before {
content: "desktop";
}
}
//Web (desktop & mobile site)
.chayns--web &{
&:before {
content: "web";
}
}
//Mobile (mobile site)
.chayns--mobile &{
&:before {
content: "mobile";
}
}
//App (app)
.chayns--app &{
&:before {
content: "app";
}
}With the chayns-os--X and chayns-browser--X classes, you can specify the browser and operating system of the device.
Available browsers are Chrome, Firefox, IE, Safari, Opera and Edge, available operating systems Android, iOs, webshadow (website) and noOS.
If you need to know that chayns is ready, you can check for the chayns-ready-class.
chayns sites always have a specific site color, which the manager can set for himself. In addition, chayns reserves certain colors, which are used specifically for warnings, specific numbers, etc.
You can view all colors on this site: https://design.chayns.net/Farben (german).
To use the site color as text-, background- or border-color, you can use this classes:
chayns__color--COLORchayns__background-color--COLORchayns__border-color--COLOR
You need to replace COLOR with one of the following colors:
-
primary: Site color -
headline: Headline color -
text: Text color -
header-bar: Header bar color -
cw-background: Chayns web background color -
000-009: Grey gradations -
100-109: Gradations of the site color -
200-209: Gradations of the site color -
300-309: Gradations of the site color
If you need a color with the !important-attribute, you simply have to add an i to the class name.
Here's an example:
<div class="chayns__color--primary">
Hello World!
</div>
<div class="chayns__background-color--300i chayns__border-color--309">
Hello World!
</div>You can also get the colors as JSON. The endpoint for this is available at the following URL:
https://api.chayns.net/colors/v4.2/{{SITE_ID}}/
<!-- To get started, load the chayns API styles and JavaScript from the CDN -->
<!-- css styles -->
<script src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js" version="4.2"></script>
<!-- js api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>