Easel is a visual design tool built for the web. Since the web is viewed in a browser, we believe it should be built in one too.

Improved CSS Export

We recently added the ability to add custom HTML ids and classes within Easel (see it in action in our video on CSS editing). By adding meaningful values for these attributes, you can make your exported markup more understandable and semantic.

Our initial code export used your custom ids and classes when possible, but we realized we could do better. We’ve updated our algorithm to use them more often and at the same time make each selector more concise. See the difference?

Before

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

After

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

Much better! Below is an example that illustrates exactly how to take full advantage of these changes.

Using Ids and Classes to make semantic CSS rules

When Easel exports a CSS rule path, it starts by finding the entire path to the element. Like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

By adding an id to an element in the path, the id becomes the beginning of the new rule path. In this case, if we were to add an id ‘signup-form’ to the form in Easel and export again, the path becomes a much shorter and more readable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

Even with an id, the CSS rules generated might not be very human-readable. In our previous example, it’s not clear which input in the form the rule is for. By adding a class – say ‘email’ – to the input, Easel will generate a more human-readable rule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

A complete example

For a more complete example check out this landing page. Before adding any ids or classes to the document, this is the CSS output:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

And with a few strategically placed IDs and classes, it now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    
    
      
      
    Application Error
    
    
      
    
    

Export matters to us and we’re always looking for ways to improve the quality of code generated by Easel. Let us know if there is something you’d like to see improved.

Comments