Skip to main content

CIS Libguide Style Guide: TK front page template

Style guide for the creation of CIS libguides

TK front page template

<body class="s-lg-guide-body">
{{skip_link}}
{{ADMIN_CMD_BAR}}
<!-- BEGIN: Page Header -->
{{public_header}}
<!-- END: Page Header -->
<!-- BEGIN: Guide Info Header -->
<div id="s-lg-guide-header" class="container s-lib-header s-lib-side-borders">
<div id="s-lib-bc">
{{breadcrumbs}}
</div>
<div class="pull-right">
<div id="s-lg-guide-header-search">
{{guide_search}} </div>
{{ADMIN_MINI_CMD_BAR}}
</div>
<div id="s-lg-guide-header-info">
<h1 id="s-lg-guide-name">{{guide_title}}: {{page_title}}</h1>
<div id="s-lg-guide-desc-container">
<span id="s-lg-guide-description">{{guide_description}}</span>
</div>
</div>
</div>
<!-- END: Guide Info Header -->
<div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
<div id="s-lg-guide-tabs" class="tabs" role="navigation" aria-label="Guide Page Menu">
<ul class="nav nav-tabs split-button-nav" role="menu">
{{guide_nav}}
</ul>
</div>
</div>
<div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>
<!-- BEGIN: Guide Content -->
<div id="s-lg-guide-main" class="container s-lib-main s-lib-side-borders">
{{empty_page_sub_page_list}}
<div id="s-lg-row-1" class="s-lg-row">
<div id="s-lg-col-1" class="col-md-3">
<div class="s-lg-col-boxes">
{{content_col_1}}
</div>
</div><!--col-1-->
</div>
<div id="s-lg-col-2" class="col-md-3">
<div class="s-lg-col-boxes">
{{content_col_2}}
</div>
</div><!--col-2-->
<div id="s-lg-col-3" class="col-md-6">
<div class="s-lg-col-boxes">
{{content_col_3}}
</div>
</div><!--col-3-->
<div id="s-lg-row-2" class="s-lg-row">
<div id="s-lg-col-4" class="col-md-12">
<div class="s-lg-col-boxes">
{{content_col_4}}
</div>
</div><!--col-4-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-5" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_5}}
</div>
</div><!--col-5-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-6" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_6}}
</div>
</div><!--col-6-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-7" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_7}}
</div>
</div><!--col-7-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-8" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_8}}
</div>
</div><!--col-8-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-9" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_9}}
</div>
</div><!--col-9-->
</div>
<div id="s-lg-row-3" class="s-lg-row">
<div id="s-lg-col-10" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_10}}
</div>
</div><!--col-10-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-11" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_11}}
</div>
</div><!--col-11-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-12" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_12}}
</div>
</div><!--col-12-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-13" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_13}}
</div>
</div><!--col-13-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-14" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_14}}
</div>
</div><!--col-14-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-15" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_15}}
</div>
</div><!--col-15-->
</div>
<div id="s-lg-row-4" class="s-lg-row">
<div id="s-lg-col-16" class="col-md-2">
<div class="s-lg-col-boxes">
{{content_col_16}}
</div>
</div><!--col-16-->
</div>
<div id="s-lg-row-5" class="s-lg-row">
<div id="s-lg-col-17" class="col-md-4">
<div class="s-lg-col-boxes">
{{content_col_17}}
</div>
</div><!--col-17-->
</div>
<div id="s-lg-row-8" class="s-lg-row">
<div id="s-lg-col-18" class="col-md-8">
<div class="s-lg-col-boxes">
{{content_col_18}}
</div>
</div><!--col-12-->
</div>
{{page_prev_next_links}}
</div>
<!-- END: Guide Content -->
<!-- BEGIN: Page Footer -->
<div id="s-lib-footer-public" class="s-lib-footer footer container  s-lib-side-borders">
<div id="s-lg-guide-header-meta" class="pad-top-sm pad-left-med clearfix">
<ul id="s-lg-guide-header-attributes" class="">
<li id="s-lg-guide-header-updated" class="s-lg-h-separator">
{{last_updated_display}}                    </li>
<li id="s-lg-guide-header-url" class="s-lg-h-separator">
{{guide_url_display}}
</li>
<li id="s-lg-guide-print-url">
{{print_url_display}}
</li>
</ul>
<div id="s-lib-footer-login-link" class="pull-right pad-right-med">
{{login_url_display}}                </div>
</div>
<div class="pad-bottom-sm clearfix">
<div id="s-lib-footer-support-link" class="pull-right pad-right-med">
{{support_url_display}}
</div>
<div id="s-lg-guide-header-subjects" class="pad-top-sm pad-left-med pad-right-med pull-left">
{{guide_subjects}}
</div>
<div id="s-lg-guide-header-tags" class="pad-top-sm pad-left-med">
{{guide_tags}}
</div>
</div>
</div>
<!-- END: Page Footer -->
<div id="s-lib-scroll-top">
<a href="javascript:void(0);" onclick="jQuery('html, body').animate({scrollTop: 0}, 750);" title="Back to Top" aria-label="Back to Top"
aria-hidden="true">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
</span>
</a>
</div>
<div id="s-lib-alert" title="">
<div id="s-lib-alert-content"></div>
</div>
<!-- BEGIN: Custom Footer -->
{{public_footer}}
<!-- END: Custom Footer -->
</body>