Skip to content

Instantly share code, notes, and snippets.

@Phoen1x84
Phoen1x84 / fe-helix-folder-structure.txt
Created Nov 19, 2018
Sitecore Helix For Frontend - A Sitecore User Group Tale
View fe-helix-folder-structure.txt
src
Feature
products
code
src
products
__tests__
// tests here
scripts
// scripts here
@Phoen1x84
Phoen1x84 / revealing-module-pattern.js
Created May 16, 2018
Example of the revealing module pattern
View revealing-module-pattern.js
// ES5 example
var module = (function() {
'use strict';
var selectors = {
// object literal would contain selectors
mySelector: '.banner'
};
var publicMethod = function() {
View compiled-example.css
.banner__btn, .article-tile__btn {
border-radius: 30px;
padding: 10px;
text-align: center;
}
.banner {
background: #f1f1f1;
}
.banner__inner {
View _button-pattern.scss
// fd = foundation
%fd-button {
border-radius: 30px;
padding: 10px;
text-align: center;
}
View banner-refactor.scss
// quick code mock not tested
.banner {
background: #f1f1f1;
&__inner {
display: flex;
max-width: 1320px;
margin: 0 auto;
}
View banner.scss
// quick code mock not tested
.banner {
background: #f1f1f1;
&__inner {
display: flex;
max-width: 1320px;
margin: 0 auto;
}
@Phoen1x84
Phoen1x84 / helix-folder-structure.txt
Created Mar 6, 2018
Example of Front-end Helix Folder Structure
View helix-folder-structure.txt
/ Feature
/Navigation
/Name.Feature.Navigation.csproj
/Views
/Navigation
PrimaryNavigation.cshtml
/Project
/MySite
/Name.MySite.Website
@Phoen1x84
Phoen1x84 / sc-ribbon-btn.less
Created Feb 5, 2017
Styles for the page preview button
View sc-ribbon-btn.less
@sc-red: #DC291E;
@black: #222;
@white: #fff;
@ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
.sc-ribbon-btn {
position: fixed;
bottom: 100px;
right: 100px;
border-radius: 100%;
@Phoen1x84
Phoen1x84 / ribbon-toggle-example.html
Created Feb 5, 2017
Show / Hide the Sitecore page preview ribbon example markup
View ribbon-toggle-example.html
<a href="#" class="sc-ribbon-btn js-toggle-sc-ribbon">
<span class="sc-ribbon-btn__inner">
<svg class="sc-ribbon-btn__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 16 16">
<path d="M4 2v14l5-5 5 5v-14zM12 0h-10v14l1-1v-12h9z"></path>
</svg>
</span>
</a>
@Phoen1x84
Phoen1x84 / ribbon-toggle.js
Last active Feb 5, 2017
Show / Hide the Sitecore page preview ribbon
View ribbon-toggle.js
var UTILS = UTILS || {};
UTILS.editorGridToggle = (function ($) {
'use strict';
var init = function () {
if ($('#scWebEditRibbon').length) {
$('.overlay-grid-toggle-btn').show();
$(document).on('click', '.overlay-grid-toggle-btn', function (e) {