Cybernautic Boilerplate

No margins, padding, text styling, or styling of any kind should be applied to <h1> - <h6> elements unless they have a class on them which the styling is coming from.

We want the SEO team to be able to throw a heading tag on anything without it changing the styling of the site.

That also means that <h1> - <h6> elements should not be available for the client to pick in the styles menu. Instead use <div> or <p> elements for headings.

Here's an example of a custom styles menu config json using <div> elements for headings:

[{ "title": "Button (Primary)", "class": "cms-btn", "element": "a" },{ "title": "Button (Secondary)", "class": "cms-btn cms-btn-secondary", "element": "a" },{ "title": "Button (Outlined)", "class": "cms-btn cms-btn-outlined", "element": "a" },{ "title": "Button (Outlined Secondary)", "class": "cms-btn cms-btn-outlined-secondary", "element": "a" },{ "title": "Heading 1", "class": "heading", "element": "div" },{ "title": "Heading 2", "class": "heading heading-2", "element": "div" },{ "title": "Heading 3", "class": "heading heading-3", "element": "div" },{ "title": "Divider", "class": "text-divider", "element": "hr" },{ "title": "Call Out Text", "class": "call-out-text", "element": "div"}]

The elements below represent what a client can add to a text page in the CMS. The site's default font family and font size should be added to to the "cms-frontend" class on the body element. This will effect anything that doesn’t already have a text style. To select the body element, first select any other element, then hit the up arrow until you get to body.

Styles added to the elements below should be mostly for fonts and font sizes. Colors can be controlled by our CMS text editor with a color picker, so we don't need to set different colors for every heading type. You can make a dummy class to show the client what those colors would look like on headings. Dummy classes used on headings below are "second-color" and "third-color".

Heading One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Text LinkCall out text. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Text Style Button

Heading Default Color

Heading Second Color

Heading Third Color

Heading Two

Heading Three

Accordion elements that can be added to any text page

Use the first example to add custom styles. The examples after the first one represent the actual markup for the accordions.
‍

Set Accordion Styles Here

Set icon marker color here by editing variable value

The accordion summary padding left/right and the icon/marker color are set using variables that match up with variable names used by our CMS. You can edit the variable values by hovering over the css property value then clicking the pencil icon.

Accordion Summary

Accordion Content

Accordion Summary

Accordion Content

Accordion Summary

Accordion Content

Accordion Summary

Accordion Content

Accordion Summary

Accordion Content

Accordion Summary

Accordion Content

Testimonial elements that can be added to any text page

There are 2 data attributes on the cms-testimonial div that control the shape of the image and if the testimonial should be horizontal or vertically stacked. If you click on the cms-testimonial div then click settings in the top right, you can see the data attributes there.
‍

"Vivamus leo orci, dapibus vel risus eget, dapibus rhoncus justo. Morbi turpis velit, vestibulum a risus eleifend, interdum viverra ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus."

- Tesimonial Author

This represents content inside a CMS text editor on the backend. Add the default font family, font color, font size, and background color styles to the "cms-backend" class. The width, and border styles will be hard set in the backend.

Text Styles