Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>RL dev snippetsNew to Visual Studio Code? Get it now.
RL dev snippets

RL dev snippets

RL dev

|
19 installs
| (1) | Free
code snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Recent Changes

  • All snippet prefixes have been standardized to the new convention (e.g., add-css-, add-js-, add-font-, add-slider-, add-plp-*, etc.) for consistency and easier discovery. This affects all categories: CSS, JS, fonts, layout, markup, PLP, and sliders.
  • The growy slider snippet prefix is now 'add-slider-growy'.
  • All $staticlink$ references are now double-escaped as \\$staticlink\\$ in all snippet bodies and attributes for correct literal output.
  • All logo <img> tags now use both rlc-image and rlc-logo classes together (class="rlc-image rlc-logo").
  • All snippets comply with RL Creative CSS class rules for titles, colors, brands, and alignment.
  • Any previous changes that removed rlc-image from <img> tags have been reverted; both classes are present where needed.
  • All data-images and srcset attributes use the double-escaped format for $staticlink$.
  • New snippet: addCSSlooppause — CSS for looppause button without circular border.

Once installed. Type add into a HTML file to see usable snippets

Usable snippets

CSS files

trigger description
add-css-creative creative_v3 CSS file
add-css-stickynavexp stickynav exp CSS file
add-css-stickynav stickynav CSS file
add-css-productfeed productfeed stock CSS file
add-css-copyalignment copy alignment CSS file
add-css-cardstack cardstack CSS file
add-css-ingrid ingrid CSS file
add-css-fadeslider fadeslider CSS file
add-css-shell inline css style element including breakpoints
add-css-looppause CSS for looppause button without circular border

JS files

trigger description
add-js-creative creative JS file
add-js-loader JSloader markup to include gsap, scrolltrigger and customJS
add-js-fadeslider fadeslider JS file
add-js-cardstack cardstack JS file
add-js-stickynavexp stickynav exp JS file
add-js-stickynav stickynav JS file
add-js-custom custom JS file

Content/Layout/Markup

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-bannerproduct standard banner with productfeed markup
add-imagery imagery markup with picture tag
add-picture picture tag markup
add-video videocontainer markup
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-quickshoptarget quickshop + icon target
add-signature signature markup, styles, file references
add-scrollto scrollto arrow markup and styles
add-pillbutton pillbutton markup and styles

Sliders

trigger description
add-slider-fadeslider fade slider markup
add-slider-growy 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)
add-slider-autoslider autoslider slider markup (rlc-autoslider)

Productfeed/templates

trigger description
add-producttemplate productfeed template
add-productfeed productfeed
add-cardstacktemplate cardstack slide productfeed template

PLP

trigger description
add-plp-wrapper PLP in-grid wrapper
add-plp-1x1 PLP 1x1 in-grid
add-plp-moodbanner PLP Mood Banner

Font files

trigger description
add-font-creative Creative fonts
add-font-reduced Didot, Sackers, Fenice
add-font-sackers Sackers Font
add-font-northwell Northwell Font
add-font-rrl 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

💡 Feel free to recommend/supply me with templates, pieces of code you use frequently or any possible enhancement recommendations!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft