Theming

Ukrop.css uses a number of variables that define its look and feel:

• --accent
• --accent12
• --accent25
• --contrast
• --error-color
• --text-color-light
• --text-color-dark
• --bg-light
• --bg-dark
• --border-radius
• --border-width

Example: Generic blog post

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pellentesque habitant morbi tristique senectus et netus et malesuada. Quam viverra orci sagittis eu volutpat odio. Sed cras ornare arcu dui vivamus arcu felis bibendum. Amet consectetur adipiscing elit ut aliquam purus sit.

Interdum posuere lorem

Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. At varius vel pharetra vel turpis nunc eget lorem dolor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis. Pellentesque id nibh tortor id aliquet lectus proin nibh nisl. Convallis convallis tellus id interdum velit laoreet id donec.

Morbi blandit cursus risus at. Amet aliquam id diam maecenas ultricies mi. Faucibus vitae aliquet nec ullamcorper sit amet risus.

Julius Caesar

Turpis egestas sed tempus urna et pharetra pharetra massa massa.

/* If it fits, it sits. If it sits, it fits. If it fits, it sits. If it sits, it fits.*/
h1, h2, h3, h4, h5, h6
    margin $outerSpacing 0 $innerSpacing
    &:first-child, aside:first-child + &
        margin-top 0

Sollicitudin tempor id eu nisl. Leo urna molestie at elementum eu facilisis sed. Consequat id porta nibh venenatis cras. Elementum sagittis vitae et leo duis ut. Felis bibendum ut tristique et.

Nisi scelerisque eu

Nisi scelerisque eu ultrices vitae auctor eu augue ut. At quis risus sed vulputate.

Blandit cursus risus at ultrices. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Nisl tincidunt eget nullam non nisi. Arcu cursus vitae congue mauris rhoncus aenean vel. Malesuada fames ac turpis egestas integer. Arcu non odio euismod lacinia at quis risus sed vulputate.

Faucibus vitae aliquet nec ullamcorper sit amet risus. Habitasse platea dictumst quisque sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example: Form elements

Example: Table

A little label at the top of the table is made by the caption tag.

Example: A very long table + section

Tables are not that easy to wrap or to constrain to specific size without an additional markup. If you are using semantic html only, the best way is putting it to a separate section. Still quite semant-y, and sections will show a scrolllbar underneath tables.

Example: A very long table + breaking rules

With a little aid of CSS + one div, you can make a table scrollable. This is not the semantic way™, but whatever:

<div style="overflow-x: auto;">
    <table>
        …
    </table>
</div>

Result: