Skip to content

Instantly share code, notes, and snippets.

@rainbowstudio

rainbowstudio/accessibility.html

Last active August 29, 2015 13:57
Show Gist options
  • Save rainbowstudio/9632607 to your computer and use it in GitHub Desktop.
Save rainbowstudio/9632607 to your computer and use it in GitHub Desktop.
Download ZIP
Template CMSMS/foundation
Raw
accessibility.html
{*<!-- accessibility links, jump to nav or content -->*}
<ul class="visuallyhidden">
<li>{anchor anchor='primary-nav' title='Aller directement à la navigation' accesskey='n' text='Aller directement à la navigation'}</li>
<li>{anchor anchor='main' title='Aller directement au contenu' accesskey='s' text='Aller directement au contenu'}</li>
</ul>
{*<!-- accessibility //-->*}
Raw
app.scss
// Make sure the charset is set appropriately
@charset "UTF-8";
@import "settings";
@import "bourbon";
// Behold, here are all the Foundation components.
@import
// "foundation/components/accordion",
"foundation/components/alert-boxes",
"foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
"foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
"foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
// "foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switch",
"foundation/components/tables",
// "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
// "foundation/components/offcanvas",
"foundation/components/visibility";
body {
line-height: $base-line-height;
}
.chromeframe {
margin: 0;
background: #FDF2AB;
color: #000;
padding: 5px 36px 5px 40px;
border-bottom:1px solid #A29330;
text-align:center;
font-size:12px;
a {color:#e25600; text-decoration:underline;}
}
//cache les liens d'accessibilité
.visuallyhidden {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.transition {@include transition (all 250ms ease-in-out);}
a {
@extend .transition;
&:hover {color: $secondary-color;}
}
Raw
breadcrumb.html
{if isset($nodelist)}
{strip}
<nav class="breadcrumbs">
{*{$starttext}:&nbsp;*}
{foreach from=$nodelist item='node'}
{assign var='spanclass' value='crumb'}
{assign var='extraspanclass' value=''}
{if $node->current == true}
{assign var='extraspanclass' value=' current'}
{/if}
{if $node->current == true}
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="{$spanclass|cat:$extraspanclass}"><a class="current" href="{$node->url}" title="{$node->menutext}" itemprop="url"><span itemprop="title">{$node->menutext}</span></a>&nbsp;</div>
{elseif ($node->url == '' or $node->url == '#') && $node->type != 'sectionheader'}
{*&raquo;&nbsp;*}
{elseif $node->type == 'sectionheader'}
{$node->menutext}&nbsp;
{else}
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="{$spanclass|cat:$extraspanclass}"><a href="{$node->url}" title="{$node->menutext}" itemprop="url"><span itemprop="title">{$node->menutext}</span></a>&nbsp;&raquo;&nbsp;</div>
{/if}
{/foreach}
</nav>
{/strip}
{/if}
Raw
chromeframe.html
<!--[if lt IE 9]>
<p class="chromeframe">Le navigateur que vous utilisez actuellement est <strong>périmé</strong>. Il possède des <strong>failles de sécurité</strong> et pourrait <strong>ne pas afficher certaines fonctionnalités de ce site internet</strong>.<br /> <a href="http://browsehappy.com/" target="_blank">Découvrez comment mettre à jour votre navigateur</a> pour améliorer votre navigation.</p>
<![endif]-->
Raw
default.html
{strip}
{process_pagedata}
{cms_lang_info assign='nls'}
{/strip}<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7 ie6" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie8" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--><html lang="{$nls->htmlarea()}" dir="{$nls->direction()}"><!--<![endif]-->
{capture assign='pageAlias'}{page_attr key="extra1" }{/capture}
{capture assign='parent_alias'}{cgsimple::get_parent_alias()}{/capture}
{content assign='contenu'}
{description assign='desc'}
{content block='metadesc' label='Meta description' oneline='true' size='100' assign='metadesc'}
<head>
{strip}
<title>
{if $desc}
{if $page_alias == 'accueil'}
{$desc}
{else}
{if isset($pagetitle)}
{$pagetitle|regex_replace:"/^[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][\s][-]/":" "} | {$desc}
{else}
{$desc}
{/if}
{/if}
{else}
{if $page_alias == 'accueil'}
{sitename} | {title}
{else}
{if isset($pagetitle)}
{$pagetitle|regex_replace:"/^[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][\s][-]/":" "} | {title} | {sitename}
{else}
{title} | {sitename}
{/if}
{/if}
{/if}
</title>
{/strip}
{if isset($pagedesc)}
<meta name="description" content="{$pagedesc|escape:'html'}" />
{elseif isset($metadesc) && $metadesc != ''}
<meta name="description" content="{$metadesc|strip_tags|escape:'html'}" />
{elseif isset($contenu)}
<meta name="description" content="{$contenu|strip_tags|truncate:160|strip|escape:'html'}" />
{/if}
<meta name="viewport" content="width=device-width, initial-scale=1">
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{*<!-- Meta pour Facebook -->*}
<meta property="og:title" content="{if isset($pagetitle)}{$pagetitle|strip_tags|escape:'html'}{else}{title}{/if}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{$canonical}" />
<meta property="og:site_name" content="{sitename}" />
<meta property="og:image" content="{root_url}/images/logo-facebook.png" />
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
{*<!-- FAVICON -->*}
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="{root_url}/favicon.ico" /><![endif]-->
<link rel="icon" type="image/png" href="{root_url}/favicon.png" />
<script src="{root_url}/js/vendor/custom.modernizr.js"></script>
{*<!-- jQuery -->*}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{root_url}/js/vendor/jquery.js"><\/script>')</script>
{*<!-- Code GA -->*}
<script>
{literal}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'ID-COMPTE', 'site.com');
ga('send', 'pageview');
{/literal}
</script>
</head>
<body>
<!--[if lt IE 9]>
<p class="chromeframe">Le navigateur que vous utilisez actuellement est <strong>périmé</strong>. Il possède des <strong>failles de sécurité</strong> et pourrait <strong>ne pas afficher certaines fonctionnalités de ce site internet</strong>.<br /> <a href="http://browsehappy.com/" target="_blank">Découvrez comment mettre à jour votre navigateur</a> pour améliorer votre navigation.</p>
<![endif]-->
<div id="global">
{*<!-- accessibility links, jump to nav or content -->*}
<ul class="visuallyhidden">
<li>{anchor anchor='primary-nav' title='Aller directement à la navigation' accesskey='n' text='Aller directement à la navigation'}</li>
<li>{anchor anchor='main' title='Aller directement au contenu' accesskey='s' text='Aller directement au contenu'}</li>
</ul>
{*<!-- accessibility //-->*}
<header id="header">
<div class="sticky contain-to-grid">
<nav id="primary-nav" class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><a href="{root_url}" title="{sitename}">{sitename}</a></li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul><!-- //.title-area -->
<section class="top-bar-section">
<ul class="left">
{menu template="top-bar"}
</ul>
</section><!-- //.top-bar-section -->
</nav><!-- //.top-bar -->
</div>
</header>
<section id="main">
<div class="row">
<div class="large-8 columns">
{menu action='breadcrumbs' template=”breadcrumb”}
<article class="contenu" role='main'>
<h1 class="pagetitle">{title}</h1>
{$contenu}
</article>
</div>
<div class="large-4 columns">
<aside class="sidebar">
{news number='2' detailpage='actualites'}
</aside>
</div>
</div><!-- .row -->
</section><!-- #main -->
<footer id="footer">
<div class="row">
<div class="large-12 columns">
<span class="back-top">{anchor anchor='main' text='&uarr;'}</span>
<div class="footer-nav">
{menu excludeprefix="home" number_of_levels="2" loadprops="0"}
</div>
</div>
</div>
</footer>
</div> <!-- #global -->
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.topbar.js"></script>
{*<!--
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.abide.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.accordion.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.alert.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.clearing.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.dropdown.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.equalizer.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.interchange.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.joyride.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.magellan.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.reveal.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.tab.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.tooltip.js"></script>
/-->*}
<script src="{root_url}/js/app.js"></script>
</body>
</html>
Raw
gabarit.html
{strip}
{process_pagedata}
{cms_lang_info assign='nls'}
{/strip}<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7 ie6" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie8" lang="{$nls->htmlarea()}" dir="{$nls->direction()}"> <![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--><html lang="{$nls->htmlarea()}" dir="{$nls->direction()}"><!--<![endif]-->
{global_content name='global_vars'}
<head>
{global_content name='head'}
</head>
<body>
{global_content name='chromeframe'}
<div id="global">
{global_content name='accessibility'}
{global_content name='header'}
<section id="main">
<div class="row">
<div class="large-8 columns">
{menu action='breadcrumbs' template=”breadcrumb”}
<article class="contenu" role='main'>
<h1 class="pagetitle">{title}</h1>
</article>
{$contenu}
</div>
<div class="large-4 columns">
<aside class="sidebar">
{news number='2' detailpage='actualites'}
</aside>
</div>
</div><!-- .row -->
</section><!-- #main -->
{global_content name='footer'}
</div> <!-- #global -->
{global_content name='scripts'}
</body>
</html>
Raw
global_vars.html
{capture assign='pageAlias'}{page_attr key="extra1" }{/capture}
{capture assign='parent_alias'}{cgsimple::get_parent_alias()}{/capture}
{content assign='contenu'}
{description assign='desc'}
{content block='metadesc' label='Meta description' oneline='true' size='100' assign='metadesc'}
Raw
head.html
<head>
{strip}
<title>
{if $desc}
{if $page_alias == 'accueil'}
{$desc}
{else}
{if isset($pagetitle)}
{$pagetitle|regex_replace:"/^[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][\s][-]/":" "} | {$desc}
{else}
{$desc}
{/if}
{/if}
{else}
{if $page_alias == 'accueil'}
{sitename} | {title}
{else}
{if isset($pagetitle)}
{$pagetitle|regex_replace:"/^[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][\s][-]/":" "} | {title} | {sitename}
{else}
{title} | {sitename}
{/if}
{/if}
{/if}
</title>
{/strip}
{if isset($pagedesc)}
<meta name="description" content="{$pagedesc|escape:'html'}" />
{elseif isset($metadesc) && $metadesc != ''}
<meta name="description" content="{$metadesc|strip_tags|escape:'html'}" />
{elseif isset($contenu)}
<meta name="description" content="{$contenu|strip_tags|truncate:160|strip|escape:'html'}" />
{/if}
<meta name="viewport" content="width=device-width, initial-scale=1">
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{*<!-- Meta pour Facebook -->*}
<meta property="og:title" content="{if isset($pagetitle)}{$pagetitle|strip_tags|escape:'html'}{else}{title}{/if}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{$canonical}" />
<meta property="og:site_name" content="{sitename}" />
<meta property="og:image" content="{root_url}/images/logo-facebook.png" />
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
{*<!-- FAVICON -->*}
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="{root_url}/favicon.ico" /><![endif]-->
<link rel="icon" type="image/png" href="{root_url}/favicon.png" />
<script src="{root_url}/js/vendor/custom.modernizr.js"></script>
{*<!-- jQuery -->*}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{root_url}/js/vendor/jquery.js"><\/script>')</script>
{*<!-- Code GA -->*}
<script>
{literal}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'ID-COMPTE', 'site.com');
ga('send', 'pageview');
{/literal}
</script>
</head>
Raw
header.html
<header id="header">
<div class="sticky contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><a href="{root_url}" title="{sitename}">{sitename}</a></li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul><!-- //.title-area -->
<section class="top-bar-section">
<ul class="left">
{menu template="top-bar"}
</ul>
</section><!-- //.top-bar-section -->
</nav><!-- //.top-bar -->
</div>
</header>
Raw
script.html
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.topbar.js"></script>
{*<!--
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.abide.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.accordion.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.alert.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.clearing.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.dropdown.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.equalizer.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.interchange.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.joyride.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.magellan.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.reveal.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.tab.js"></script>
<script src="{root_url}/bower_components/foundation/js/foundation/foundation.tooltip.js"></script>
/-->*}
<script src="{root_url}/js/app.js"></script>
Raw
sidenav.html
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul class="side-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='active'}
{if $node->parent == true}
{assign var='classes' value='active menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="active"><a href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="divider">
{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Raw
topbar.html
{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}
{if $count > 0}
<ul class="left">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="dropdown">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or $node->current == true}
{assign var='classes' value='active'}
{if $node->parent == true}
{assign var='classes' value='active has-dropdown'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent has-dropdown'}
{/if}
<li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="has-dropdown"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->current == true}
<li class="active"><a class="currentpage" href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="divider">
{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment