CMSMS GRID1200 basis template

CMSMS GRID1200 basis template

CMS Made Simple 1.11+ / 2.0+ | 8-10-2015 | Pascal Merks | Reacties


Een simpele basis template van GRID1200 voor CMS Made Simple de gebruikt kan worden als basis voor een website.

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/GRID-1200-cmsms-basic-template-v2.zip

 

Hier de sjablonen nog even op een rij:

Sjabloon CMS Made Simple 1.11+:

{process_pagedata} {* Adds page specific metadata to the page *}
<!DOCTYPE HTML>

<html lang="en"> <!-- Change "en" to your language -->

<head>

<meta charset="utf-8">

<base href="{root_url}">

<title>{title} | {sitename}</title> <!-- Title of the page | Site name from Global Settings -->

{metadata} <!-- Adds Global Metadata to the page -->

{cms_stylesheet} <!-- Adds attached stylesheets to the page -->

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

<!-- IEMobile 10 viewport fix -->
[literal]<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>[/literal] <!-- should be wrapped in { and } -->

{cms_jquery} <!-- Adds jQuery files to the page -->

</head>

<body>

<!-- header section -->

<header>

<div class="content">

<div class="section">

<div class="two-third-column">

<nav id="menu-mobile" onclick="void(0)">

<div id="nav-mobile"></div>

{menu} <!-- Show all the menu buttons -->

</nav>

</div>

<div class="three-column"><h6>{sitename}</h6> <!-- Site name from Global Settings --></div>

</div>

</div>

<div class="section"><!-- clear section --></div>

</header>

<!-- header section -->

<!-- main section -->

<main>

<div class="content">

<div class="section">
<div class="two-third-column">

<h1>{title}</h1> <!-- Title of the page -->

{content} <!-- Page content -->

</div>
<div class="three-column">

{news} <!-- News article links -->

</div>
</div>

</div>

<div class="section"><!-- clear section --></div>

</main>

<!-- main section -->

<!-- footer section -->

<footer>

<div class="content">

<div class="section">
<div class="one-column">{global_content name='footer'} <!-- Extract all footer code to a global content block --></div>
</div>

</div>

<div class="section"><!-- clear section --></div>

</footer>

<!-- footer section -->

</body>

</html>

 

Sjabloon CMS Made Simple 2.0+:

{process_pagedata} {* Adds page specific metadata to the page *}
<!DOCTYPE HTML>

<html lang="en"> <!-- Change "en" to your language -->

<head>

<meta charset="utf-8">

<base href="{root_url}">

<title>{title} | {sitename}</title> <!-- Title of the page | Site name from Global Settings -->

{metadata} <!-- Adds Global Metadata to the page -->

{cms_stylesheet} <!-- Adds attached stylesheets to the page -->

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

<!-- IEMobile 10 viewport fix -->
[literal]<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>[/literal] <!-- should be wrapped in { and } -->

{cms_jquery} <!-- Adds jQuery files to the page -->

</head>

<body>

<!-- header section -->

<header>

<div class="content">

<div class="section">

<div class="two-third-column">

<nav id="menu-mobile" onclick="void(0)">

<div id="nav-mobile"></div>

{Navigator} <!-- Show all the menu buttons -->

</nav>

</div>

<div class="three-column"><h6>{sitename}</h6> <!-- Site name from Global Settings --></div>

</div>

</div>

<div class="section"><!-- clear section --></div>

</header>

<!-- header section -->

<!-- main section -->

<main>

<div class="content">

<div class="section">
<div class="two-third-column">

<h1>{title}</h1> <!-- Title of the page -->

{content} <!-- Page content -->

</div>
<div class="three-column">

{news} <!-- News article links -->

</div>
</div>

</div>

<div class="section"><!-- clear section --></div>

</main>

<!-- main section -->

<!-- footer section -->

<footer>

<div class="content">

<div class="section">
<div class="one-column">{global_content name='footer'} <!-- Extract all footer code to a global content block --></div>
</div>

</div>

<div class="section"><!-- clear section --></div>

</footer>

<!-- footer section -->

</body>

</html>

 
Stylesheets:

/* GRID 1200 GRID CSS (by PMKMedia.nl/grid) */

/* reset */

html,
body,
address,
blockquote,
div,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
pre,
table,
ul,
dd,
dt,
li,
tbody,
td,
tfoot,
th,
thead,
tr,
button,
del,
ins,
map,
object,
a,
abbr,
acronym,
b,
bdo,
big,
br,
cite,
code,
dfn,
em,
i,
img,
kbd,
q,
samp,
small,
span,
strong,
sub,
sup,
tt,
var,
legend,
fieldset {
    margin: 0;
    padding: 0;
}

img,
fieldset {
    border: 0;
}

/* set html5 elements to block */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

/* apply a natural box layout model to all elements */

*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* viewport css */

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* body css */

body {
    margin: 0;
    text-align: center;
}

.section {
    clear: both;
    padding: 0;
    margin: 0;
}

/* media css */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* form css */

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=search],
input[type=tel],
input[type=url],
input[type=file],
input[type=button],
input[type=submit],
input[type=reset],
select,
textarea {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=search],
input[type=tel],
input[type=url],
input[type=file],
select,
textarea {
    width: 100%;
}

/* general table css */

table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}

/* split column css */

.split-column {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.split-column:last-child {
    margin-bottom: 0;
}

/* content css */

.content {
    margin: 0 auto;
    text-align: left;
    max-width: 1200px; /* max-width of your responsive website (example 1200px) */
}

.one-column {
    float: left;
    width: 98%;
    margin: 10px 1%;
}

.two-column,
.two-fourth-column {
    float: left;
    width: 48%;
    margin: 10px 1%;
}

.three-column {
    float: left;
    width: 31.333333%;
    margin: 10px 1%;
}

.two-third-column {
    float: left;
    width: 64.666666%;
    margin: 10px 1%;
}

.four-column,
.one-fourth-column {
    float: left;
    width: 23%;
    margin: 10px 1%;
}

.three-fourth-column {
    float: left;
    width: 73%;
    margin: 10px 1%;
}

.six-column {
    float: left;
    width: 14.666666%;
    margin: 10px 1%;
}

.five-sixth-column {
    float: left;
    width: 81.333333%;
    margin: 10px 1%;
}

@media screen and (max-width: 800px) {

    .one-column,
    .two-fourth-column,
    .three-column,
    .two-third-column,
    .one-fourth-column,
    .three-fourth-column,
    .six-column,
    .five-sixth-column {
        width: 97%;
        margin: 10px 1.5%;
    }

    .two-column,
    .four-column {
        width: 47%;
        margin: 10px 1.5%;
    }

}

@media screen and (max-width: 600px) {

    .content {
        min-width: 300px;  /* min-width of your responsive website (example 300px) */
    }

    .one-column,
    .two-column,
    .two-fourth-column,
    .three-column,
    .two-third-column,
    .four-column,
    .one-fourth-column,
    .three-fourth-column,
    .six-column,
    .five-sixth-column {
        width: 96%;
        margin: 10px 2%;
    }

}

/* GRID 1200 STYLE CSS (by PMKMedia.nl/grid) */

/* body css */

html,
body {
    height: 100%;
}

body {
    background: url('[[root_url]]/uploads/grid1200/images/back.jpg') #fff;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    -webkit-text-size-adjust: 100%;
    display: table;
    width: 100%
}

/* headings and paragraph margin css */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 15px;
}

/* headings css */

h1 {
    font-size: 25px;
    font-weight: 400;
    color: #666;
}

h2 {
    font-size: 25px;
    font-weight: 400;
    color: #000;
}

h3 {
    font-size: 20px;
    font-weight: 400;
    color: #666;
}

h4 {
    font-size: 20px;
    font-weight: 400;
    color: #000;
}
    
h5 {
    font-size: 15px;
    font-weight: 400;
    color: #666;
}

h6 {
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

/* list css */

ul {
    list-style-type: disc;
    margin: 15px 45px;
}

ol {
    list-style-type: decimal;
    margin: 15px 45px;
}

ul li,
ol li {
    display: list-item;
}

/* link css */

a {
    color: #000;
    text-decoration: underline;
}

a:visited {
    color: #333;
}

a:hover {
    color: #999;
}

a:active {
    color: #666;
}

/* elements css */

strong,
b {
    font-weight: 400;
}

em,
i {
    font-style: italic;
}

u {
    text-decoration: underline;
}

/* form css */

.form {
    margin: 15px;
}

.form h1,
.form h2,
.form h3,
.form h4,
.form h5,
.form h6,
.form p {
    margin: 15px 0;
}

.form input {
    border-radius: 0;
}

.form select {
    border-radius: 0;
    -webkit-appearance: none;
}

.form input,
.form textarea,
.form button,
.form select {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
}

.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form input[type=password],
.form select,
.form textarea {
    padding: 7px;
    background: #fff;
    border: 1px solid #999;
}

.form input[type=radio],
.form input[type=checkbox] {
    margin-top: 15px;
}

.form input[type=submit],
.form input[type=reset] {
    margin-top: 15px;
    padding: 10px;
    background: #999;
    color: #fff;
    border: 0;
}

.form input[type=submit]:hover,
.form input[type=reset]:hover {
    background: #666;
}

/* table css */

table {
    width: 96%;
    margin: 15px 2%;
    border-spacing: 0;
    border-collapse: collapse;
}

table th {
    font-weight: 400;
    padding: 10px;
    border: 1px solid #999;
    background: #efefef;
}

table td {
    padding: 10px;
    border: 1px solid #999;
}

/* content css */

header {
    background: #fff;
    border-bottom: 1px solid #999;
}

main {
    display: table-row;
    height: 100%;
}

footer {
    display: table-row;
    height: 1px;
    background: #fff;
    outline: 1px solid #999;
}

header .three-column,
header .two-third-column,
footer .four-column,
footer .one-column {
    border: 0;
}

header .three-column h6 {
    text-align: right;
}

footer .one-column {
    text-align: center;
}

.one-column,
.two-column,
.three-column,
.three-column-close,
.two-third-column,
.four-column,
.one-fourth-column,
.two-fourth-column,
.three-fourth-column,
.six-column,
.five-sixth-column {
    background: #fff;
    border: 1px solid #999;
}

@media screen and (max-width: 800px) {
    
    /* content css */
    
    header .three-column,
    footer .four-column {
        display: none;
    }
    
}

@media screen and (max-width: 600px) {

    /* table css */
    
    table {
        width: 94%;
        margin: 15px 3%;
        font-size: 12px;
    }

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    /* retina display css */
    
    body {
        background: url('[[root_url]]/uploads/grid1200/back@2x.jpg') #fff;
        background-size: 66px; /* size no retina image */
        -moz-background-size: 66px;
        -webkit-background-size: 66px;
    }

}

/* GRID 1200 MENU CSS (by PMKMedia.nl/grid) */

/* menu css */

#menu {
    font-size: 15px;
}

#menu,
#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu li {
    float: left;
    position: relative;
}

#menu li ul {
    position: absolute;
    margin-top: -10%;
    margin-left: 10%;
    display: none;
}

#menu ul li ul,
#menu ul ul li ul {
    margin-top: -20%;
    margin-left: 80%;
}

/* show submenu 1 */

#menu li:hover ul {
    display: block;
}

#menu li:hover ul ul {
    display: none;
}

/* show submenu 2 */

#menu ul li:hover ul {
    display: block;
}

#menu ul li:hover ul ul {
    display: none;
}

/* show submenu 3 */

#menu ul ul li:hover ul {
    display: block;
}

/* menu link css */

#menu a {
    display: block;
    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 15px 20px;
}

#menu a:hover {
    background: #999;
    color: #fff;
}

#menu ul {
    background: #999;
    border: 1px solid #999;
    width: 200px;
}

#menu ul a {
    background: #fff;
    color: #000;
    font-size: 14px;
    width: 198px;
    padding: 15px;
}

.currentpage {
    background: #999 !important;
    color: #fff !important;
}

/* menu z-index */

#menu {
    z-index: 1000;
}

#menu ul {
    z-index: 2000;
}

#menu ul ul {
    z-index: 3000;
}

#menu ul ul ul {
    z-index: 4000;
}

@media screen and (max-width: 960px) {    

    /* menu link css */

    #menu a {
        padding: 15px 15px;
    }

}

@media screen and (max-width: 800px) {    

    /* mobile menu css */
    
    #nav-mobile {
        padding: 15px;
    }
    
    #nav-mobile:before {
        content: "Navigate to...";
    }
    
    #menu {
        display: none;
        border: 1px solid #999;
    }
    
    #menu-mobile:hover #menu {
        display: block;
    }

    /* menu css */
    
    #menu li {
        float: none;
    }
    
    #menu li ul,
    #menu ul li ul,
    #menu ul ul li ul {
        position: relative;
        margin-top: 0;
        margin-left: 0;
        display: block;
    }
    
    #menu li:hover ul ul,
    #menu ul li:hover ul ul {
        display: block;
    }
    
    #menu ul {
        width: 100%;
        border: 0;
    }

    /* menu link css */
    
    #menu li a {
        background: #fff;
    }
    
    #menu ul a {
        width: 100%;
        padding: 15px 10%;
    }
    
    #menu ul li ul a {
        width: 100%;
        padding: 15px 15%;
    }
    
    #menu ul li ul ul a {
        width: 100%;
        padding: 15px 20%;
    }

}

 

Menusjabloon CMS Made Simple 1.11+:

{if $count > 0}

<ul id="menu">
{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->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li><a href="{$smarty.server.REQUEST_URI}#">{$node->menutext}</a>

{elseif $node->type == 'separator'}
<li>

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>

{/if}

 

Navigator template CMS Made Simple 2.0+:

{function name=Nav_menu depth=1}{strip}
<ul id="menu">

{foreach $data as $node}

{assign var='aclass' value=''}

{if $node->current}
{assign var='aclass' value=$aclass|cat:'currentpage'}
{/if}

{if $node->type == 'sectionheader'}

<li><a href="{$smarty.server.REQUEST_URI}#"> {$node->menutext} </a>

{if isset($node->children)}
{Nav_menu data=$node->children depth=$depth+1}
{/if}

</li>

{else if $node->type == 'separator'}

<li> <hr> </li>

{else}

<li><a class="{$aclass}" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{if isset($node->children)}
{Nav_menu data=$node->children depth=$depth+1}
{/if}

</li>

{/if}

{/foreach}

</ul>

{/strip}{/function}

{if isset($nodes)}
{Nav_menu data=$nodes depth=0}
{/if}

 

Metadata:

<meta name="description" content="Awesome Description Here">
<meta name="keywords" content="keyword, keyword, keyword">

<meta name="generator" content="{sitename}">
<meta name="author" content="{root_url}">

<meta name="robots" content="index, follow">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="{root_url}/uploads/grid1200/icons/favicon.png">

<link rel="apple-touch-icon" href="{root_url}/uploads/grid1200/icons/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="{root_url}/uploads/grid1200/icons/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="{root_url}/uploads/grid1200/icons/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="{root_url}/uploads/grid1200/icons/touch-icon-ipad-retina.png">

<meta name="application-name" content="&nbsp;">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="{root_url}/uploads/grid1200/icons/tile-tiny.png">
<meta name="msapplication-square150x150logo" content="{root_url}/uploads/grid1200/icons/tile-square.png">
<meta name="msapplication-wide310x150logo" content="{root_url}/uploads/grid1200/icons/tile-wide.png">
<meta name="msapplication-square310x310logo" content="{root_url}/uploads/grid1200/icons/tile-large.png">

In het zip bestand zit een mapje uploads de inhoud kan je uploaden naar de uploads map van CMS Made Simple voor dat je de icons hebt aangepast naar jou website style.

 

Dat was het weer. Veel plezier er mee en zijn er vragen of ben ik iets vergeten zeg het maar!

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets