Styling Genie apps

Cascading Style Sheets (CSS) is a language for styling HTML documents, enabling developers to separate design from content. CSS enhances websites with visually appealing layouts, improved loading times, responsive design, and cross-browser compatibility.

In a Genie app you can use inline CSS style attributes or define your own stylesheets in the public/ folder and import them with

Stipple.Layout.add_css("froop.css", "bootstrap.css")

If you write your styles in public/css/genieapp.css, these will be automatically imported into your app's page. Moreover, you can also use the predefined classes provided by the Quasar framework.

Here's an example of a page using several CSS styles and classes:

 [h1(class="blue-text", "Heading"),
 p(style="color: green; background: cyan", "Inline styled paragraph."),
 p(class="red-text","Paragraph with class.")]

<h1 class="blue-text">Heading</h1>
<p style="color: green; background: cyan">Inline styled paragraph.</p>
<p class="red-text">Paragraph with class.</p>

The classes are defined in the public/css/genieapp.css file, where specific elements are targeted with selectors:

/* Class Selector */
.red-text {
  color: red;
}

/* Element Selector */
p {
  font-size: 14px;
}

/* Class Selector */
.blue-text {
  color: blue;
}

Using Quasar classes

The Quasar components come with their own pre-defined CSS classes. These classes are added to the HTML elements to style the layout, paddings, and more. For example, the q-pa-sm class adds small padding to an element, while the col-12 class sets the width of a column in a 12-column grid layout:

cell(class="q-pa-sm col-12", 
    p("This paragraph has small padding and takes the full width of the container."))

<div class="q-pa-sm col-12">
  <p>This paragraph has small padding and takes the full width of the container.</p>
</div>

Check the official Quasar documentation for a comprehensive list of available classes: Quasar CSS Helpers.

Using Tailwind CSS

Tailwind CSS is a popular framework providing a set of utility classes to style a page. With it you can customize almost every aspect of your app's design without having to define your own stylesheets. See this page for a list of available classes. To use Tailwind, include the necessary JavaScript with

Stipple.Layout.add_script("https://cdn.tailwindcss.com")

Here's the previous example using Tailwind classes:

cell(class="p-4 w-full bg-blue-100 border border-blue-200 rounded shadow", 
    p(class="text-blue-800 font-semibold", "This paragraph has moderate padding, a blue background, a rounded border, and a shadow, taking the full width of the container."))

<div class="p-4 w-full bg-blue-100 border border-blue-200 rounded shadow">
  <p class="text-blue-800 font-semibold">This paragraph has moderate padding, a blue background, a rounded border, and a shadow, taking the full width of the container.</p>
</div>