CSS in Venddor IO

Using LESS in Venddor IO

Venddor IO employs LESS as its foundational structure for layout styles. LESS, a dynamic CSS preprocessor, extends CSS capabilities. Learn more about LESS and its diverse features at the official site: LESS Official Site.

In Venddor IO, only select LESS features are integrated. Below is a detailed description of these features and their significance.

1. Variables

Variables enable you to define and reuse specific values in multiple locations.

@price: #343434;

In Venddor IO, LESS variables correspond to the Styles concept. Within the design/themes/THEME_NAME/styles/data directory, LESS files contain variables tied to the Theme Editor.

These variable values can either be modified directly within the file or updated using the Theme Editor post style-saving.

2. Mixins

Mixins facilitate the incorporation of all properties of one class into another, using the class name as a property value. This is akin to employing variables but pertains to entire classes.

rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}

#footer {
  .rounded-corners(10px);
}

Venddor IO uses a collection of mixins from Bootstrap 2.3. They are housed in the mixins.less file located in the design/themes/responsive/css/tygh directory.

3. Operations

LESS allows arithmetic operations within rules, like addition, subtraction, multiplication, and division.

width: (900 / @columns)px;

4. Functions

LESS offers a myriad of functions: from color manipulation, mathematical functions to string operations.

Key functions in Venddor IO include:

• lighten(@color, 10%): Lightens a color by 10%.
• darken(@color, 10%): Darkens a color by 10%.

These functions often interact with Styles and the Theme Editor, allowing dynamic color adjustments based on a base color.

5. Nested Rules

Nested rules allow for one rule to be enclosed within another. Venddor IO uses them sparingly to prevent complexities during development.

Directory and File Framework

Your Venddor IO theme's CSS directory path is design/themes/THEME_NAME.

Within this:

• css/addons: Contains styles for modules.
• css/lib: Houses external developer styles, including jQuery library styles.
• css/tygh: Contains auxiliary styles.

The main file is styles.less, which comprises the theme's styles. Files housed in css/tygh are integrated into styles.less using the @import operator.

Style File Priority

When it comes to including style files (both CSS and LESS), they're prioritized by:

1. All CSS files via pre-hooks (modules).
2. CSS files in the order defined in design/themes/basic/templates/common/styles.tpl.
3. All LESS files via pre-hooks (modules).
4. LESS files in the defined order in design/themes/basic/templates/common/styles.tpl.
5. Inline styles within the <style></style> tags in design/themes/basic/templates/common/styles.tpl.
6. Styles added via the Custom CSS section in the Theme Editor.