EGF logo SBOL Visual CSS Documentation

Basics

Start rendering in a few lines.

This page covers the fundamentals for the SBOL Visual CSS library.

Install

Download the stylesheet and include it in your page:

<link rel="stylesheet" href="sbol-visual-standalone.css" />
Build note. Regenerate the bundle from SVGs using build_css.py.

First construct

A construct is a regular HTML block with class sbol-visual. Each symbol is a child with class sbolv plus a symbol type (see the reference section for a list of available types).

<div class="sbol-visual">
    <div class="sbolv promoter">P1</div>
    <div class="sbolv ribosome-entry-site">rbs 1</div>
    <div class="sbolv cds"><em>acs</em></div>
    <div class="sbolv terminator"></div>
    <div class="sbolv insulator"></div>
</div>
P1
rbs 1
acs

Captions and HTML content

Each symbol can contain any HTML content: plain text, emphasis, or links.

<div class="sbolv cds">
    <a href="https://www.uniprot.org/uniprot/P0ACJ8">
        Gene <em>crp</em>
    </a>
</div>
Gene crp

Antisense symbols

Add antisense to a symbol or a whole block to mirror it. If you want the text itself to remain readable, wrap the label in a child element that also uses antisense.

<div class="sbol-visual centered small">
    <div class="sbolv antisense terminator"></div>
    <div class="sbolv antisense cds">
        <div class="antisense">cds 1</div>
    </div>
    <div class="sbolv promoter">sense</div>
    <div class="combinatorial">
        <div class="sbol-visual antisense">
            <div class="sbolv promoter"></div>
            <div class="sbolv cds">
                <div class="antisense">whole block</div>
            </div>
            <div class="sbolv terminator"></div>
        </div>
    </div>
</div>
cds 1
sense
whole block

Combinatorial designs

Wrap alternatives in a container with class combinatorial. Each child is one option for that slot.

<div class="sbol-visual centered small">
    <div class="sbolv promoter">p1</div>
    <div class='combinatorial'>
        <div class="sbolv cds">gfp-mut2</div>
        <div class="sbolv cds">gfp-mut3</div>
        <div class="sbolv cds">yfp</div>
    </div>
    <div class='combinatorial'>
        <div class="sbolv terminator">term1</div>
        <div class="sbolv terminator">term2</div>
    </div>
    <div class="sbolv insulator">insulator</div>
</div>
p1
gfp-mut2
gfp-mut3
yfp
term1
term2
insulator

Nested alternatives and libraries

You can place full sbol-visual blocks inside a combinatorial region, and even nest combinatorial regions to model libraries of libraries.

<div class="sbol-visual centered small">
    <div class="sbolv insulator"></div>
    <div class="combinatorial">
        <div class="sbol-visual">
            <div class="combinatorial">
                <div class="sbolv promoter">Pr1</div>
                <div class="sbolv promoter">Pr2</div>
            </div>
            <div class="sbolv cds"><em>acs</em></div>
            <div class="sbolv terminator"></div>
        </div>
        <div class="sbol-visual">
            <div class="combinatorial">
                <div class="sbolv promoter">PrA</div>
                <div class="sbolv promoter">PrB</div>
            </div>
            <div class="sbolv cds"><em>bla</em></div>
            <div class="sbolv terminator"></div>
        </div>
        <div class="sbolv user-defined">(bridge)</div>
    </div>
    <div class="combinatorial">
        <div class="sbolv cds"><em>gfp</em></div>
        <div class="sbolv cds"><em>mCherry</em></div>
    </div>
    <div class="sbolv terminator"></div>
</div>
Pr1
Pr2
acs
PrA
PrB
bla
(bridge)
gfp
mCherry