Git Product home page Git Product logo

theme-skeleton's Introduction

theme-skeleton

A basic starting point for an Aptuitiv theme.

Usage

The goal of this theme is to be copied to another repository for the site you're working on. From there, you can install it on the website, and edit it as needed.

Installation

Set Up Repo

You'll want to create a new git repository for the site that this is being installed to. Copy the contents of this repo to that repo. That will allow you to make modifications that only affect that website.

From that folder, you'll need to install the dependencies, run an initial build, and set up FTP. You can set up FTP using create-ftp-env or by following the FTP section below. When prompted for credentials, you can find them in the CMS under Settings -> Domain / FTP / DNS.

npm install
gulp build
create-ftp-env

Preparing the CMS

Before deploying, you'll want to log into the CMS for the new site and do the following. These prepare the CMS for deploying the theme files.

  1. Turn on SSL by enabling "My site supports SSL", "Entire public site is secure", and "Entire administration is secure" from Settings -> Security.
  2. Disable Cache under Settings -> Cache.
  3. Install the Theme configuration by uploading it under Design -> View Themes -> Update and continuing on the next page.
  4. Prime the Page Templates by visiting Design -> Templates.
  5. Edit the "Home" page to use the "One Column" Page Template from Content -> Pages.
  6. Delete the "Default" Page Template from Design -> Templates.
  7. Set the "Banner" Content Layout's available Content Areas to be only the "Banner" Content Area under Content -> Content Layouts -> Banner -> Edit this Content Layout.
  8. Set up Template Content Layout Assignments to map the "Banner" Content Layout to the "Banner" Content Area for the "One Column" and "Two Column" Page Templates under Content -> Page Settings -> Template Content Layout Assignments.
  9. Prime the Snippets by visiting Design -> Snippets.
  10. Prime the Navigation Templates by visiting Design -> Navigation -> Navigation Templates.
  11. Create a "Main" Navigation Menu using the "Main" Navigation Template and select "Show sub navigation all the time" from Design -> Navigation -> Navigation Menus.
  12. Create a "Footer" Navigation Menu using the "Footer" Navigation Template from Design -> Navigation -> Navigation Menus.
  13. Prime the Content Builder Elements by visiting Design -> Content Builder.
  14. Prime the Collection Widgets by visiting Widgets -> Collections -> Notifications.
  15. Prime the Form Templates by visiting Forms -> Templates.
  16. Prime the Search Templates by visiting Site Manager -> Search -> Templates -> Templates.
  17. Edit and save the Search Form under Site Manager -> Search -> Forms. This will generate the form fields.
  18. Set a sensible Admin Theme under Settings -> Admin Theme.

Deploying the Theme

Deploy the theme files using the gulp deploy command and wait until completed (~30 seconds).

Configuring the Theme

To finish the installation, you'll need to configure some basic options of the theme.

  1. Update the Company Information under Settings -> Company Information.
  2. Configure Theme Settings under Design -> Theme Editor.
    1. Set the default Banner Image sizes under Settings -> Banner Images. Set these to 2000x1000, 1000x500, 500x250.
    2. Upload a Header logo or set the text logo under Settings -> Header.
    3. Update the Color Palette under Palettes -> Color Palette. Add "Primary" (#871E0F), "Secondary" (#591108), and "Typography" (#333).
    4. Update the Font Palette under Palettes -> Font Palette. Add "Montserrat" and "Open Sans" with default weights. Disable all of the System fonts under the "System" tab.
    5. Go through all of the Theme Styles from the Theme Styles tab and update all color references to use the Color Palette if matching one.
    6. Update Typography under Styles -> Typography to use "Open Sans" for the base font family and "Montserrat" for the heading font family.

You've now got an instance of Skeleton installed and configured on your new site. From here you can customize the styles in the Theme Editor or make template changes.

Making Changes

If you want to make changes, all you have to do is run gulp watch while making all file changes. They will be deployed automatically.

FTP

We recommend using create-ftp-env for generating the .env file automatically.

You can alternatively create a manual .env file with the following data instead:

FTP_ENVIRONMENT = live
FTP_SERVER = ftp1.branchcms.com
FTP_USERNAME = my_ftp_username
FTP_PASSWORD = my_ftp_password

theme-skeleton's People

Contributors

erictompkins avatar

Watchers

 avatar  avatar

theme-skeleton's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.