Guides

Advanced Styling

To go beyond the standard Vinoshipper themes, you can use CSS Variables to define your own unique style.

Suggest Edits

As the Vinoshipper Injector evolves, your look can be maintained without having to define new styles.

General Notes

In order to maintain a consistent style, you must use CSS vars to control the advanced style. This insures your style stays as the Vinoshipper platform evolves.

Advanced Styling works best when you don't set a Simple Theming. This allows you to completely customize your style without any unintended side effects.

🚧

Color Contrast and Accessibility

When defining your own style, be mindful to style text with sufficient color contrast for accessibility. Check not only default, but :hover and :focus states for each button you style.

CSS Variables: Global

The following CSS Variables apply to all components. Start here to create a consistent custom style to your Vinoshipper Components, then look to each component's css variables. Values in this list are the default values. You do not need to define vars you do not wish to change.

/*
	NOTE: This sample code is defining vars at <body>.
  Use any CSS selector to narrow or broaden the scope.
*/
body {
  --vs-spacer: 1rem;
  --vs-gap: 1.5rem;
  --vs-font-family: inherit;
  --vs-font-weight: unset;
  --vs-header-font-family: inherit;
  --vs-header-font-weight: inherit;
  --vs-header-font-size: 1.3125rem;
  
  /* Badges: Uses include Product Catalog, Product Item, and Avaiable In. */
  --vs-badge-gap: calc(var(--vs-spacer, 1rem) * 0.75);
  --vs-badge-padding-y: 4px;
  --vs-badge-padding-x: 12px;
  --vs-badge-font-size: 0.75em;
  --vs-badge-font-weight: 600;
  --vs-badge-line-height: 1;
  --vs-badge-letter-spacing: normal;
  --vs-badge-color: #000000;
  --vs-badge-background-color: #cfe3fa;
  --vs-badge-border: inherit;
  --vs-badge-border-radius: 12rem;
  --vs-badge-text-transform: none;
  /* Badge: Restricted Variant */
	--vs-badge-restricted-color: #FFFFFF;
	--vs-badge-restricted-background-color: #6C757D;
	--vs-badge-restricted-border: inherit;
	--vs-badge-restricted-text-transform: none;
  /* Badge Tooltips */
	--vs-badge-tooltip-offset: 4px;
	--vs-badge-tooltip-arrow-size: 8px;
	--vs-badge-tooltip-color: #ffffff;
	--vs-badge-tooltip-background-color: #222222;
	--vs-badge-tooltip-padding-y: 12px;
	--vs-badge-tooltip-padding-x: 16px;
	--vs-badge-tooltip-border-radius: 4px;
	--vs-badge-tooltip-font-size: 1rem;
	--vs-badge-tooltip-font-weight: normal;
	--vs-badge-tooltip-text-transform: none;
	--vs-badge-tooltip-z-index: 100;
}

CSS Variables by Component

Each component has their own share of specific CSS vars. If there isn't a global CSS var, or if you want to make a change to only apply to a type of component, please look to each individual component's CSS Vars.

Responsiveness

Vinoshipper Injector Components use CSS container queries to response to the available width. This is different from viewport width as injected components will be smaller than the viewport width. While the Injector handles responsiveness automatically, it also provides classes to aid in advanced responsive styling.

Each component will add and change the following classes at the parent HTML.

BreakpointClass NameContainer Width
Extra smallNo class name<504px
Small.vs-breakpoint-sm≥504px
Medium.vs-breakpoint-md≥696px
Large.vs-breakpoint-lg≥920px
Extra large.vs-breakpoint-xl≥1128px
Extra extra large.vs-breakpoint-xxl≥1328px

Styling for Responsiveness

Let's say you wanted to change the color of our borders, but only on large container widths and up. This example would set your Product Item borders to pink, reverting to the default color on lower container widths.

.vs-product-item.vs-breakpoint-lg,
.vs-product-item.vs-breakpoint-xl,
.vs-product-item.vs-breakpoint-xxl {
  --vs-products-border-color: pink;
}

Note: The breakpoints -xl and -xxl are included in order to include all breakpoints larger than -lg.

Example

Say you were including the Available In component. Your HTML will look like this:

<div class="vs-available"></div>

Upon rendering, the container width of the available component becomes 700px wide. This will add the .vs-breakpoint-md class to the <div>.

<div class="vs-available vs-breakpoint-md"></div>

Say you decreased the size of the viewport window and the resulting container width became 550px. Your <div> would now have the .vs-breakpoint-sm class.

<div class="vs-available vs-breakpoint-sm"></div>

Finally, if you further decreased the size of the viewport window and the resulting container width became 400px, your <div> would not contain any .vs-breakpoint-* classes.

<div class="vs-available"></div>

Updated 8 months ago