Working with CSS

The CMS offers a powerful (S)CSS editor that lets you customize your website in every aspect.

Tabs

(S)CSS

Here you can add your own CSS styles that will be applied to the website. If you are using presets they will be included here and you can add your overrides into the respective sections. You can (and should) use any variables that are defined in the boilerplate or config.

The CMS also understands your CSS code. You can locate the CSS rules that apply to an element on your website by selecting an element and pressing [Ctrl + Alt + C]. This opens the CSS editor with the lines highlighted that apply to your chosen element(s).

You can also use the Optimize button to find unused rules to clean up your code.

Paste File will open the file manager and the path of any file you choose will be pasted wherever the cursor is at that moment.

Color picker opens your system's color picker panel which you can use to select colors.

JavaScript

Here you can add custom JavaScript to your website. jQuery is loaded automatically, so you can use it in your JavaScript.

HTML

Usually you only see the placeholder {{content}} here. Anything in here basically goes inside the <body> tag of the website This placeholder represents the whole content that you can manage through the CMS. If necessary you can add your own HTML around this placeholder or add some third-party snippets here.

Config

Here you can configure your website by defining variables for colors, font-sizes, features etc. All presets that are used on your website are provided as mixins that will be inserted by the CMS to the config automatically. Keep in mind, that deleting any preset element in the editor will not automatically remove any inserted CSS or JS. If you're not familiar with CSS - don't worry! Almost all the values inside here can be edited through theme- and preset-settings in the corresponding preset or the under Website > Theme Settings or when pressing [CTRL + ALT + Y], or when using the Fonts tool.

Boilerplate (read-only)

Interested seeing what's under the hood of your website? Have a look here.

Keeping it clean

Typing code quickly can get quite messy at times. Simply press [Ctrl + I] to auto format all the code in the active window. This works for CSS, JS as well as HTML.

Emmet

All editors are Emmet-ready, which can be triggered by pressing [Tab].

If you don't know Emmet you should definitely check it out. You can save a lot of time typing through Emmet. For example:

In CSS:

m0 -> TAB -> margin: 0;
p1 -> TAB -> padding: 1px;
h80px -> TAB -> height: 80px;
c#333 -> TAB -> color: #333;
fs -> TAB -> font-size: ;
! -> !important;

In HTML:

ul>li.test*3 -> TAB ->
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul><br>

See the complete documentation here:  http://emmet.io/

Still need help? Contact Us Contact Us