PreAmp Mixer

PreAmp Mixer is VideoAmp's CSS framework.

Structure

Mixer is broken into the following partial groups:

- Helpers
- Base
- Components
- Utilities

_Helpers_ includes helper styles such as colors, variables, mixins, functions, themes, typography and layout.

_Base_ contains styles for base HTML elements.

_Components_ contain styles for the PreAmp Core component library.

_Utilities_ includes utility styles for animations, Tailwind utilities, etc.

Theming and Functional Classes

Mixer uses Tailwind to extend functional classes, making styling easy, clean and consistent. It also helps drive theming using CSS Custom Properties.

Themes are set up in the themes partial by modifying CSS custom property values scoped to a selector. For example .va-dark contains values for custom properties that override the values assigned to the :root level. Therefore, using the theme would require the addition of that theme's className added to the HTML element. A theme does not have to include overrides for all of the CSS custom property values, but any values not included will fall back to the defaults assigned to :root.

$3

The Tailwind framework requires the use of CSS Custom Properties to incorporate the property values in Javascript. One thing to note is that CSS Custom Properties are not interchangeable with SASS variables. Custom Properties are runtime variables, so when SASS is compiled, they have no value. That means that they cannot be used as values for SASS variables, functions or mixins.

$3

Tailwind creates functional CSS classes that can be used for styling, however it is not recommended that they be used directly in HTML markup. Instead you can extend these classes in your SASS files:

``sass .va-btn { @apply rounded py-2 px-4 font-normal text-va-button border-transparent border-2; }`

For more information on functional classes, visit the Tailwind documentation

`Helper Styles`

`$3`

The color palette and functionality are based on concepts from react-md.

Sass variables for each color are created from a function and can be used as va-palette("COLOR", "HUE"), or a specific example would be va-palette("blue", "400").

There are also CSS Custom Properties available for each color. They can be used as var(--va-blue-400).

A full list of the available colors can be found in the colors partial.

`$3`

Typography styles can be applied with the following classes, the default sizes are listed for reference:

The default sizes of these helper classes can be changed using themes.

`$3`

| className | font-weight | | ---------------- | ------------------ | |.u-font-thin | font-weight: 200| |.u-font-light | font-weight: 300| |.u-font-normal | font-weight: 400| |.u-font-medium | font-weight: 500| |.u-font-bold | font-weight: 700 |

`$3`

The Mixer grid layout is following and extending the Tailwind framework with some influence by Bootstrap's conventions. The grid is based on a 12 column grid using CSS Grid. The grid container must have the following classNames applied va-grid and either va-columns-default _or_ va-columns-fluid.

va-columns-default applies the 12 column grid that requires either 12 child elements, or fewer than 12 columns with the class col-span-${n} where the ${n} are numbers that add up to 12.

va-columns-fluid allows you to have however many child elements you want and they will all equally fill the space.

#### Usage Example

A container div with the class va-row is required for the columns to work correctly. Only columns should be direct childeren of rows.

`tsx


    Full Width Column



    50% Width Column

    50% Width Column



    These columns

    Fill the space

    Evenly


#### Gutters

By default the columns will have gutter spacing between them. The size of the gutter is configurable in the themes partial (1.5rem or 24px by default). To remove the spacing, add the class no-gutters to the container element. For example:

`tsx


    75% Width Column

    25% Width Column

$3

Media queries follow the screen specifications set up in the Tailwind framework as sm md lg and xl. Including them as part of the class names will apply them based on minimum width, so they will apply to that breakpoint and all above it.

| | sm | md | lg | xl| | ------------ | --------------- | -------------- | -------------- | -------------- | | Breakpoint | 576px | 768px | 992px | 1200px | | Class prefix |.col-span-sm- | .col-span-md | .col-span-lg | .col-span-xl |

For example, the following class additions:

`tsx


    
        Column Content


Will adaptively render as the following:

| Browser Size | Column Width | | ---------------------------------- | ------------------------------- | |sm breakpoint to md breakpoint | 100% (applies col-span-sm-12) | |md breakpoint to lg breakpoint | 50% (applies col-span-md-6) | |lg breakpoint and above | 25% (applies col-span-lg-3) |

`$3`

Utility classes to assist in visual display and layout.

| className | purpose | | ----------------------- | :---------------------------------------------------------------------- | |.va-sr-only| Only display content to screen readers | |.va-sr-only-focusable | Use with .va-sr-only to display screen reader content when it's focused |

Text inside the anchor will only be available to screenreaders and hidden from view.

`tsx Offscreen text`

Skip content link that is hidden from view but shown when it's focused.

`tsx Skip to main content`

`Publishing`

Publishes dist/ to https://www.npmjs.com/package/@preamp/mixer

`npm publish --access public`

`Linking packages`

For development in PreAmp, Mixer must be linked to the root directory in order for styles to be imported into documentation pages.

`bash

`Navigate to mixer and yarn link it`

$ cd packages/mixer $ yarn link

`Navigate back to root and link mixer`

$ cd ../.. $ yarn link "@preamp/mixer"`

For development in other applications, be sure to build the package of Mixer before linking.

`bash

`Navigate to mixer, build and create a link`

$ cd packages/mixer $ yarn build $ yarn link``

PreAmp Mixer

PreAmp Mixer is VideoAmp's CSS framework.

Structure

Mixer is broken into the following partial groups:

- Helpers
- Base
- Components
- Utilities

_Helpers_ includes helper styles such as colors, variables, mixins, functions, themes, typography and layout.

_Base_ contains styles for base HTML elements.

_Components_ contain styles for the PreAmp Core component library.

_Utilities_ includes utility styles for animations, Tailwind utilities, etc.

Theming and Functional Classes

Mixer uses Tailwind to extend functional classes, making styling easy, clean and consistent. It also helps drive theming using CSS Custom Properties.

$3

Tailwind creates functional CSS classes that can be used for styling, however it is not recommended that they be used directly in HTML markup. Instead you can extend these classes in your SASS files:

``sass .va-btn { @apply rounded py-2 px-4 font-normal text-va-button border-transparent border-2; }`

For more information on functional classes, visit the Tailwind documentation

`Helper Styles`

`$3`

The color palette and functionality are based on concepts from react-md.

Sass variables for each color are created from a function and can be used as va-palette("COLOR", "HUE"), or a specific example would be va-palette("blue", "400").

There are also CSS Custom Properties available for each color. They can be used as var(--va-blue-400).

A full list of the available colors can be found in the colors partial.

`$3`

Typography styles can be applied with the following classes, the default sizes are listed for reference:

The default sizes of these helper classes can be changed using themes.

`$3`

va-columns-default applies the 12 column grid that requires either 12 child elements, or fewer than 12 columns with the class col-span-${n} where the ${n} are numbers that add up to 12.

va-columns-fluid allows you to have however many child elements you want and they will all equally fill the space.

#### Usage Example

A container div with the class va-row is required for the columns to work correctly. Only columns should be direct childeren of rows.

`tsx


    Full Width Column



    50% Width Column

    50% Width Column



    These columns

    Fill the space

    Evenly


#### Gutters

`tsx


    75% Width Column

    25% Width Column

$3

For example, the following class additions:

`tsx


    
        Column Content


Will adaptively render as the following:

`$3`

Utility classes to assist in visual display and layout.

Text inside the anchor will only be available to screenreaders and hidden from view.

`tsx Offscreen text`

Skip content link that is hidden from view but shown when it's focused.

`tsx Skip to main content`

`Publishing`

Publishes dist/ to https://www.npmjs.com/package/@preamp/mixer

`npm publish --access public`

`Linking packages`

For development in PreAmp, Mixer must be linked to the root directory in order for styles to be imported into documentation pages.

`bash

`Navigate to mixer and yarn link it`

$ cd packages/mixer $ yarn link

`Navigate back to root and link mixer`

$ cd ../.. $ yarn link "@preamp/mixer"`

For development in other applications, be sure to build the package of Mixer before linking.

`bash

`Navigate to mixer, build and create a link`

$ cd packages/mixer $ yarn build $ yarn link``

@preamp/mixer

Dist Tags

PreAmp Mixer

Structure

Theming and Functional Classes

$3

$3

`Helper Styles`

`$3`

`$3`

`$3`

`$3`

$3

`$3`

`Publishing`

`Linking packages`

`Navigate to mixer and yarn link it`

`Navigate back to root and link mixer`

`Navigate to mixer, build and create a link`

@preamp/mixer

Dist Tags

PreAmp Mixer

Structure

Theming and Functional Classes

$3

$3

`Helper Styles`

`$3`

`$3`

`$3`

`$3`

$3

`$3`

`Publishing`

`Linking packages`

`Navigate to mixer and yarn link it`

`Navigate back to root and link mixer`

`Navigate to mixer, build and create a link`