Make the CSS styles "portable" #50

nfreear · 2018-10-10T17:15:52Z

There is a short-term & a long-term element to this, to allow the tool to be hosted by third-parties on a page, without it affecting other parts of the page (think possible integration within a VLE).

Long-term

All CSS selectors should start with the container class-name, for example:

.our-journey-js a:link {
    color: #2b6ab7;
}

.our-journey-js form {
    display: inline;
}

/* ... */

The above is best achieved with a CSS pre-processor like SASS or LESS. This may be an extra burden for you, which is why I'm proposing it for the long-term only (!)

Short-term

Ensure that "body" styles (font-family, font-size etc.) are set on the container, not on the <body>.

All will hopefully become clear ;).

Ta,

Nick

The text was updated successfully, but these errors were encountered:

…urable

nfreear added future idea Medium to long term suggestions ... enhancement New feature or request labels Oct 10, 2018

nfreear added a commit to nfreear/our-journey that referenced this issue Oct 10, 2018

Bug IET-OU#50, make CSS more portable; make 'background-color' config…

d236458

…urable

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make the CSS styles "portable" #50

Make the CSS styles "portable" #50

nfreear commented Oct 10, 2018 •

edited

Loading

Make the CSS styles "portable" #50

Make the CSS styles "portable" #50

Comments

nfreear commented Oct 10, 2018 • edited Loading

Long-term

Short-term

nfreear commented Oct 10, 2018 •

edited

Loading