Style your components using Sassy CSS. Empower your designers by Vev()-ing your styles, such that they may be adjusted and customized for each Project in the Design Editor without touching the code.
Sassy CSS
Vev supports Sassy CSS syntax. Read more about it here.
Global CSS Variables
These global CSS variables are available to you. They are tied to the current project color palette.
$primary1-5
$accent1-5
$bg1-5
Media Queries
If you want to change your styling depending on the device mode, you may use the following syntax anywhere in your SCSS code:
.someclass {
color: blue;
@media(mobile) {
color: cyan;
}
}
@media(tablet) {
.someclass {
.something {
display: none;
}
}
}
Dynamic Style Bindings (Props Editors)
Vev allows you to bind CSS Style Properties from your code to the Visual Editor. Create your custom code and bind your CSS Properties with vev() to give the ability to modify the look of them using the native tools in the Design Editor.
List of Vev-able Properties
Adding vev(); as the value of a property in the CSS tab of the Code Editor will create a link between the selector you added the property for and the Editors on the right-hand side in the Design Editor. If you add values inside the parentheses, such as "vev(#FFF000);", then these values will be applied as defaults for the widget or section. Bound properties without defaults make their editors available in the properties panel on the right but aren't set initially when the widget or section is created.
Vev + Common
opacity: vev(0.5);
box-shadow: vev(1px 5px 6px $primary);
box-shadow: vev(1px 5px 6px rgba(40,40,40,0.5));
// Without defaults:
opacity: vev();
box-shadow: vev();
Vev + Text
font-family: vev();
font-size: vev(18px);
font-weight: vev(bold);
font-style: vev(italic);
text-align: vev(right);
color: vev(#FFFFFF);
line-height: vev();
letter-spacing: vev();
word-spacing: vev();
text-transform: vev();
columns: vev();
text-shadow: vev(2px 2px 5px $primary3);
// Without defaults:
font-family: vev();
font-size: vev();
font-weight: vev();
font-style: vev();
text-align: vev();
color: vev();
line-height: vev();
letter-spacing: vev();
word-spacing: vev();
text-transform: vev();
columns: vev();
text-shadow: vev();
Vev + Flexbox
display: vev(flex);
flex-direction: vev(row | column);
align-items: vev(flex-start | flex-end | center | baseline | stretch );
justify-content: vev(flex-start, flex-end, center, space-between, space-around);
// Without defaults
display: vev();
flex-direction: vev();
align-items: vev();
justify-content: vev();
Vev + Background
background: vev(linear-gradient($primary3, $primary5));
background: vev(rgba(40,40,40,0.6));
background: vev($primary3);
// Without defaults
background: vev();
Vev + Border
border: vev(4px dashed $accent3);
border-radius: vev(20px);
border-radius: vev(10px 5px 5px 50px);
// Without defaults
border: vev();
border-radius: vev();
Vev + Shadows
text-shadow: vev(2px 2px 5px $primary3);
box-shadow: vev(1px 5px 6px $primary3);
// Without defaults
text-shadow: vev();
box-shadow: vev();