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. These will be automatically imported into your app's page without needing to edit the document head. 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</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/styles.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;
}

Moreover, 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:

<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.