Pattern
The Teva VI has a background Pattern system to use in conjunction with Heroes and Cards. It provides the background pattern and background color since they are in relation to each other.
A specific pattern can be manually picked by using modifiers or applied at random.
Primary #
Patterns circles, dots, lines, dashes against primary background.
Use modifiers --primary, --primary-circles, --primary-dots, --primary-lines and --primary-dashes.
<div class="vi-pattern vi-pattern--primary">
...
</div>
<div class="vi-pattern vi-pattern--primary-circles">
...
</div>
<div class="vi-pattern vi-pattern--primary-dots">
...
</div>
<div class="vi-pattern vi-pattern--primary-lines">
...
</div>
<div class="vi-pattern vi-pattern--primary-dashes">
...
</div>Gradient #
Gradient background overlayed with moment circles.
Use modifiers --gradient or --gradient-moment-1 to --gradient-moment-6.
<div class="vi-pattern vi-pattern--gradient">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-1">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-2">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-3">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-4">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-5">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-6">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-7">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-8">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-9">
...
</div>
<div class="vi-pattern vi-pattern--gradient-moment-10">
...
</div>Neutral #
Patterns circles, dots, lines, dashes against neutral background.
Use modifiers --neutral-circles, --neutral-dots, --neutral-lines and --neutral-dashes.
<div class="vi-pattern vi-pattern--neutral-circles">
...
</div>
<div class="vi-pattern vi-pattern--neutral-dots">
...
</div>
<div class="vi-pattern vi-pattern--neutral-lines">
...
</div>
<div class="vi-pattern vi-pattern--neutral-dashes">
...
</div>Random #
A pattern can be applied at random. Without javascript it only works when used in a Grid column. When javascript is enabled, a deterministic pseudo-random number is used to pick a pattern from the set. The pseudo-random number is determined by the content of element with the pattern. There will be no sequential patterns from the same set and when nested patterns will always differ.
The examples below have no content and thus fall back to css based on Grid columns.
Random Primary Gradient #
Use --random-primary-gradient for random picks from the primary and the gradient without moment circles patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-primary-gradient">
...
</div>
</div>
...other columns
</div>
</div>Random Primary Gradient Moment #
Use --random-primary-gradient-moment for random picks from the primary and a selection from gradient with moment circles patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-primary-gradient-moment">
...
</div>
</div>
...other columns
</div>
</div>Random Gradient Moment #
Use --random-gradient-moment for random picks from the gradient with moment circles patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-gradient-moment">
...
</div>
</div>
...other columns
</div>
</div>Random Primary #
Use --random-primary for random picks from the primary patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-primary">
...
</div>
</div>
...other columns
</div>
</div>Random Primary Pattern #
Use --random-primary-pattern for random picks from the primary patterns except for --primary.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-primary-pattern">
...
</div>
</div>
...other columns
</div>
</div>Random Neutral #
Use --random-neutral for random picks from the neutral patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-neutral">
...
</div>
</div>
...other columns
</div>
</div>Random Primary Gradient Neutral #
Use --random-primary-gradient-neutral for random picks from the primary, the gradient and the neutral patterns.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-15">
<div class="col-sm-4 col-lg-2">
<div class="vi-pattern vi-pattern--random-primary-gradient-neutral">
...
</div>
</div>
...other columns
</div>
</div>Stylesheets #
The following stylesheet is required to display this component.
The following additional stylesheet is used to display the example(s).
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- Infinite loop on sequential sets of 1 length.
Added
- Added random set
--random-primary-pattern (without plain version)
- PBS support
data-pattern-seed data-attribute. When set to random, js is forced to generate none deterministic random.- Art Direction (rules about pattern combinations)
- Added random set
--random-primary-gradient-neutral
- Added random set
--random-gradient-moment
- Initial draft