grapesjs/docs/api/css_composer.md

CssComposer

This module contains and manage CSS rules for the template inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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 cssComposer = editor.CssComposer;

• load
• store
• add
• get
• getAll
• clear
• setRule
• getRule

load

Load data from the passed object, if the object is empty will try to fetch them autonomously from the storage manager. The fetched data will be added to the collection

Parameters

• data Object Object of data to load

Returns Object Loaded rules

store

Store data to the selected storage

Parameters

• noStore Boolean If true, won't store

Returns Object Data to store

add

Add new rule to the collection, if not yet exists with the same selectors

Parameters

• selectors Array<Selector> Array of selectors
• state String Css rule state
• width String For which device this style is oriented
• opts Object Options for the add of new rule (optional, default {})
• addOpts (optional, default {})
• props Object Other props for the rule

Examples

var sm = editor.SelectorManager;
var sel1 = sm.add('myClass1');
var sel2 = sm.add('myClass2');
var rule = cssComposer.add([sel1, sel2], 'hover');
rule.set('style', {
  width: '100px',
  color: '#fff',
});

Returns Model

get

Get the rule

Parameters

• selectors Array<Selector> Array of selectors
• state String Css rule state
• width String For which device this style is oriented
• ruleProps Object Other rule props

Examples

var sm = editor.SelectorManager;
var sel1 = sm.add('myClass1');
var sel2 = sm.add('myClass2');
var rule = cssComposer.get([sel1, sel2], 'hover');
// Update the style
rule.set('style', {
  width: '300px',
  color: '#000',
});

Returns (Model | null)

getAll

Get the collection of rules

Returns Collection

clear

Remove all rules

Parameters

• opts (optional, default {})

Returns this

setRule

Add/update the CSS rule with a generic selector

Parameters

• selectors string Selector, eg. '.myclass'

• style Object Style properties and values

• opts Object Additional properties (optional, default {})

  • opts.atRuleType String At-rule type, eg. 'media' (optional, default '')
  • opts.atRuleParams String At-rule parameters, eg. '(min-width: 500px)' (optional, default '')

Examples

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

Returns CssRule The new/updated rule

getRule

Get the CSS rule by a generic selector

Parameters

• selectors string Selector, eg. '.myclass:hover'
• opts (optional, default {})

Examples

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

Returns CssRule

getRules

Find rules, in different states (eg. like :hover) and media queries, matching the selector.

Parameters

• selector string Selector, eg. '.myclass'

Examples

// Common scenario, take all the component specific rules
const id = someComponent.getId();
const rules = cc.getRules(`#${id}`);
console.log(rules.map(rule => rule.toCSS()))

Returns Array<CssRule>