Grella, funcions, e estructura basica da paxina.

site/templates/basic-page.php

@@ -1,15 +0,0 @@
-<?php namespace ProcessWire; 
-
-// Template file for pages using the “basic-page” template
-// -------------------------------------------------------
-// The #content div in this file will replace the #content div in _main.php
-// when the Markup Regions feature is enabled, as it is by default. 
-// You can also append to (or prepend to) the #content div, and much more. 
-// See the Markup Regions documentation:
-// https://processwire.com/docs/front-end/output/markup-regions/
-
-?>
-
-<div id="content">
-	Basic page content 
-</div>	

site/templates/css/fonts.css

@@ -0,0 +1,120 @@
+/**
+ * @FONTS
+ * =============================================================================
+ *
+ * fonts.css v0.0.1 | GNU GPL License | 
+ *
+ */
+
+/*
+    Compatibility
+    ----------------------------------------------------------------------------
+    1. IE9 Compat Modes
+    2. IE6-IE8
+    3. Super Modern Browsers
+    4. Pretty Modern Browsers
+    5. Safari, Android, iOS
+    6. Legacy iOS
+*/
+
+@font-face
+{
+    font-family: 'icomoon';
+    src: url('../fonts/icomoon_Regular.eot?nvq8gi'); /* 1 */
+    src: url('../fonts/icomoon_Regular.eot?nvq8gi#iefix') format('embedded-opentype'), /* 2 */
+       url('../fonts/icomoon_Regular.woff2?nvq8gi') format('woff2'), /* 3 */
+       url('../fonts/icomoon_Regular.woff?nvq8gi') format('woff'), /* 4 */
+       url('../fonts/icomoon_Regular.otf?nvq8gi')  format('opentype'), /* 5 */
+       url('../fonts/icomoon_Regular.ttf?nvq8gi')  format('truetype'), /* 5 */
+       url('../fonts/icomoon_Regular.svg?nvq8gi#icomoon') format('svg'); /* 6 */
+    font-display: block;
+    font-style: normal;
+    font-weight: normal;
+}
+
+/**
+ * Iconos
+ *
+ */
+
+[class^="icon-"],
+[class*=" icon-"]
+{
+    font-family: 'icomoon' !important;
+    font-variant: normal;
+    font-style: normal;
+    line-height: 1;
+    text-transform: none;
+
+    speak: never;
+}
+
+.icon-chevrons-right:before
+{
+    content: "\e900";
+}
+
+.icon-edit:before
+{
+    content: "\e901";
+}
+
+.icon-document-file-txt:before
+{
+    content: "\e902";
+}
+
+.icon-corner-right-down:before
+{
+    content: "\e903";
+}
+
+.icon-folder:before
+{
+    content: "\e904";
+}
+
+.icon-tag:before
+{
+    content: "\e905";
+}
+
+.icon-book-open:before
+{
+    content: "\e906";
+}
+
+.icon-book:before
+{
+    content: "\e907";
+}
+
+.icon-arrow-right:before
+{
+    content: "\e908";
+}
+
+.icon-user:before
+{
+    content: "\e909";
+}
+
+.icon-skip-back:before
+{
+    content: "\e90a";
+}
+
+.icon-skip-forward:before
+{
+    content: "\e90b";
+}
+
+.icon-play:before
+{
+    content: "\e90c";
+}
+
+.icon-search:before
+{
+    content: "\e90d";
+}

site/templates/css/main.css

@@ -1 +1,38 @@
-/* Example CSS file */ 
+:root
+{
+    --separacion: 1rem;
+    --contido-max: 60rem;
+    --destacado-max: 75rem;
+    --destacado: calc((var(--destacado-max) - var(--contido-max)) / 2);
+}
+
+.grella
+{
+    display: grid;
+    grid-template-columns:
+        [completo-start] minmax(var(--separacion), 1fr)
+            [destacado-start] minmax(0, var(--destacado))
+                [contido-start] min(100% - (var(--separacion) * 2), var(--contido-max)) [contido-end]
+            minmax(0, var(--destacado)) [destacado-end]
+        minmax(var(--separacion), 1fr) [completo-end]
+    ;
+}
+
+.grella > :not(.destacado, .completo),
+.completo > :not(.destacado, .completo)
+{
+    grid-column: contido;
+}
+
+.grella > .completo
+{
+    display: grid;
+    grid-column: completo;
+    grid-template-columns: inherit;
+}
+
+.grella > .destacado,
+.completo > .destacado
+{
+    grid-column: destacado;
+}

site/templates/css/reset.css

@@ -0,0 +1,286 @@
+@charset "UTF-8";
+
+/**
+ * @NORMALIZE
+ * =============================================================================
+ *
+ * normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+ *
+ */
+
+/*
+    Document
+    ----------------------------------------------------------------------------
+    1. Correct the line height in all browsers.
+    2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+html
+{
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+    Sections
+    ----------------------------------------------------------------------------
+    1. Remove the margin in all browsers.
+    2. Render the `main` element consistently in IE.
+    3. Correct the font size and margin on `h1` elements within `section` and
+       `article` contexts in Chrome, Firefox, and Safari.
+*/
+body /* 1 */
+{
+    margin: 0;
+}
+
+main /* 2 */
+{
+    display: block;
+}
+
+h1 /* 3 */
+{
+    font-size: 2rem;
+    margin: 0.67rem 0;
+}
+
+/*
+    Grouping content
+    ----------------------------------------------------------------------------
+    1. Add the correct box sizing in Firefox.
+    2. Show the overflow in Edge and IE.
+    3. Correct the inheritance and scaling of font size in all browsers.
+    4. Correct the odd `rem` font sizing in all browsers.
+*/
+hr
+{
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+
+pre
+{
+    font-family: monospace, monospace; /* 3 */
+    font-size: 1rem; /* 4 */
+}
+
+/*
+    Text-level semantics
+    ----------------------------------------------------------------------------
+    1. Remove the gray background on active links in IE 10.
+    2. Remove the bottom border in Chrome 57-
+    3. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+    4. Add the correct font weight in Chrome, Edge, and Safari.
+    5. Correct the inheritance and scaling of font size in all browsers.
+    6. Correct the odd `em` font sizing in all browsers.
+    7. Add the correct font size in all browsers.
+    8. Prevent `sub` and `sup` elements from affecting the line height in all
+       browsers.
+*/
+a /* 1 */
+{
+    background-color: transparent;
+}
+
+abbr[title]
+{
+    border-bottom: none; /* 2 */
+    text-decoration: underline; /* 1 */
+    text-decoration: underline dotted; /* 1 */
+}
+
+b, strong /* 4 */
+{
+    font-weight: bolder;
+}
+
+code, kbd, samp
+{
+    font-family: monospace, monospace; /* 5 */
+    font-size: 1em; /* 6 */
+}
+
+small /* 7 */
+{
+    font-size: 80%;
+}
+
+sub, sup /* 8 */
+{
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub
+{
+    bottom: -0.25em;
+}
+
+sup
+{
+    top: -0.5em;
+}
+
+/*
+    Embedded content
+    ----------------------------------------------------------------------------
+    1. Remove the border on images inside links in IE 10.
+*/
+img /* 1 */
+{
+    border-style: none;
+}
+
+/*
+    Forms
+    ----------------------------------------------------------------------------
+    1. Change the font styles in all browsers.
+    2. Remove the margin in Firefox and Safari.
+    3. Show the overflow in IE/Edge.
+    4. Remove the inheritance of text transform in Edge, Firefox, and IE.
+    5. Correct the inability to style clickable types in iOS and Safari.
+    6. Remove the inner border and padding in Firefox.
+    7. Restore the focus styles unset by the previous rule.
+    8. Correct the padding in Firefox.
+    9. Correct the text wrapping in Edge and IE.
+    10. Correct the color inheritance from `fieldset` elements in IE.
+    11. Remove the padding so developers are not caught out when they zero out
+        `fieldset` elements in all browsers.
+    12. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+    13. Remove the default vertical scrollbar in IE 10+.
+    14. Add the correct box sizing in IE 10.
+    15. Remove the padding in IE 10.
+    16. Correct the cursor style of increment and decrement buttons in Chrome.
+    17. Correct the odd appearance in Chrome and Safari.
+    18. Correct the outline style in Safari.
+    19. Remove the inner padding in Chrome and Safari on macOS.
+    20. Correct the inability to style clickable types in iOS and Safari.
+    21. Change font properties to `inherit` in Safari.
+*/
+button, input, optgroup, select, textarea
+{
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+button, input /* 3 */
+{
+    overflow: visible;
+}
+
+button, select /* 4 */
+{
+    text-transform: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] /* 5 */
+{
+    -webkit-appearance: button;
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner /* 6 */
+{
+    border-style: none;
+    padding: 0;
+}
+
+
+button:-moz-focusring, [type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring /* 7 */
+{
+    outline: 1px dotted ButtonText;
+}
+
+fieldset /* 8 */
+{
+    padding: 0.35em 0.75em 0.625em;
+}
+
+legend
+{
+    box-sizing: border-box; /* 9 */
+    color: inherit; /* 10 */
+    display: table; /* 9 */
+    max-width: 100%; /* 9 */
+    padding: 0; /* 11 */
+    white-space: normal; /* 9 */
+}
+
+progress /* 12 */
+{
+    vertical-align: baseline;
+}
+
+textarea /* 13 */
+{
+    overflow: auto;
+}
+
+[type="checkbox"], [type="radio"]
+{
+    box-sizing: border-box; /* 14 */
+    padding: 0; /* 15 */
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button /* 16 */
+{
+    height: auto;
+}
+
+[type="search"]
+{
+    -webkit-appearance: textfield; /* 17 */
+    outline-offset: -2px; /* 18 */
+}
+
+[type="search"]::-webkit-search-decoration /* 19 */
+{
+    -webkit-appearance: none;
+}
+
+
+::-webkit-file-upload-button
+{
+    -webkit-appearance: button; /* 20 */
+    font: inherit; /* 21 */
+}
+
+/*
+    Interactive
+    ----------------------------------------------------------------------------
+    1. Add the correct display in Edge, IE 10+, and Firefox.
+    2. Add the correct display in all browsers.
+*/
+details /* 1 */
+{
+    display: block;
+}
+
+summary /* 2 */
+{
+    display: list-item;
+}
+
+/*
+    Misc
+    ----------------------------------------------------------------------------
+    1. Add the correct display in IE 10+.
+    2. Add the correct display in IE 10.
+*/
+template /* 1 */
+{
+    display: none;
+}
+
+[hidden] /* 2 */
+{
+    display: none;
+}

site/templates/home.php

@@ -1,15 +0,0 @@
-<?php namespace ProcessWire;
-
-// Template file for “home” template used by the homepage
-// ------------------------------------------------------
-// The #content div in this file will replace the #content div in _main.php
-// when the Markup Regions feature is enabled, as it is by default. 
-// You can also append to (or prepend to) the #content div, and much more. 
-// See the Markup Regions documentation:
-// https://processwire.com/docs/front-end/output/markup-regions/
-
-?>
-
-<div id="content">
-	Homepage content 
-</div>	

site/templates/inicio.php

@@ -0,0 +1,10 @@
+<?php namespace ProcessWire;
+
+/** @var Page $page */
+/** @var Pages $pages */
+/** @var Config $config */
+/** @var HomePage $inicio */
+?><main id="contido">
+    <?=renderMigas($page);?>
+    <p>Homepage content</p>
+</main>	

site/templates/layout/func.php

@@ -0,0 +1,33 @@
+<?php namespace ProcessWire;
+
+function renderMigas($paxina)
+{
+    $saida = '';
+
+    $saida .= '<h1>';
+    if($paxina->parents->count())
+    {
+        $saida .= $paxina->parents->implode(" &gt; ", "<a href='{url}'>{title}</a>",
+            array(
+                'append' => '&gt'
+            )
+        );
+    }
+    $saida .= $paxina->title . '</h1>';
+
+    return $saida;
+}
+
+function renderMenu($menu, $paxinas)
+{
+    $saida = '';
+
+    $saida .= $paxinas->implode("\n", "<li><a href=\"{url}\">{title}</a></li>",
+        array(
+            'prepend' => '<nav id="' . $menu . '">' . "\n" . '<ul>' . "\n",
+            'append' => "\n" . '</ul>' . "\n" . '</nav>' . "\n"
+        )
+    );
+
+    return $saida;
+}

site/templates/layout/init.php

@@ -1,3 +1,5 @@
 <?php namespace ProcessWire;
 
+include_once("./layout/func.php");
+
 $inicio = $pages->get('/'); /** @var HomePage $inicio */

site/templates/layout/main.php

@@ -3,6 +3,7 @@
 /** @var Page $page */
 /** @var Pages $pages */
 /** @var Config $config */
+/** @var HomePage $inicio */
 
 ?><!DOCTYPE html>
 <html lang="en">
@@ -10,12 +11,26 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo $page->title; ?></title>
+    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/fonts.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/main.css" />
 </head>
-<body>
+<body class="grella">
+    <header id="cabeceira" class="destacado">
+        <nav id="menu">
+            <?=renderMenu("menu-paxinas", $inicio->children);?>
+        </nav>
+    </header>
+    <main id="contido" class="completo">
+
+    </main>
+    <footer class="completo">
 <?php if($page->editable()): ?>
-    <p><a href='<?php echo $page->editUrl(); ?>'>Edit this page</a></p>
+        <p>
+            <a href='<?php echo $page->editUrl(); ?>'>Edit this page</a>
+        </p>
 <?php endif; ?>
+    </footer>
     <script src="<?php echo $config->urls->templates; ?>js/main.js"></script>
 </body>
 </html>

site/templates/paxinas.php

@@ -0,0 +1,10 @@
+<?php namespace ProcessWire;
+
+/** @var Page $page */
+/** @var Pages $pages */
+/** @var Config $config */
+/** @var HomePage $inicio */
+?><main id="contido">
+    <?=renderMigas($page);?>
+    <p>Basic page content </p>
+</main>