ccbayer

// Desktop First Approach
:root {
	--heading-1-size: #{px-to-rem(104px)};

	@media screen and (--bp-df-desktop-large) {
		--heading-1-size: #{clamp-calc(80px, 104px, calc($df-breakpoint-desktop + 1px), $df-breakpoint-desktop--large)};
	}

	// TODO: Check with UX if we can review the fluid range to fall to 1441px
	// instead of 1281px as 1280px is not a breakpoint value.

ccbayer

:root {
	--font-size-display-1: 40px;
	@media (--bp-tablet) {
		--font-size-display-1: 64px;
	}
	@media (--bp-desktop-sm) {
		--font-size-display-1: 72px;
	}
	@media (--bp-desktop-typography) {
		--font-size-display-1: responsiveFontSize(72px, 96px, $bp-size-desktop-typography, $bp-size-desktop-typography-max);

ccbayer

document.addEventListener('DOMContentLoaded', () => {
	const exportButton = document.querySelector('#export-media-csv');

	if (exportButton) {
		exportButton.addEventListener('click', (e) => {
			e.preventDefault();

			const url = `${ajaxurl}?action=export_media_csv`;
			// if URL is returned, generate a hidden button that JS clicks to download the CSV
			if (url) {

ccbayer

<div class="two-column">
    <div data-template="components/header.html"></div> <!-- this gets replaced with AEM include to the header component -->

    <div class="content-wrapper">

        <div class="navigation col-md-2" style="background: lightblue;">
            <div data-template="components/nav.html"></div> <!-- this gets replaced with AEM include to the nav component -->
        </div>
        <div class="content col-md-10" style="background: gray;">
            content

ccbayer

// Decode Query String into JSON Object

// usage: creates a function called queryStringDecode, that accepts a URL as a parameter and converts key value pairs into a JS object.
// Gets assigned to the window scope
// @see http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
(function () { var b = /\+/g, c = /([^&=]+)=?([^&]*)/g, f = function (a) { return decodeURIComponent(a.replace(b, " ")) }; function e(d) { var a = {}, g; while (g = c.exec(d)) { a[f(g[1])] = f(g[2]) } c.lastIndex = 0; return a } window.queryStringDecode = e })();


// examples

ccbayer

// create dynamic validation rules
					$this.find('input').each( function() {
						var 
							$this = $(this)
						;

						// check to see if this field has any special expresssons
						if($this.data('hasExpression')) {
							var 
								expression = $this.data('validationExpression')

ccbayer

 // create dynamic validation rules
                                        $this.find('input').each( function() {
                                                var 
                                                        $this = $(this)
                                                ;
                                                // add this 'name':'title' to validation messages
                                                if($this.hasClass('required')) {
                                                        messages[$this.attr('name')] = $this.attr('title');
                                                }

ccbayer

<%	for (int index= 0; index < Questions.Count; index++)
					{ %>
					<%	if(index == 0)
						{ %>
						<div class="question-block" id="the-sitecore-id">
					<%	} 
						else
						{ %>
						<div class="question-block vh" id="the-sitecore-id">
					<% } %>