Baroquest
Framework

Contrive-CORE

Contrive Creativity

The CORE of Baroquest Framework is to inspire creativity by being a starting point to build off of. This is done by contriving a suite of utility class libraries and consolidating them into a single CSS file: css/contrive.css.

All components specify the source of the CSS styling. These can be loaded and modified independently. CSS variables are used to specify certain values for some elements.

CSS

SOURCE: css/contrive.css

This is the only CSS file that needs to be loaded. It imports the following CSS files within the /css folder:

  • accents.css
  • backgrounds.css
  • default.css
  • frames.css
  • lace.css
  • ltc-grid.css
  • masks.css
  • movements.css
  • palette.css
  • seals.css
  • theme.css
  • typography.css

All of the above files (except default.css) import variables.css.

Variables

SOURCE: css/variables.css

This file is used to store global CSS variables, which are used to apply values to various CSS properties. Any used variables are mentioned in the component description. Below are the variables and their default values:

--fontsize: 16px;
--h1: 2.5rem;
--h2: 2.25rem;
--h3: 2rem;
--h4: 1.75em;
--h5: 1.5rem;
--h6: 1.25rem;
--minclamptext: 1rem;
--prefclamptext: 1.5rem;
--maxclamptext: 2rem;
--dcsize: 5rem; [dropcap size]

--padding: 1.25rem;
--spacebar: 2rem;

--container: 1200px; [wrapped max-width]
--gaps: 1rem; [gap spacing]
--colwidth: 5rem; [column width]
--crsize: 4px; [column-rule width]
--crcolor: #bf11fb; [column-rule color]

--corner: 1em; [rounded corner border-radius]
--bg: #bf11fb; [default background color]
--dur: 1s; [animation duration]
--delay: 0.5s; [animation delay]

Theme

SOURCE: css/theme.css

Use this file for custom styling and to override any of the previously contrived styles. Make sure this gets loaded LAST within the contrive.css file. Also, make sure that variables.css is imported:
@import url('variables.css');

Javascript

Some elements may require javascript to function. All files are found in the /js directory, which includes jQuery (version 3.5.1), which can be referenced by:
<script src="/js/jquery.3.js"></script>

If an element requires javascript, it is noted what files are required. As best practice, load vanilla javascript files before jQuery files. Any elements that do NOT require jQuery are vanilla javascript.

Recommended Libraries

Below are some javascript libraries that could be useful for dealing with complex UI/UX and animations.