Now you added the javascript-file to your site you can start using it.
A function for adding and removing classes.
A class for optimizing images.
Use an image as filling for text.
Disables the saving of images or similar files by disabling the ‘Save as’-option in the context menu when right clicked on an image or other file. It also disables the selection of the html-element.
class="no-save"
Can be set to a length [Xs], percentages [X%], inherit or initial.
--border-radius: <value>;
Can be set in seconds [Xs], inherit or initial.
Can be set to a number between 1 and 0. The number describes how much of the element is still visible, not how much it’s faded.
Example: the number 0.5 will fade the object for 50%, but 0.25 will fade it for 75%.
--disabled-fade: <value>;
Can be set to a color (predefined color names, hexadecimal colors, rgb & rgba colors and hsl & hsla colors), transparent, inherit or initial.
--tooltip-bg-color: <value>;
Can be set to a color (predefined color names, hexadecimal colors, rgb & rgba colors and hsl & hsla colors), transparent, inherit or initial.
--tooltip-color: <value>;
Can be set in seconds [Xs], inherit or initial.
--tooltip-trans-time: <value>;
Most css-classes have diffrent parts in it's name.
The main part defines the characteristics that need to change of a html-element.
Adds a border-radius.
class="border-rd"
Disables the functionality of an element and fades out the element.
class="disabled"
With this class you can use any background-image as filling for text. Apply it directly to an element containing text. Define the background image you want to use by using the style attribute or a css-file.
class="img-clip"
This class can be added to the img-element. With this class you can set any ratio for an image without stretching the image, the image wil be contained within its frame and behave a bit like a background-iamge. So you won't have to use a div with a background-image, a container or manually crop the image in a photo-editor.
class="img-fit"
Set any text within an html-element in lowercase. [See also uppc](#tag-uppc)
class="lowc"
Removes the outline of an element.
class="no-outline"
class="no-save"
Disables the selection of a html-element.
class="no-select"
Set any text within an html-element in uppercase. [See also lowc](#tag-lowc)
class="uppc"
When the css class can be used to define different parts of an html-element (like a top border or left margin) the following tags are used to define wich part we want to call of that element.
There are also some javascript enabled functions you can use.
class="collapse-area" onclick="collapse(this)"
This will change the class "collapse-area" to "collapse-area-active", so now you can use selectors to control the behavior.
Attention! The "collapse"-function will replace any other class from an element with "collapse-area-active".
onclick="toggle(this)"
This will add or remove the "toggle-active"-class to/from an element. You can also add the class in advance.
After that you can control the behavior of that element with the help of some regular css and/or css-selectors.
.an-element:not(.toggle-active) {height: 0%}
.an-element.toggle-active {height: 100%}
You can tweak some css-settings by downloading the custom-elements.zip file and adding the unzipt folder to the root of your site. The options.css-file that you'll find in the folder works with css variables where you change the last part of the rule.
You don't need to link the options.css-file in in your websites head, that's already done by the script.
Editing the settings in the options.css-file is fairly easy. Just go to the setting you want to edit and change the second part behind the ':'. Every setting has a description and how you can change it.
Can be set to a length [Xs], percentages [X%], inherit or initial.
--border-radius: <value>;
Can be set in seconds [Xs], inherit or initial.
Can be set to a number between 1 and 0. The number describes how much of the element is still visible, not how much it’s faded.
Example: the number 0.5 will fade the object for 50%, but 0.25 will fade it for 75%.
--disabled-fade: <value>;
Can be set to a color (predefined color names, hexadecimal colors, rgb & rgba colors and hsl & hsla colors), transparent, inherit or initial.
--tooltip-bg-color: <value>;
Can be set to a color (predefined color names, hexadecimal colors, rgb & rgba colors and hsl & hsla colors), transparent, inherit or initial.
--tooltip-color: <value>;
Can be set in seconds [Xs], inherit or initial.
--tooltip-trans-time: <value>;
You can use our great web fonts for free. More are added everyday.
Just add the font-family to your css file and you're set. You can also use the options.css-file to define the fonts for your site, so you only have to use variables in your own css.
font-family: 'Akkurat';
Available font-weights 300 [light], 300i [light italic], 400 [regular], 400i [regular italic], 700 [bold], 700i [bold italic]
font-family: 'Arquitecta';
Available font-weights 300 [light], 300i [light italic], 500 [medium], 500i [medium italic], 900 [black], 900i [black italic]
font-family: 'Avenir';
Available font-weights 300 [light], 400 [regular], 500 [medium], 600 [semi-bold], 700 [bold]
font-family: 'Bebas';
Available font-weights 100 [thin], 300 [light], 400 [regular], 700 [bold]
font-family: 'Brandon';
Available font-weights 100 [thin], 100i [thin italic], 300 [light], 300i [light italic], 400 [regular], 400i [regular italic], 900 [black], 900i [black italic]
font-family: 'Brown';
Available font-weights 100 [thin], 100i [thin italic], 300 [light], 300i [light italic], 400 [regular], 400i [regular italic], 700 [bold], 700i [bold italic]
font-family: 'Circular';
Available font-weights 300 [light], 300i [light italic], 500 [medium], 500i [medium italic], 700 [bold], 700i [bold italic], 900 [black], 900i [black italic]
font-family: 'Din Pro';
Available font-weights 300 [light], 300i [light italic], 400 [regular], 400i [regular italic], 500 [medium], 500i [medium italic], 700 [bold], 700i [bold italic], 900 [black], 900i [black italic]
font-family: 'Eina 01';
Available font-weights 300 [light], 300i [light italic], 400 [regular], 400i [regular italic], 600 [semi-bold], 600i [semi-bold italic], 700 [bold], 700i [bold italic]
font-family: 'Flanders Sans';
Available font-weights 400 [regular], 500 [medium]
font-family: 'Flanders Serif';
Available font-weights 300 [light], 400 [regular], 500 [medium]
font-family: 'Geometos Rounded';
Available font-weights 400 [regular]
font-family: 'Wavehaus';
Available font-weights 100 [thin], 300 [light], 400 [regular], 600 [semi-bold], 700 [bold], 900 [black]