CSS Selector Cheatsheet

We've built our editors from the ground up with you in mind. They are flexible and extremely easy to customise, in fact, our structure is based on only 3 different elements as follows:

1) Main container: 

Is proposal, contract, invoice, form - depending on what you are editing.

2) Secondary container (blocks wrapper): 

Our design editor is based on blocks which are contained within our secondary container blocks-wrapper

2) Building blocks:

Each block is called content-block followed by the type of block, for example block-text for the text block. 

Each content-block also has a unique ID which allows you to easily target that specific block.

The ID is a class given to each block which looks like id-#.

Below is a summary of how the structure would look like in the code:

<div class="blocks-page proposal">
	<div class="blocks-wrapper">
		<div class="content-block block-intro id-WFcoQ">
			<div class="block-body">
				{block content goes here}
			</div>
		</div>
	</div>
</div>

In simple words:

Let's take a proposal as an example. First you would have proposal which is the main container, then inside it we would have the blocks container blocks-wrapper and finally the individual building blocks content-block

Block Types:

Useful resources:

• Google fonts library: https://fonts.google.com

• Basic CSS generator: https://www.cssmatic.com

• Advanced CSS generator: https://webcode.tools/css-generator

• CSS animation generator: http://www.agenciesranked.com/createcss3