GrapesJS

# Css

This module manages CSS rules in the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 cssComposer: {
   // options
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const css = editor.Css;

# addRules

Add CssRules via CSS string.

# Parameters

# Examples

const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
// Check rules
console.log(addedRules.map(rule => rule.toCSS()));

Returns Array (opens new window)<CssRule> Array of rules

# setRule

Add/update the CssRule.

# Parameters

# Examples

// Simple class-based rule
const rule = css.setRule('.class1.class2', { color: 'red' });
console.log(rule.toCSS()) // output: .class1.class2 { color: red }
// With state and other mixed selector
const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
// output: .class1.class2:hover, div#myid { color: red }
// With media
const rule = css.setRule('.class1:hover', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)',
});
// output: `@media (min-width: 500px) { .class1:hover { color: red } }`

// Update styles of existent rule
css.setRule('.class1', { color: 'red', background: 'red' });
css.setRule('.class1', { color: 'blue' }, { addStyles: true });
// output: .class1 { color: blue; background: red }

Returns CssRule The new/updated CssRule.

# getRule

Get the CssRule.

# Parameters

# Examples

const rule = css.getRule('.myclass1:hover');
const rule2 = css.getRule('.myclass1:hover, div#myid');
const rule3 = css.getRule('.myclass1', {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)',
});

Returns CssRule

# getRules

Get all rules or filtered by a matching selector.

# Parameters

# Examples

// Take all the component specific rules
const id = someComponent.getId();
const rules = css.getRules(`#${id}`);
console.log(rules.map(rule => rule.toCSS()))
// All rules in the project
console.log(css.getRules())

Returns Array (opens new window)<CssRule>

# remove

Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like @media)

# Parameters

# Examples

// Remove by CssRule
const toRemove = css.getRules('.my-cls');
css.remove(toRemove);
// Remove by selector
css.remove('.my-cls-2');

Returns Array (opens new window)<CssRule> Removed rules

# clear

Remove all rules

# Parameters

  • opts (optional, default {})

Returns this

← ‍ ‍ ‍ CssRule →