rss.xml

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>HAX-the-web</title>
    <link>/rss.xml</link>
    <description>Documentation and learning about how we HAX the web</description>
    <copyright>Copyright (C) 2019 </copyright>
    <language>en-us</language>
    <lastBuildDate>Tue, 13 Aug 2019 08:11:57 -0600</lastBuildDate>
    <atom:link href="/rss.xml" rel="self" type="application/rss+xml"/>
    <item>
      <title>Roadmap</title>
      <link>/home/roadmap</link>
      <description>
          <![CDATA[ <h3>HAX encompasses many different projects</h3>
<p>This roadmap illustrates all the projects related to HAX and ELMS:LN, which HAX comes from. The little settings gears found throughout illustrate enhancements and next steps for the different projects in our wheel house.</p>
<img src="files/Roadmap.jpg" style="width: 100%;"/><p>As you can see, there's a lot of planned enhancements to HAXeditor and HAXcms with a lot of additional future capabilities in ELMS:LN as a result of these projects. It's important to understand these relationships through and how innovations flow between them.</p>
<h3 class="hax-active">Relationships of major pieces</h3>
<p>HAX has many different parts detailed here, so let's look at the relationship between these pieces before getting into the roadmap. HAX projects are part of the ELMS:LN organization and so ELMS:LN is also included in these roadmap details.</p>
<p>HAXiam, HAXcms, HAXeditor are three projects that make up the "HAX" name space, all of which benefit from being built on web components. HAXiam is a server technology while HAXcms is a mix of server and front end assets. HAXeditor is fully front-end code which then requires a backend to save and load pages from.</p>
<p>Below is an image consolidating information found on this site with arrows illustrating flow of innovation. Web components are always our building blocks, usually bubbling up as a need in either ELMS:LN, HAXcms or HAXeditor. From there, HAXeditor influences and improves ELMS:LN and HAXcms. ELMS:LN has a copy of HAXcms inside of it so sees improvements from both platforms. HAXiam just makes sure that copies of HAXcms are generated.</p>
<img src="files/haxrelationships.jpg" style="width: 100%;"/><p>Now with this foundation you can dig into the different pieces of the project roadmaps.</p>
 ]]>
      </description>
      <category></category>
      <guid>/home/roadmap</guid>
      <pubDate>Thu, 08 Aug 2019 12:53:07 -0600</pubDate>
    </item>
    <item>
      <title>ClassicPress</title>
      <link>/integrations/classicpress</link>
      <description>
          <![CDATA[ <p><a href="https://www.classicpress.net/">ClassicPress</a>





 is a popular fork of WordPress that's even easier to get HAX up and running then it is in the original!</p>
<ol>



<li>Get the <a href="https://github.com/elmsln/wp-plugin-webcomponents">Web component plugin</a>



, unzip and rename to webcomponents</li>







<li>Get the <a href="https://github.com/elmsln/wp-plugin-hax">HAX plugin</a>



, unzip and rename to hax</li>







<li>Put both of these plugins in your <b>wp-content/plugins/</b>



 directory</li>



<li>Go into your site's plugins area and enable both <b>wp-admin/plugins.php</b>


</li>



<li>Go to edit / create a page/post and you are HAXing</li>







</ol>
<h2><span style="letter-spacing: -0.48px;" class="hax-active">Installation video</span></h2>
<video-player accent-color="cyan" dark="dark" iframed="iframed" is-a11y-media="is-a11y-media" is-youtube="is-youtube" lang="en" media-title="Installing ClassicPress with HAX" preload="metadata" source="https://www.youtube.com/watch?v=q0IjUz2_IhA" source-type="youtube" sticky-corner="top-right" youtube-id="q0IjUz2_IhA" schema-resource-id="#85219ed3-d806-24d7-5c02" resource="#85219ed3-d806-24d7-5c02" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 100%; margin: 0px auto; display: block;" sources="[]" tracks="[]"></video-player>
 ]]>
      </description>
      <category></category>
      <guid>/integrations/classicpress</guid>
      <pubDate>Thu, 08 Aug 2019 09:43:29 -0600</pubDate>
    </item>
    <item>
      <title>Why HAXcms</title>
      <link>/home/why-haxcms</link>
      <description>
          <![CDATA[ <grid-plate layout="8/4" responsive-size="md" style="width: 100%;">
<p slot="col-1">HAXcms, which powers this website, is hard to describe exactly what "kind" of system it is. That's because given that it's 100% web components, decoupled, and static by design, it's hard to put it in a category so let's just spell out some of the key features and you can decide</p>




<img src="https://media0.giphy.com/media/3o7qDP28LG5LrVYfde/giphy.gif" alt="Gotham animation saying 'what is it?'" slot="col-2" style="width: 75%;"/>

<p><br/></p>


</grid-plate>
<h2>Features</h2>
<ul><li>Micro-site manager, so manage multiple sites from a single HAXcms install</li>


<li>Each site is powered by static files which live in version control</li>



<li>Every change is executed by the front end via HAX / Outline tools</li>


<li>Every change is automatically tracked in version control (zip the folder and send it to a friend and it'll work)</li>


<li>The "database" is powered by a site.json file that lives with the site</li>


<li>All operations write to static files so every change is as if you editing HTML by hand (but you didn't... HAX did)</li>


<li>Ability to serve up as a static site on CDNs (this site is on GH pages + a CDN) via Publishing which makes a purely static copy with a service worker and the whole jazz for offline / installable capability (0 config)</li>


<li>Build your own themes via custom front end dev if you like or use one of our baked in ones</li>


</ul>
<p><span style="letter-spacing: -0.48px;">So it's a flat file generator with a UI and the UI contextually loads based on if you should see it. It's weird, we know, and that's also why we have trouble describing what it is. It's a flat file CMS without tooling required. It's a sustainable way of building and maintaining a "CMS" as it has multiple pages, can handle custom fields, custom themes, but yet it doesn't require infrastructure to keep running beyond PHP / node / Beaker browser to act as a back end to edit the static files.</span></p>
<p><span style="letter-spacing: -0.48px;">It's an organic CMS. A living yet permanent website. It's hacking the limitations of content authoring capabilities. It's why we say, we're HAX The Web.</span></p>
<h2>Core Principles</h2>
<ul><li>Support all platforms and devices (CMS, App, etc)</li>



<li>Empower authors to write code without ever looking at code</li>



<li>All content produced must work with or without HAXeditor available</li>



<li>Support older markup, regardless of structure, as best we can</li>



<li>HAX will learn the rules of producing elements, it won't dictate them</li>




<li>Decentralize all the things, empower all the peoples</li>




</ul>
<h4>Cross platform</h4>
<p>Because we've adopted the <a href="https://webcomponents.org/">web component</a>













 standard in the development of both HAX (authoring system) and HAXCMS (content management), everything we create and compile via our <a href="https://github.com/elmsln/wcfactory">open tooling</a>


 can support about 98.4% of all browser traffic globally without server side rendering. HAXcms also employs a progressive enhancement methodology meaning that it can hit 100% of all browsing traffic with content.</p>
<p>This means that you can use the latest and greatest of the web and not have to constantly worry about a library changing! The dawn of the age of web components is now, join the revolution!</p>
<h4>Platform support</h4>
<ul><li><i>Evergreen</i>
 <i>browsers</i>
 (93+% of traffic) - no polyfills!<br/></li>










<li>IE 11 / Edge <18 / older platforms - polyfills</li>
<li><a href="/f-a-q-">See F.A.Q.</a>
 for a more detailed break out of stats</li>



</ul>
<img src="files/2019-01-29_22-47-53.png" alt="Browser support chart showing that web components are natively supported on almost all platforms" style="width: 75%; margin: 0px auto; display: block;"/><h4>No content lock-in</h4>
<p>The elements that make up HAX can be delivered via a CDN or installed locally. This means that the functionality is tied <b>to the browser</b>













 and <b>NOT</b>













 to the platform itself (huh?). Well, think of all the complex functionality of any site you've ever built or used. Then add content to that site. Now move that site (in your mind) to another server. What has to be migrated to maintain the content functioning that isn't actually content?</p>
<h4>For example, take this quiz:</h4>
<multiple-choice title="Decoupled question" check-label="Check answer" reset-label="Reset" hide-title question="Is this decoupled... I mean.. REALLY decoupled, if it would work on other webpages?" correct-text="Great job!" incorrect-text="Better luck next time!" randomize typeof="oer:Assessment" resource="#dd2feacf-ed4a-dcb0-b85d" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " answers="[{&quot;correct&quot;:null,&quot;label&quot;:&quot;Umm.. I think?&quot;},{&quot;correct&quot;:null,&quot;label&quot;:&quot;There's no way it actually is&quot;},{&quot;correct&quot;:null,&quot;label&quot;:&quot;Decoupled?&quot;},{&quot;correct&quot;:true,&quot;label&quot;:&quot;Yeah this really will work anywhere!&quot;,&quot;userGuess&quot;:false}]" accent-color="grey" schema-resource-id="#dd2feacf-ed4a-dcb0-b85d" __utils="[object HTMLElement]"></multiple-choice>
<p></p>
 ]]>
      </description>
      <category></category>
      <guid>/home/why-haxcms</guid>
      <pubDate>Wed, 24 Jul 2019 06:45:22 -0600</pubDate>
    </item>
    <item>
      <title>Scavenger Hunt</title>
      <link>/scavenger-hunt</link>
      <description>
          <![CDATA[ <h3>Become part of our dynasty franchise *<br/><sub>*by wearing a cool jersey</sub>


</h3>
<p>We're building the greatest roster of people ever to HAX the complacency of our industry. Take the HAX scavenger hunt at the next event to join the movement!</p>
<p><span style="font-size: var(--haxcms-base-styles-p-font-size, 24px); letter-spacing: var(--haxcms-base-styles-p-letter-spacing, 0.5px); caret-color: rgb(25, 30, 35);">Past winners</span><span style="font-size: var(--haxcms-base-styles-p-font-size, 24px); letter-spacing: var(--haxcms-base-styles-p-letter-spacing, 0.5px); caret-color: rgb(0, 0, 0);"> rocking their merch from completing the hunt!</span></p>
<ul><li><a href="https://twitter.com/btopro/status/1154768088199573506">@onelittlebecca</a>


 - at DrupalGovCon '19</li>


<li><a href="https://twitter.com/btopro/status/1154770586679332865">@JProffitt</a>


 - at DrupalGovCon '19</li>

<li><a href="https://twitter.com/btopro/status/1159530882182635520">@natefollmer</a>

 - IRL Aug '19<br/></li>


</ul>
<task-list style="width: 100%;" name="How to get a HAX The Web jersey" _resource-link="[object HTMLLinkElement]" schema-resource-id="#eda739ef-9142-c05e-c571" resource="#eda739ef-9142-c05e-c571" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " typeof="oer:SupportingMaterial" tasks="[{&quot;name&quot;:&quot;Take a picture of @btopro at event with HAX The Web jersey he's wearing and post on social media&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Star / follow the HAXcms repo - https://github.com/elmsln/haxcms&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Tell a friend about HAX and HAXcms&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;git clone https://github.com/elmsln/haxcms using ddev / MAMP / anything you use for local dev&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Post screenshots of HAXcms using #HAXTheWeb&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Let us send photo out of you wearing jersey&quot;,&quot;link&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Cherish it forever&quot;,&quot;link&quot;:&quot;&quot;}]"></task-list>
<meme-maker alt="rhyming leonardo dicaprio GIF" image-url="https://media2.giphy.com/media/g9582DNuQppxC/giphy.gif" top-text="You got this" bottom-text="You 1337 HAXor" imageurl="https://media2.giphy.com/media/g9582DNuQppxC/giphy.gif" toptext="rhyming leonardo dicaprio GIF" style="width: 75%; margin: 0px auto; display: block;"></meme-maker>
 ]]>
      </description>
      <category></category>
      <guid>/scavenger-hunt</guid>
      <pubDate>Wed, 24 Jul 2019 06:15:37 -0600</pubDate>
    </item>
    <item>
      <title>HAXiam</title>
      <link>/haxiam</link>
      <description>
          <![CDATA[ <p>HAXiam (<i>HAX-I-Am</i>
) is a SaaS platform code base that's used to deploy HAXcms to multiple people. It is an abstraction on the HAXcms code base that enables it to be used by multiple users from a single point of deployment.</p>
<p>HAXiam leverages the hooks built into HAXcms to allow for integration with Enterprise login providers, making it a perfect fit for organizations looking to provide their users with micro-site publishing.</p>
<p>It's still early on but you can <a href="https://github.com/elmsln/HAXiam/">check out HAXiam on github</a>
.</p>
 ]]>
      </description>
      <category></category>
      <guid>/haxiam</guid>
      <pubDate>Sun, 19 May 2019 20:49:29 -0600</pubDate>
    </item>
    <item>
      <title>Haxor Slevin</title>
      <link>/haxor-slevin</link>
      <description>
          <![CDATA[ <p>Oh? So you think you're 1337 3l33t 3H?</p>
<p>Well step right up and jump into the world of hackers and numbers. Ones. Zeros. It's a whole universe of them. You're fighting for control of your online digital identity in a world ruled by an army of Agent Smith's just trying to break you</p>
<a11y-gif-player src="https://media1.giphy.com/media/twpYnBnUobHRm/giphy.gif" src-without-animation="https://media0.giphy.com/media/twpYnBnUobHRm/480w_s.jpg" alt="The matrix dodging to be silly which is playing infinitely cause you can't actually hit Agent Smith." schema-resource-id="#d402ffaf-184a-49fa-d110" resource="#d402ffaf-184a-49fa-d110" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org "></a11y-gif-player>
 ]]>
      </description>
      <category></category>
      <guid>/haxor-slevin</guid>
      <pubDate>Wed, 15 May 2019 13:36:50 -0600</pubDate>
    </item>
    <item>
      <title>Life cycle</title>
      <link>/life-cycle</link>
      <description>
          <![CDATA[ <p>This is a general life cycle that happens when HAXcms "boots up". When web components are unpacking the contents of what to do it generally will work this way.</p>
<ul><li>page load, should it be no-js or a web component delivered, preflight</li>
<li>haxcms-site-builder loads site.json, reads JSON Outline Schema and starts to bootstrap that into a theme, items, title, etc</li>
<li>Appends a haxcms-editor-builder tag which checks for "context"</li>
<li>Context is established based on global values for php, nodejs, beaker, etc<br/></li>
<li>Uses a login end point to check if there's a JWT in the user's local data</li>
<li>When it finds a backend, it <a href="https://github.com/elmsln/lrnwebcomponents/tree/master/elements/haxcms-elements/lib/core/backends">injects a tag to bridge that backend</a>
</li>
<li>HAXeditor gets injected into the correct place in the theme which then all of that unpacks and does its thing</li>
</ul>
 ]]>
      </description>
      <category></category>
      <guid>/life-cycle</guid>
      <pubDate>Fri, 05 Apr 2019 14:27:27 -0600</pubDate>
    </item>
    <item>
      <title>I have issues</title>
      <link>/i-have-issues</link>
      <description>
          <![CDATA[ <p>Yea yea, we all do.</p>
<p>Oh, you have a problem or would like to contribute to HAXcms (that's awesome!). All issues, feature requests and general thumbs up should happen in our issue queue on github: <a href="https://github.com/elmsln/haxcms/issues">https://github.com/elmsln/haxcms/issues</a>
</p>
<a11y-gif-player src="https://media3.giphy.com/media/4Mni3cxTuKHDi/giphy.gif" src-without-animation="https://media1.giphy.com/media/4Mni3cxTuKHDi/480w_s.jpg" alt="issues smiling by Third Rail with OZY" resource="#b54c9847-4d26-90ae-d748" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 50%; margin: 0px auto; display: block;"></a11y-gif-player>
 ]]>
      </description>
      <category></category>
      <guid>/i-have-issues</guid>
      <pubDate>Mon, 25 Mar 2019 17:24:55 -0600</pubDate>
    </item>
    <item>
      <title>Troubleshooting</title>
      <link>/troubleshooting</link>
      <description>
          <![CDATA[ <p>These are some common issues / resolutions in HAXcms related to installation, publishing, etc.</p>
<h2 class="hax-active">I installed HAXcms and forgot my password</h2>
<p>Your username and password can be found in _config/config.php on the server (assuming local development)</p>
<h2 class="hax-active">I clicked login and nothing happened and now I'm locked out.</h2>
<ul><li>Clear your browser cache. A cookie is set that might be invalid.</li>

<li>Open a new browser and try to login again</li>
</ul>
<h2 class="hax-active"><span style="caret-color: rgb(0, 0, 0);">I clicked publish and nothing happened</span></h2>
<ul><li><span style="caret-color: rgb(0, 0, 0);">Publishing can take up to a minute or so at times since it's creating a commit, rewriting files and then the front end is waiting on the push to github before it triggers a successful response.</span></li>
<li>If it did fail to publish, you might not have git setup. Click the gear icon on the dashboard (site listing) and ensure you've setup github / git integration correctly.</li>
</ul>
<p><span style="caret-color: rgb(0, 0, 0);">Realize that everything is just a file and that our json outline schema is very easy to read. So if there's an issue with something related to publishing, check _sites/mysite/site.json for publishing, then _config/config.json. All settings and variables cascade in this way. Settings are stored globally, then replicated locally to allow them to be pealed off and more easily imported / exported into other setups.</span></p>
 ]]>
      </description>
      <category></category>
      <guid>/troubleshooting</guid>
      <pubDate>Mon, 25 Mar 2019 17:16:04 -0600</pubDate>
    </item>
    <item>
      <title>Skin a site</title>
      <link>/skin-a-custom-theme</link>
      <description>
          <![CDATA[ <p>Theme skinning is the easiest way to build a decent looking theme in HAXcms. This method is geared toward people that know CSS and HTML but can't get into the weeds of web components or javascript.</p>
<p>Workflow</p>
<ol><li>Make a new site in the HAXcms UI</li>

<li>Select "Custom theme" as your theme</li>
<li>In the file system go to _sites/<i style="">mynewsite</i>
/theme</li>
<li>Edit theme.html to modify the structure</li>
<li>Edit theme.css to modify the design</li>
</ol>
<p><span style="caret-color: rgb(0, 0, 0);">This is the easiest way to skin HAXcms to your liking. It's able to ship and work in CDNs and is the minimal barrier to entry for those used to seeing HTML and CSS files that they can touch and see the change. It requires no tooling to utilize either!</span></p>
<meme-maker alt="bryan cranston mic drop GIF" image-url="https://media0.giphy.com/media/15BuyagtKucHm/giphy.gif" top-text="Theme" bottom-text="Developer" style="width: 75%;"></meme-maker>
 ]]>
      </description>
      <category></category>
      <guid>/skin-a-custom-theme</guid>
      <pubDate>Sat, 23 Mar 2019 09:21:47 -0600</pubDate>
    </item>
    <item>
      <title>Query examples</title>
      <link>/query-examples</link>
      <description>
          <![CDATA[ <person-testimonial style="width: 75%; margin: 0px auto; display: block;" elevation="1" image="https://media1.giphy.com/media/3t7RAFhu75Wwg/giphy.gif" name="Dwight K Schrute" position="Assistant to the regional Web component developer manager" accent-color="grey">  <span>Hold up there. You didn't cover any of the query tags in that last section!</span>
</person-testimonial>
<p>Ok ok, here's the deal. Queries are so important that they needed their own section. Calm down Dwight we'll handle that now.<span style="caret-color: rgb(25, 30, 35);"> </span><span style="caret-color: rgb(0, 0, 0);">The <b><i>site-</i>

</b>

 query elements are incredibly powerful aspects of HAXcms theming that deserve their own section anyway.</span></p>
<h2><a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/ui-components/query/site-query.js">site-query</a>

</h2>
<h3>Code Example</h3>
<code-sample>  <template preserve-content="preserve-content">&lt; site-query
result="{{result}}"
conditions='{"metadata.tag": "funny"}'
&gt;
&lt; /site-query&gt;

<iron-list id="list" items="[[__items]]" grid="" mutable-data="">
  <slot></slot>
</iron-list></template>
</code-sample>
<h3 class="hax-active">Spoken Example</h3>
<p>"Give me all of the </p>
<person-testimonial elevation="1" image="https://media1.giphy.com/media/3o6wrgksPVF3SMrLHO/giphy.gif" name="sacha baron cohen" position="King of castles" accent-color="light-blue" style="width: 75%; margin: 0px auto; display: block;">  <span>Give me all of the pages who have a tag "Funny"</span>
</person-testimonial>
<h3 class="hax-active">When it's useful</h3>
<p>Always. This is by far the most powerful element in our library. It can query the site structure and effectively return anything, anywhere that matches the criteria. It is for exact criteria matching though so you won't be getting children of page X unless you specifically requested them.</p>
<p>This is great for getting things like getting all the pages that don't have parents (top level items) which is exactly how the <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/ui-components/navigation/site-top-menu.js#L116">site-top-menu</a>

 tag does it in conjunction with a dom-repeat tag (in that example).</p>
<h3 class="hax-active">Caveats</h3>
<ul><li>This doesn't render anything by itself</li>


<li>You have to then know how to do a two way template bind (Polymer convention looking like <b>{{result}} </b>

or know how to use javascript in order to bind the results to visual output</li>

<li>Its incredibly powerful</li>

</ul>
<p><a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/ui-components/query/site-query-menu-slice.js">site-query-menu-slice</a>

<br/></p>
<p>A menu slice query is one which takes part of a hierarchy and chops it out to return the items.</p>
<code-sample copy-clipboard-button="copy-clipboard-button" style="width: 100%;">  <template preserve-content="preserve-content"> &lt;
    site-query-menu-slice
    result="{{__items}}"
    dynamic-methodology="[[dynamicMethodology]]"
    start="[[start]]"
    end="[[end]]"
    parent="[[parent]]"
    fixed-id="[[fixedId]]"
    &gt;
    &lt; /site-query-menu-slice&gt;
    <dom-repeat items="[[__items]]">
        <template>
        <div class="spacing">
            <a data-id$="[[item.id]]" class="link" tabindex="-1" href$="[[item.location]]">
            <paper-button noink="[[noink]]">
                <div class$="indent indent-[[item.indent]]"></div>
                [[item.title]]
            </paper-button>
            </a>
        </div>
        </template>
    </dom-repeat></template>
</code-sample>
<h3>Spoken example</h3>
<lrndesign-blockquote style="width: 100%;" citation="America's Funniest Home Videos" image="https://media1.giphy.com/media/26tP972jcNs3V4bKw/giphy.gif" author="Bunch of kids falling" display-mode="leather" resource="#a8847fad-d94f-7e9b-6dd5" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org ">  <span>Give me all child pages<br/>
that are 2 to 4 levels deep.</span>
</lrndesign-blockquote>
<h3>Delivered results</h3>
<self-check title="Paying attention check" image="files/2019-03-23_10-51-10.jpg" alt="Another part of the same site illustrating that the theme block is generated by the type of query we're talking about." link="elements" accent-color="purple" resource="#d81c3a76-d1d3-2817-d2d8" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 75%; margin: 0px auto; display: block;">  <span slot="question">What type of query is this leveraging again?</span>
  <span>site-query-menu-slice</span>
</self-check>
<h3 class="hax-active">Dynamic leveling</h3>
<p>The dynamic leveling flag would allow you to create a query that analyzes the current active item (as example). And then say "Always give me 2-3 levels below this". In that instance you've got a dynamic sub-set of children being returned.</p>
<h3>When it's useful</h3>
<p>This can be useful for a block that always shows the children of the current page in a documentation site.</p>
<h2><a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/ui-components/query/site-render-query.js">site-render-query</a>

</h2>
<p>A site render query attempts to standardize the practice of wiring site-query up to something visual. It requires you supply something visual to get going and has the unfortunate limitation though that what you render must not be dynamic in nature.</p>
<p>Example</p>
<code-sample copy-clipboard-button="copy-clipboard-button" style="width: 100%;">  <template preserve-content="preserve-content"><site-render-query class="cardlist" grid="">
        <template>
          <div style="padding:8px;">
            <paper-card heading="[[item.title]]" image="[[item.metadata.image]]" elevation="1" animated-shadow="false">
              <div class="card-content">
                <div>description: [[item.description]]</div>
                <div>location: [[item.location]]</div>
                <div>changed: [[item.metadata.updated]]</div>
              </div>
              <div class="card-actions">
                <a tabindex="-1" href$="[[item.location]]"><paper-button data-id$="[[item.id]]">Set as active</paper-button></a>
              </div>
            </paper-card>
          </div>
        </template>
      </site-render-query></template>
</code-sample>
<p><br/></p>
<magazine-cover header="Spoken query" text="Pull in everything in the site and then render each result based on what's in this template tag." image="https://media3.giphy.com/media/5xtDarAUbabd4JvWpaM/giphy.gif" action="Why is this falling heads?" icon="icons:thumb-up" link="https://www.youtube.com/watch?v=StTqXEQ2l-Y" style="width: 75%; margin: 0px auto; display: block;"></magazine-cover>
<h3 class="hax-active">When it's useful</h3>
<p>When you have a static set of items you want to query once and have it be dynamic based on site infrastructure yet not be changing dynamically during site view.</p>
<h3 class="hax-active">Possible usage</h3>
<p>As we haven't rolled this into any themes at the time, this could be useful for placing a "latest posts" block or "upcoming events" block. Anything that's dynamic based on the data being passed in but yet unchanging once it's loaded. Think of this as a simple "views" construct if you are from the Drupal worldview.</p>
 ]]>
      </description>
      <category></category>
      <guid>/query-examples</guid>
      <pubDate>Sat, 23 Mar 2019 07:58:38 -0600</pubDate>
    </item>
    <item>
      <title>Web components</title>
      <link>/web-components</link>
      <description>
          <![CDATA[ <p>Do you know full on web component development? Well, you can build a new theme from scratch. The best way to learn is by picking a part some of our examples. For this we'll analyze the <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/core/themes/haxcms-slide-theme.js#L1">haxcms-slide-theme</a>

.</p>
<h2>Import classes / web components</h2>
<code-sample copy-clipboard-button="copy-clipboard-button" style="width: 100%;">  <template preserve-content="preserve-content">import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { HAXCMSTheme } from "@lrnwebcomponents/haxcms-elements/lib/core/HAXCMSThemeWiring.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-title.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-print-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-dot-indicator";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu-button.js";
import "@polymer/paper-icon-button/paper-icon-button.js";
import "@polymer/iron-icons/iron-icons.js";
import "@polymer/paper-tooltip/paper-tooltip.js";
import "@lrnwebcomponents/simple-colors/simple-colors.js";
import "@lrnwebcomponents/hax-body/lib/hax-shared-styles.js";</template>
</code-sample>
<p>As you can see this theme imports a few basic components helpful in the development of most themes. First we import PolymerElement and the HAXCMSTheme mix-in from our theme wiring library. Theme wiring provides a basis for wiring any custom element into the state management of HAXcms, typically without having to deal with any concepts of state!</p>
<h2>Mix-ins</h2>
<code-sample copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content">class HAXCMSSlideTheme extends HAXCMSTheme(PolymerElement) {</template>
</code-sample>
<p>Next we get the mix-in statement. Note how HAXCMSTheme wraps the PolymerElement class, thereby giving us a mix of the two together.</p>
<h3 class="hax-active">HAXCMSTheme mix-in class</h3>
<p>You can learn more about what the mix-in class provides by <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/core/HAXCMSThemeWiring.js">digging into the HAXCMSThemeWiring.js</a>

 class. This class bridges the HAXcms store (written in mobx) with the design layer. This way you can leverage anything in the store by writing the polymer convention for referencing a data bound variable in the template.</p>
<p><a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-store.js#L410-L428">Here's the variables you'll commonly see</a>

 in our themes, direct from the store with an example of what a dom bind of that would look like in a template</p>
<code-sample copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content"><h1>[[siteTitle]]</h1>
<h2>[[ancestorTitle</h2>
<h3>[[parentTitle]]</h3>
<h4>[[activeTitle]]</h4>
<div>
    [[activeItemFields.images.0.url]]
</div></template>
</code-sample>
<p>That last line with activeItemFields is part of the raw power under the hood of this approach. You can use HAXcms to create field definitions (in <a href="hax-shema">HAXschema</a>

) that then extend the capabilities of your pages.</p>
<h2>Required CSS</h2>
<p>There is one small required block of CSS when doing web component / theme development for HAXcms. It is the following:</p>
<code-sample copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content">/**
 * Hide the slotted content during edit mode. This must be here to work.
 */
:host([edit-mode]) #slot {
    display: none;
}</template>
</code-sample>
<p>This helps ensure that when your user clicks the edit button that they see the HAXeditor as opposed to the body of content they are currently working with. Then when they hit save, the HAXeditor sends the content to the backend which then updates the front end and they see the changes. This CSS ensures that it isn't visible during editing.</p>
<h2 class="hax-active">Required HTML</h2>
<code-sample copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content"><div id="contentcontainer">
    <div id="slot"><slot></slot></div>
</div></template>
</code-sample>
<p>Related to the CSS, the following block of HTML must appear in your template somewhere (or in the case of <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/simple-blog/lib/simple-blog-post.js#L125-L127">simple-blog</a>
, an element leveraged by your theme). You can make this look like whatever you want beyond this but this ensures the HAXeditor can correctly target and be integrated using the HAXCMSTheme mix-in. There are ways to position and reposition the HAXeditor dynamically that will not be covered here but <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/simple-blog/simple-blog.js#L174">can be seen in simple-blog</a>
.</p>
<p>From there, design away. Write whatever CSS and HTML and JS you want! The example themes referenced in our docs all provide blue prints for different ways of leveraging our template system.</p>
<p>Next we'll discuss our Core template elements which you'll want to leverage in order to make theme development even cleaner!</p>
 ]]>
      </description>
      <category></category>
      <guid>/web-components</guid>
      <pubDate>Sat, 23 Mar 2019 07:58:38 -0600</pubDate>
    </item>
    <item>
      <title>CSS vars</title>
      <link>/css</link>
      <description>
          <![CDATA[ <p>CSS can be modified via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS variables</a>
. CSS variables create a happy middle ground between the constraints of Shadow DOM (namely that styles are fully encapsulated) and designers wanting flexibility and control over design. We leverage CSS variables heavily in our template layer to allow you to "skin" just about any theme we have already.</p>
<h2>A note about @apply</h2>
<p>Unlike normal css variables, Polymer (the library we build our theme layer on) supports a convention for CSS variables that operate a bit more like Saas mixins. You can write blocks of code like <b>@apply --my-variable-blob;</b>
 which will then allow someone to mix in and apply whatever valid CSS attributes they want at that level. You can see several implemented below (both CSS variables and @apply blocks).</p>
<h2 class="hax-active">Example</h2>
<p>This is an example from the <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/core/themes/haxcms-basic-theme.js#L23">haxcms-basic-theme </a>
which forms a clean baseline for most sites.</p>
<code-sample copy-clipboard-button="copy-clipboard-button" style="width: 75%; margin: 0px auto; display: block;">  <template preserve-content="preserve-content">// this is from the haxcms-basic-theme
site-top-menu {
    --site-top-menu-bg: #37474f;
    --site-top-menu-link-color: #ffffff;
    --site-top-menu-indicator-color: #ffffff;
    --site-top-menu-link-active-color: var(
    --haxcms-basic-theme-accent-color
    );
    --site-top-menu-indicator-arrow: 8px;
}
site-children-block {
    --site-children-block-button: {
    color: #ffffff;
    }
    --site-children-block-button-active: {
    background-color: #37474f;
    color: var(--haxcms-basic-theme-accent-color);
    }
}
.left-col {
    min-height: 250px;
    border: 2px solid black;
    background-color: #37474f;
    color: white;
    padding: 16px;
}
site-active-title {
    display: inline-flex;
    --site-active-title-heading: {
    font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial",
        sans-serif;
    font-size: 16px;
    line-height: 32px;
    margin-bottom: 8px;
    text-rendering: optimizelegibility;
    font-weight: 600;
    color: white;
    }
}</template>
</code-sample>
 ]]>
      </description>
      <category></category>
      <guid>/css</guid>
      <pubDate>Sat, 23 Mar 2019 07:58:38 -0600</pubDate>
    </item>
    <item>
      <title>Dev workflows</title>
      <link>/dev-workflows</link>
      <description>
          <![CDATA[ <p>Our development workflow is as follows (for themes)</p>
<ol><li>All custom theme work happens in your _config directory</li>

<li>Make my-theme.js, pull everything together, either in this directory or in a <a href="https://github.com/elmsln/wcfactory">wcfactory</a>
 catalog  of elements you've made</li>
<li>Reference this in you _config/my-custom-elements.js element</li>
<li>Update the _config/config.json block that says <b>themes</b>
 to include something like...</li>
</ol>
<code-sample copy-clipboard-button="copy-clipboard-button" style="width: 100%;">  <template preserve-content="preserve-content">"themes": {
    "odl-haxtheme": {
      "element": "odl-haxtheme",
      "path": "@myorganization/odl-haxtheme/odl-haxtheme.js",
      "name": "Eberly ODL"
    }
  },</template>
</code-sample>
<p>This tells HAXcms UI that you can now select the theme (but don't yet, it won't be valid)</p>
<h2 class="hax-active">Local development workflow during theme development</h2>
<p>We use polymer cli to serve up and work on web components locally and while you don't have to, it's recommended as part of the WCFactory workflow.</p>
<ol><li>Make a new site in the HAXcms UI</li>

<li>Go to _sites/mynewsite and run <i><b>polymer serve --npm --open --entrypoint dist/dev.html</b>
</i>
</li>
<li>Adjust the URL that opens to only be the IP address with no path after it</li>
<li>You'll see your site open up for local development work, which will be leveraging any assets referenced in your node_modules directory at the HAXcms project root.</li>
<li>To add / install new assets run yarn (or npm) <i style="font-weight: bold;">add @what/ever-you-want --save </i>
, just like you would any other project you work on in FE dev</li>
<li>edit your site's site.json manually to update the theme to point to the theme location your actively working on</li>
<li>Develop away until it is to your liking</li>
</ol>
<h2>Shipping the theme</h2>
<p>To ship the theme, you'll need to do a polymer build routine</p>
<h3 class="hax-active">important note</h3>
<p>This currently forks you from the original source of HAXcms core (because it will recompile the assets). If you're ok with this cool, just know <a href="https://github.com/elmsln/HAXcms/issues/145">we're trying to find ways around this involving rollup</a>
.</p>
<ol><li>Go to the HAXcms project root</li>

<li>run <b><i>polymer build</i>
</b>
</li>
<li>Copy the build directory and go to your site</li>
<li>Delete the symlink and replace it with your build directory</li>
<li>Now you can publish via the UI so long as you do not leverage a CDN</li>
</ol>
<h2 class="hax-active">The future</h2>
<p>Admittedly, the full on custom theme / web component development workflow is rough. It's hard to maintain a built copy in a modular system without tooling. In the future we plan on having tooling workflows built directly into WCFactory that allow you to streamline the development and creation of HAXcms themes.</p>
<h2 class="hax-active">Current limitations</h2>
<p>You can't leverage existing CDNs (like webcomponents.psu.edu and whatever else is out there) that are pegged to the HAXcms project's source. You'll be creating a custom theme which then creates a custom build in effect so you'll want to ensure that you have some place that you can host the assets in order to power your site.</p>
 ]]>
      </description>
      <category></category>
      <guid>/dev-workflows</guid>
      <pubDate>Sat, 23 Mar 2019 07:58:38 -0600</pubDate>
    </item>
    <item>
      <title>Get Involved!</title>
      <link>/get-involved-</link>
      <description>
          <![CDATA[ <h2><span style="letter-spacing: -0.48px;">Join our community</span></h2>
<ul><li><span style="letter-spacing: -0.48px;">Join us on the <a href="https://join.slack.com/t/elmsln/shared_invite/enQtMjg2MzUxMTYyNjcyLWNhYzU1ODk0MjQ5MWZlNjVjNWJkMmZlODJiMGNmNDBjODk2NDc2MDUzNTZkODE4NTRiMjUzYzkzOTBkNjI4NGE">HAXTheWeb Slack</a>


 channel</span></li>



<li><a href="https://twitter.com/search?q=%23HAXTheWeb&src=typed_query">Follow / use the #HAXTheWeb hash tag</a>



</li>



</ul>
<h2><span style="letter-spacing: -0.48px;">Jump in issue queues</span></h2>
<ul><li><a href="https://github.com/elmsln/haxcms">HAXcms</a>







 - That which powers this website</li>








<li><a href="https://github.com/elmsln/lrnwebcomponents">HAXeditor</a>







 - That which powers our editing experience (and all our other tags for that matter)</li>







<li><a href="https://github.com/elmsln/wcfactory">WCFactory</a>







 - Build and maintain your own web component library, why should we be special.<br/></li>


<li>Check out our <a href="integrations">integrations page</a>


 for platform specific repos</li>







</ul>
<h2><span style="letter-spacing: -0.48px;">Organization that wants to get involved?</span></h2>
<p><span style="letter-spacing: -0.48px;">Great! Here's some of the best ways for organizations to try "HAX" and get involved in the project.</span></p>
<ul><li><span style="caret-color: rgb(0, 0, 0);">Reach out to any of the members of the core project team or who's listed at the bottom of the <a href="f-a-q-">FAQ</a>


. We're happy to do conference calls to forge partnerships especially around HAX as a Learning management or OER production solution though it has implications for any public site!</span></li>




<li>Try out the <a href="https://www.elmsln.org/demos">HAXcms live demo</a>


 (reset hourly)</li>




<li>Reach out in in the <a href="https://github.com/elmsln/haxcms">HAXcms issue queue</a>




 with questions</li>




<li>Bring this website to developers in your organization or other code junkies and tell them to explore</li>
<li>Host a HAX camp / meet up (ask for more details)</li>




</ul>
<p>HAX makes up multiple projects across hundreds of web components and various other repos. It can be a bit overwhelming but we want you to imagine something... Imagine being a developer on HAX.</p>
<meme-maker style="width: 75%; margin: 0px auto; display: block;" alt="happy snoop dogg GIF by Cheezburger" image-url="https://media2.giphy.com/media/Um04iWtX2eby8/giphy.gif" top-text="Step 'ight up" bottom-text="urz te next contrib"></meme-maker>
<p>Because all it takes to get involved in HAX is, that's right, showing up in our repos and getting involved! Yes you too can be just as special and meme-able as we are!</p>
<p>All things HAX are powered by people just like you, wanting to make the web a better, more accessible, easier to use, less painful to develop for... place.<span style="caret-color: rgb(0, 0, 0);">Help us make that a reality and you too could have Snoop Dawg escorting you over to a brand new car*</span></p>
<p><span style="caret-color: rgb(0, 0, 0);">Anything is possible with HAXTheWeb. <a href="http://www.zombo.com/">The only limit...is yourself</a>







.</span></p>
<p><sub>*Claims vs reality may vary. Just help us out and we'll see where it goes..</sub>







</p>
 ]]>
      </description>
      <category></category>
      <guid>/get-involved-</guid>
      <pubDate>Thu, 21 Mar 2019 13:46:24 -0600</pubDate>
    </item>
    <item>
      <title>Example themes</title>
      <link>/example-themes</link>
      <description>
          <![CDATA[ <p>Explore some of the themes built for HAXcms that you get out of the box. This is a great demonstration of the performance and power of both web components and HAXcms (the system powering this site!).</p>
<h2>Special note</h2>
<p>When you switch theme it's JUST for that page in question. If you need to reset, go back to the home page. Not all themes will provide a lot of navigation as they make more sense for different structures.</p>
<p>You can learn more about our theme layer and how to write your own themes in the <a href="theme-layer">Theme layer section of our docs</a>

.</p>
<h2 class="hax-active">Bugs</h2>
<p>There are known issues currently that pop up at times when doing the "<a href="https://github.com/elmsln/HAXcms/issues/152">swap themes dynamically in HAXcms</a>
" concept, namely that some CSS variables need to be rebuilt.</p>
 ]]>
      </description>
      <category></category>
      <guid>/example-themes</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Simple blog</title>
      <link>/simple-blog</link>
      <description>
          <![CDATA[ <p>This one definitely just broke your world view... cause... it's... a.... blog.</p>
<p>It also just broke the navigation cause Simple Blog is about viewing a listing of blog posts and then when you are inside of a single post, it takes over the entire interaction</p>
<p>You can click the top left button to go back and dig into another theme from here if you like</p>
<meme-maker image-url="files/2019-03-21_15-12-05.jpg" top-text="Posts about theme in theme" bottom-text="So meta" style="width: 75%; margin: 0px auto; display: block;"></meme-maker>
 ]]>
      </description>
      <category></category>
      <guid>/simple-blog</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Slide player</title>
      <link>/slide-player</link>
      <description>
          <![CDATA[ <p>Slide player is great for lectures and presentation style sites (or parts of sites). It lets you focus on the content and has almost no UI.</p>
<wikipedia-query show-title="" search="Presentation slide" render-as="content" resource="#9cdecdb2-ed7c-f2e2-2c27" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " search-response="[object Object]"></wikipedia-query>
<lrn-table title="Example teaching component. This is just a CSV file!" csv-file="files/demo.csv" description="The data in this table is irrelevant, it's basically just here to visually demonstrate what's possible with our platform." resource="#dd29b4ba-18fc-53ac-0340" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 100%; margin: 0px auto; display: block;"></lrn-table>
 ]]>
      </description>
      <category></category>
      <guid>/slide-player</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Outline player</title>
      <link>/outline-player</link>
      <description>
          <![CDATA[ <p>Outline player is an even more basic form of Learn two. It's for those seeking something even more minimalist in design and capabilities.</p>
<p>Fun things about this include... ok well very little. Let's face it, this was the first theme we made and then we decided to keep supporting it because it helps illustrate the modular nature of our UI layer.</p>
<p>As examples</p>
<p style="width: 100%;">The `< site - menu >` on the left side is the exact same tag that's found in the <a href="learn-two">Learn Two theme</a>
. The buttons at the top are the same as in other themes (most of the initial ones). This abstraction of state from design allows you to focus on CSS and leave the front end engineering to... well.. no one, it just sorta happens.</p>
<meme-maker alt="great job success GIF" image-url="https://media0.giphy.com/media/XreQmk7ETCak0/giphy.gif" top-text="Thanks" bottom-text="Mobx" style="width: 50%;"></meme-maker>
 ]]>
      </description>
      <category></category>
      <guid>/outline-player</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Basic</title>
      <link>/basic</link>
      <description>
          <![CDATA[ <p>The Basic theme provides a simple yet highly themable structure. It's leveraging the bulk of our custom elements specifically geared toward HAXcms state encapsulation</p>
<a11y-gif-player src="https://media1.giphy.com/media/qdDO6hTcyeDks/giphy.gif" src-without-animation="https://media2.giphy.com/media/qdDO6hTcyeDks/480w_s.jpg" alt="Despicable me whaaat?! silly meme" resource="#dbb0d209-57da-d49d-4e4c" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 50%; margin: 0px auto; display: block;"></a11y-gif-player>
<p>The theme elements in HAXcms can completely encapsulate state. So the menu on the left of this design (as one example) is called<b> `< site - children - block ><site -="" children="" block="">`</site>
</b>

. Site children block will automatically show what's below the current page / inside the ancestor tree as the current hierarchy.</p>
<p>That means if you used it in your theme, you could easily just style it and never have to think about state management / what's active. This approach is in all our themes at some level, the most pervasive of which is the next and previous buttons which are <b>`< site - menu - button type="next >`</b>

 in their format.</p>
 ]]>
      </description>
      <category></category>
      <guid>/basic</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Learn two</title>
      <link>/learn-two</link>
      <description>
          <![CDATA[ <p>Learn two is a straight forward way of presenting material for learning about a topic. With a breadcrumb trail `<site - breadcrumb>` and a simple `<site - menu>` that tracks visually as you activate new items, it's a great way to present educational material.</p>
<p>Learn two also has great mobile support (try it out but changing the dimensions of your browser)</p>
<p><a href="https://github.com/getgrav/grav-theme-learn2">Learn two is heavily based on the Learn Two theme in the GravCMS community</a>
.</p>
 ]]>
      </description>
      <category></category>
      <guid>/learn-two</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Dev theme</title>
      <link>/dev-theme</link>
      <description>
          <![CDATA[ <p>EEK! You were NOT supposed to see this...except that this is what HAXcms sees. This is your just barebones components with almost 0 css baseline theme play space. This is a great one to fork and rewrite as a starting point and illustrates just how hideous (yet easy to theme) things can get.</p>
<meme-maker image-url="https://memegenerator.net/img/images/5655311.jpg" top-text="NO css, You get none" bottom-text="GOOD DAY SIR" style="width: 50%; margin: 0px auto; display: block;"></meme-maker>
<p>Given that this is in a tiny window you probably didn't even get to see this great Charley and the Chocolate factory reference :( so sad. so sad.</p>
 ]]>
      </description>
      <category></category>
      <guid>/dev-theme</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Minimalist</title>
      <link>/minimalist</link>
      <description>
          <![CDATA[ <p>As you can see, the minimalist theme is for trying to give you a straight forward, linear design pattern.</p>
<p>Pages are ordered based on the very 1 page's child pages.</p>
<p>So you'd have a structure like this:</p>
<ul><li>Home</li>
<ul><li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>

<li>This page wouldn't show up in the nav</li>
</ul>
 ]]>
      </description>
      <category></category>
      <guid>/minimalist</guid>
      <pubDate>Thu, 21 Mar 2019 12:53:16 -0600</pubDate>
    </item>
    <item>
      <title>Presentations</title>
      <link>/presentations</link>
      <description>
          <![CDATA[ <p>This is the <a href="https://www.youtube.com/watch?v=q0IjUz2_IhA&list=PLJQupiji7J5eTqv8JFiW8SZpSeKouZACH">youtube playlist</a>
 of all things HAXTheWeb</p>
<iframe width="600" height="400" src="https://www.youtube.com/embed/videoseries?list=PLJQupiji7J5eTqv8JFiW8SZpSeKouZACH" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" style="margin:0 auto;"></iframe>
<p>This playlist is updated on a regular basis so make sure to subscribe to the youtube channel for updates. There's also many other playlists related to all things ELMS:LN, WCFactory, HAXcms and web components in general.</p>
 ]]>
      </description>
      <category></category>
      <guid>/presentations</guid>
      <pubDate>Mon, 18 Mar 2019 06:06:57 -0600</pubDate>
    </item>
    <item>
      <title>Core elements</title>
      <link>/elements</link>
      <description>
          <![CDATA[ <p>While you're not required to use them, HAXcms supplies a series of elements that can make theme development effortless. You can see the source of these in greater detail under the <a href="https://github.com/elmsln/lrnwebcomponents/tree/master/elements/haxcms-elements/lib/ui-components">theme directory of haxcms-elements</a>


. This is a brief overview of what they are and what they provide to your interface.</p>
<p>HAXcms seeks to apply the SDS pattern, a technique we made up just for this sentence, for <i>dramatic effect</i>
. As everyone knows who is about to read the next heading, SDS stands for:</p>
<h2>So. Damn. Semantic.</h2>
<img src="files/2019-03-12_16-45-51.png" alt="Learn two theme code view with arrows pointing out all the different HAXcms theme level elements" style="width: 100%;"/><p>Whew, I need an ice cold drink to wash away the semantic sweats.</p>
<p>Yes, that's right, HAXcms allows you to theme a complex state managed system without needing to understand state management... like... at all.</p>
<h3>"But I understand state management and it's important to me"</h3>
<p>That's awesome, four people on twitter, but most designers just want to design! They don't need or want to understand the intricacies of making a collapsed field area expand relative to what item has been dictated as active in the store*.</p>
<p><sub>*an intentionally confusing worded sentence</sub>


</p>
<p><sub>We use MobX to do our state management if that's something you care about and some of our themes directly implement and interface with the state management layer. See <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/simple-blog/lib/simple-blog-footer.js#L5-L6">Simple Blog's footer element</a>


 for a great example of why state management is a PITA.</sub>

</p>
<h2>Back to the elements jerk</h2>
<p>Ok fine, here they are. Here's the list of ES module imports to get them</p>
<code-sample style="width: 100%;" copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content">{
    "dependencies": {
        "@lrnwebcomponents/haxcms-elements": "latest"
    }
}</template>
</code-sample>
<code-sample style="width: 100%;" copy-clipboard-button="copy-clipboard-button">  <template preserve-content="preserve-content">import "@lrnwebcomponents/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/blocks/site-outline-block.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/layout/site-footer.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/layout/site-modal.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-breadcrumb.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-dot-indicator.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-top-menu.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-query-menu-slice.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-query.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-render-query.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-print-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-rss-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-title.js";</template>
</code-sample>
<p>Now here's what each of them provide you (pretty self explanatory because #SDS)</p>
<ul><li><b>site-active-title - </b>
the title of the active item wrapped in a h1 tag
<br/></li>
<li><b>site-children-block</b>
 - all child menu items based on a criteria match</li>
<li><b>site-outline-block</b>
 - part of the outline based on criteria match</li>
<li><b>site-footer</b>
 - a basic footer with license element based on site details</li>
<li><b>site-modal</b>
 - a basic modal with button that can house other elements</li>
<li><b>site-breadcrumb</b>

 - a breadcrumb trail for the active menu item</li>
<li><b>site-dot-indicator</b>
 - site links but as a simple line of dots</li>
<li><b>site-menu-button</b>
 - buttons for navigating through the active items in the menu. This is next, previous, parent and first child kinds of options.<br/></li>


<li><b>site-menu</b>

 - A visualization of the hierarchy of your site, complete with checkmarks given per page the user goes to (optional) as well as a lot of styling options and a highlighted bar that scrolls the menu into view for small screens. It's fantastic and one line.</li>
<li><b>site-top-menu</b>
 - Top level menu links with indicator that scrolls to focus</li>
<li><b>site-print-button</b>
 - print button with support for 4 levels of printing the site<br/></li>
<li><b>site-rss-button</b>
 - a button that displays a link (opened in a new window) to get the RSS feed in RSS 2.0 or Atom 1.0 format (also applies correct semantic values for bots to discover)<br/></li>
<li><b>site-title</b>
 - a link to the homepage of the site wrapped in an h1 tag<br/></li>


</ul>
<p><span style="caret-color: rgb(0, 0, 0);">See the elements themselves for more details API examples and check out our themes as we leverage them heavily across the core themes.</span></p>
<h2><span style="caret-color: rgb(0, 0, 0);">A word about style</span></h2>
<p><span style="caret-color: rgb(0, 0, 0);">We use CSS variables to style all the bits inside of our custom elements. So if you don't like the styling, look at the CSS variables we make available and style away. The <a href="https://github.com/elmsln/lrnwebcomponents/blob/master/elements/learn-two-theme/src/learn-two-theme.css">"Learn 2 theme"</a>


 is a great example implementing multiple levels of styling against multiple HAXcms site elements. You can always you know, go back and <a href="css">reread the CSS variables section</a>
.</span></p>
<meme-maker image-url="https://memegenerator.net/img/images/66693.jpg" top-text="I don't like your style" bottom-text="LAWL CSS vars" style="width: 50%; margin: 0px auto; display: block;"></meme-maker>
 ]]>
      </description>
      <category></category>
      <guid>/elements</guid>
      <pubDate>Tue, 12 Mar 2019 18:45:37 -0600</pubDate>
    </item>
  </channel>
</rss>