JavaScript seems to be disabled in your browser. For the best experience on our site, be sure to turn on Javascript in your browser.

Lorem ipsum dolor sit amet, consectetur adipiscing eli

9 day : 4 hours : 16 minutes : 12 seconds

Professional Discounts Free Shipping Financing Visit Us Start Your Journey

Free Room Design

Notes

Write here what you want others to know.

Link to our Hyva notebook with useful links, or write them here.

This page will be removed when needed, it's made just for example purposes.

Various

All migration, development stuff goes to Rta_Migration plugin as well as all database changes. We will uninstall it prior to live. Dont put in there code that should stay after site goes live.
Try not to inherit any previous code, let make it new and better.
All plugins should be in Rta namespace.
Make smaller updates, commits and PR-s.
Add "NOTE" comment if you need to explain something in the code or make a code backup. We will evaluate and delete those when close to live.

CSS

Changes to these base styles defined here are possible when it fits in wider picture, please edit them when you get to real example for using them. Lets make stable base styles as fast as possible, not to affect all down the line and to avoid miniscule edits of all single elements if base style dont work. Individual altered elements should be styled additionally to base styles.
Dont use styles in css files, use tailwind classes.
Dont put styles in css for individual elements, use tailwind classes in html itself. No unnecessary entries in style css, all should be done in templates.
Some methods used here are used only to confine page to one file or for easier copy/paste, should not be really used.

HTML and JS

All js should be in templates. See docs for multiple occurrences of same script on the page. We should not be putting js in cms pages and blocks anyway since that Cosmic security issue while back.
Lets try not to use cms blocks, pages full of html and even configuration stuff if its not necessary. So far we did not use majority of stuff we created for admin to be easily accessible for change. Since templates are not cached to much and we will doing changes anyway on prod if urgent, lets try to keep all in the code. We can evaluate this point during development.

.font-sans

Lorem ipsum dolor sit amet

.font-serif

Lorem ipsum dolor sit amet

h1

Lorem ipsum dolor sit amet

h2

Lorem ipsum dolor sit amet

h3

Lorem ipsum dolor sit amet

h4

Lorem ipsum dolor sit amet

h5

Lorem ipsum dolor sit amet

h6

Lorem ipsum dolor sit amet

p (default paragraph)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Lorem ipsum dolor sit amet, consectetur adipiscing eli.Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 300 (Light)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 400 (Normal)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 500 (Medium)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 600 (Semi-Bold)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 700 (Bold)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

Sans-Serif Font Weight: 800 (Black)

Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli. Lorem ipsum dolor sit amet, consectetur adipiscing eli.

ul li

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

ul.disc li

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

ul.decimal li

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

.info

Some information to display to the customer.

hr (default)

hr.dashed

hr.text

hr.symbol

text-primary

Example Text

text-primary-lighter

Example Text

text-primary-darker

Example Text

text-secondary (default)

Example Text

text-secondary-lighter (default)

Example Text

text-secondary-darker (default)

Example Text

text-rtablue

Example Text

text-rtablue-bright

Example Text

text-rtablue-brighter

Example Text

text-rtablue-light

Example Text

text-rtablue-lighter

Example Text

text-rtablue-darker

Example Text

text-rtared

Example Text

text-rtared-lighter

Example Text

text-rtared-darker

Example Text

bg-primary

bg-primary-light

bg-primary-lighter

bg-primary-bright

bg-primary-brighter

bg-primary-darker

bg-secondary

bg-secondary-bright

bg-secondary-darker

bg-container

bg-container-lighter

bg-container-darker

border-primary

border-primary-lighter

border-primary-darker

border-secondary

border-secondary-lighter

border-secondary-darker

border-container

border-container-lighter

border-container-darker

Basic button styles

.btn

.btn (focus)

.btn (disabled)

.btn.btn-primary

.btn.btn-primary (focus)

.btn.btn-primary (disabled)

.btn.btn-primary-light

.btn.btn-primary-light (focus)

.btn.btn-primary-light (disabled)

.btn.btn-secondary

.btn.btn-secondary (focus)

.btn.btn-secondary (disabled)

.btn.btn-white

.btn.btn-secondary (focus)

.btn.btn-secondary (disabled)

Additional button classes, can be combined

.btn.wide

.btn.icon

.btn.bordered

.btn.small

.btn.btn-primary.wide

.btn.btn-primary.icon

.btn.btn-primary.bordered

.btn.btn-primary.small

.btn.btn-secondary.wide

.btn.btn-secondary.icon

.btn.btn-secondary.bordered

.btn.btn-secondary.small

Using .btn.btn-primary as an example

.btn.btn-primary.wide.icon

.btn.btn-primary.wide.bordered

.btn.btn-primary.bordered.icon

.btn.btn-primary.bordered.wide.icon

.btn.btn-primary.wide.small

.btn.btn-primary.icon.small

.btn.btn-primary.bordered.small

.btn.btn-primary.wide.icon.small

.btn.btn-primary.wide.bordered.small

.btn.btn-primary.bordered.icon.small

.btn.btn-primary.bordered.wide.icon.small

Basic link styles, same as buttons.

Use paragraph as wrapper for normal links to avoid applying styles to all links on site, such as header, footer or various menu items. For others, just use btn classes.

a

a (focus)

a.disabled

a.btn

a.btn (focus)

a.btn.disabled

a.btn.btn-primary

a.btn.btn-primary (focus)

a.btn.btn-primary.disabled

a.btn.btn-secondary

a.btn.btn-secondary (focus)

a.btn.btn-secondary (disabled)

Additional link classes, can be combined, same as buttons

a.wide

a.icon

a.small

a.btn.wide

a.btn.icon

a.btn.bordered

a.btn.small

a.btn.btn-primary.wide

a.btn.btn-primary.icon

a.btn.btn-primary.bordered

a.btn.btn-primary.small

a.btn.btn-secondary.wide

a.btn.btn-secondary.icon

a.btn.btn-secondary.bordered

a.btn.btn-secondary.small

Using .btn.btn-primary as an example

a.btn.btn-primary.wide.icon

a.btn.btn-primary.wide.bordered

a.btn.btn-primary.bordered.icon

a.btn.btn-primary.bordered.wide.icon

a.btn.btn-primary.wide.small

a.btn.btn-primary.bordered.small

a.btn.btn-primary.icon.small

a.btn.btn-primary.wide.icon.small

a.btn.btn-primary.wide.bordered.small

a.btn.btn-primary.bordered.icon.small

a.btn.btn-primary.bordered.wide.icon.small