Once installed. Type add into a HTML file to see usable snippets
Usable snippets
CSS files
| trigger |
description |
addCSScreative |
creative_v3 CSS file (rlc-creative.3.6.5.min.css) |
addCSSstickynavexp |
stickynav exp CSS file (rlc-stickynav-exp.1.3.6.css) |
addCSSstickynav |
stickynav CSS file (rlc-sticky-sub-nav.css) |
addCSSproductfeed |
productfeed stock CSS file |
addCSScopyalignment |
copy alignment CSS file |
addCSScardstack |
cardstack CSS file (rlc-cardstack.2.0.css) |
addCSSingrid |
ingrid CSS file |
addCSSfadeslider |
fadeslider CSS file (rlc-fadeslider.2.3.css) |
addCSSshell |
inline css style element including breakpoints |
JS files
| trigger |
description |
addJScreative |
creative JS file (rlc-creative.1.2.6.1.min.js) |
addJSloader |
JSloader markup to include gsap, scrolltrigger and customJS |
addJSfadeslider |
fadeslider JS file (rlc-fadeslider.2.2.min.js) |
addJScardstack |
cardstack JS file (rlc-cardstack.2.2.js) |
addJSstickynavexp |
stickynav exp JS file (rlc-stickynav-exp.1.3.6.js) |
addJSstickynav |
stickynav JS file (rlc-sticky-sub-nav.1.1.min.js) |
Content
| trigger |
description |
add-shell |
page shell including starter CSS styles and creative_v3 wrapper element |
add-hero |
hero markup including video and textgroup |
add-banner |
standard markup for most banners includes wrapper, imagery, textgroup, standard CSS shell |
add-imagery |
imagery markup with picture tag |
add-picture |
picture tag markup |
add-video |
videocontainer markup |
add-popvid |
popup up video button |
add-foreground |
foreground wrapper, includes imagery markup |
add-background |
background markup with picture tag |
add-hotspot |
hotspot link markup |
add-copygroup |
copygroup markup with title, dek and CTA |
add-textgroup |
textgroup markup with title, dek and CTA |
add-title |
title header tag |
add-dek |
dek div |
add-links |
links markup including linecta |
add-include |
asset include |
add-cardstack |
cardstack slider markup |
add-fadeslider |
fade slider markup |
add-growyslider |
growy slider markup |
add-slider-buckets |
buckets slider markup (rlc-three__m_carousel) |
add-slider-category |
category slider markup (rlc-category_carousel) |
add-slider-banner |
banner slider markup (rlc-banner) |
add-slider-freescroll |
freescroll slider markup (rlc-freescroll) |
Productfeed/templates
| trigger |
description |
add-producttemplate |
productfeed template |
add-productfeed |
productfeed |
add-cardstacktemplate |
cardstack slide productfeed template |
PLP
| trigger |
description |
addPLPwrapper |
PLP in-grid wrapper |
addPLP1x1 |
PLP 1x1 in-grid |
addPLPmb |
PLP Mood Banner |
Font files
| trigger |
description |
addFONTcreative |
Creative fonts |
addFONTreduced |
Didot, Sackers, Fenice |
addFONTsackers |
Sackers Font |
addFONTnorthwell |
Northwell Font |
addFONTrrl |
RRL fonts |
General brand CSS
| trigger |
description |
add-menspoloCSS |
Mens Polo - generic styling for fonts, colors, elements |
add-purplelabelCSS |
Purple Label - generic styling for fonts, colors, elements |
add-collectionCSS |
Collection - generic styling for fonts, colors, elements |
add-womenspoloCSS |
Womens Polo - generic styling for fonts, colors, elements |
Future enhancements
- custom parameters and variables for certain snippets
- different carousel variants (product, shops, shop by category, autoplay)
- PLP grids/moodbanners - 1x2, 1x3, 1x4, 1x1 slider, 1x2 slider, etc
- Slider CSS UI
- Add signature shared asset
💡 Please recommend/supply me with templates, pieces of code you use frequently or any possible enhancement recommendations!
| |
