Uhuu Docs

Appearance

Styling And External Libraries ​

CSS ​

Style templates using CSS.

css
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Page Breaks ​

CSS properties can be used to manage the content flow across pages.

You can leverage the page-break-before, page-break-inside and page-break-after CSS properties to indicate how the content should behave. If for instance you want every level 1 heading to be preceded by a page break, you can do so with page-break-before:

css
h1 {
  page-break-before: always;
}

That’s it!

The most frequent values you will use will be the followings:

auto Automatic page-breaks (default)

always Always insert a page-break before the element

avoid Avoid page-break before the element (if possible)

INFO

If you want to be able to control where your page break get inserted, you can define a .pageBreak class that will insert a page break before itself.

css
.pageBreak {
  page-break-before: always;
}

That way you can place a <div> tag with this class everytime you want a page break:

html
<p>I am a paragraph</p>
<div class="pageBreak"></div>
<p>Hey look I am on another page!</p>

alternatively page-break-after property is also available for breaking after the page.

css
.pageBreakAfter {
  page-break-after: always;
}

Orphans And Widows ​

Another way you can get a better behavior from your content is by providing hints about how a paragraph should deal with lines that are left alone at the end or beginning of a page.

The orphans property gives the minimum lines that must be left at the end of a page. If a paragraph cannot respect this minimum a page break will be inserted before it.

css
p {
  orphans: 3;
}

In the same spirit, the widows property gives the minimum lines that must be left at the beginning of a page. If a paragraph cannot respect this minimum a page break will be inserted before it.

css
p {
  widows: 3;
}

External Libraries ​

Uhuu does not provide any default styling, that way you can define your own ones. This means that you can import any external library available on a CDN for example.

Styling ​

Say you wanted to import the Tailwind CSS library. You can simply use the @import instruction to do so:

css
@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');

and then start using classes from Tailwind:

html
<section class="bg-gray-50">
  <div class="px-4 mx-auto max-w-xl py-16 grid">
    <div class="flex flex-col justify-center">
      <h1 class="mb-4 font-extrabold tracking-tight leading-none text-gray-900 text-6xl">We invest in the world’s potential</h1>
      <p class="mb-6 text-xl font-normal text-gray-500">We focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
    </div>
  </div>
</section>

Fonts ​

External fonts can also be included. Uhuu does not provide any specific font by default by you can use Google Fonts for instance. You can use @import for that too:

css
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

h1 {
  font-family: 'Permanent Marker';
}

Icons ​

if you want to use icon fonts, you can import them too. For example import font-awesome:

css
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

and start using in your HTML.

html
<i class="fa-solid fa-sailboat text-7xl text-blue-400"></i>