GrantSmithDoddle

<section class="navigation">
    <div class="nav-container">
        <div class="brand">
            <a href="#!">Logo</a>
        </div>
        <nav>
            <div class="nav-mobile">
                <a id="nav-toggle" href="#!"><span></span></a>
            </div>
            <ul class="nav-list">

GrantSmithDoddle

a {
  text-decoration: none;
}
.fa {
  font-size: 1.2em;
  line-height: 2em;
  background: white;
  border-radius: 2em;
  height: 2em;
  width: 2em;

GrantSmithDoddle

#Perch Runway Collection Menu

This is to document how to make a menu with collection items. For this project I needed a Services collection, consisting of a Services page with Service sub pages as menu items in the Header Nav of my project.

The project also uses Bulma Navbar.

To achieve, you need to of setup a Perch Collection and then the following templates require creating if you haven't already done so.

/layouts/global/header.php
/navigation/level_1.html

GrantSmithDoddle

#Install Bootstrap

1. CD into directory
2. Install Bootstrap / Jquery / Popper

cd directoryname
npm i bootstrap jquery popper.js --save

##Organise files

GrantSmithDoddle

#Page information
<perch:group label="Page" collapse>
    <perch:group label="Testimonial" collapse>
    <perch:content id="title" type="text" label="Title / Heading" required title>
    <perch:content id="slug" type="slug" for="title">
</perch:group>

#Company information
<perch:group label="Company" collapse>
    <perch:content id="company_name" type="text" label="Company Name">

GrantSmithDoddle

Great resources

1. Setting up a Blog in Perch Runway (Video)

2. Runway Configuration

Process

1. Install blog to apps

GrantSmithDoddle

/* Small screen, non-retina */
=small
    @media only screen and (min-width: 320px)
        @content

=small-p
    @media only screen and (min-width: 320px) and (orientation : portrait)
        @content

=small-l

GrantSmithDoddle

<!--*  
// ====================================================================
// CATEGORY SUBMENU
// ====================================================================
// outputs set of category links for sub-menu (/perch/templates/categories/custom/category_submenu.html)
// called by perch_categories() in nav.php
*-->
<perch:before><ul class="sub-menu"></perch:before>
<li<perch:if id="catDepth" match="gt" value="1"> class="indent"</perch:if> ><a href="/<perch:category id="catPath" />"><perch:category id="catTitle" type="smarttext" /></a></li>
<perch:after></ul></perch:after>

GrantSmithDoddle

Managing GitHub Deployment for Perch Runway Projects

The following is how Transition manages the GitHub Deployment process. We are assuming a private ssh key linking the Git Repository to the hosting server has been created, and SSH access to the server is setup.

This process results in previous versions of the site remaining on the server in case a rollback is required. Resources not included in the version control process are stored in a folder called non-syncing-resources, and symbolic links (otherwise known as symlink) are used to connect the resources.

New Deployment

1. Log in to the server over SSH
2. Create a new directory called git by running mkdir git and then cd into that directory

GrantSmithDoddle

Git

The below are some notes on Git which includes settings up and using.

Contents

Install
Set your identity for your global Git settings
SSH keys
User guide