landing page theme
 
 
 
Go to file
David Kebler 301675b096 add max-wdith to image shortcode - change css of #hero to .section--hero 2017-04-22 16:48:48 -07:00
layouts add max-wdith to image shortcode - change css of #hero to .section--hero 2017-04-22 16:48:48 -07:00
static add max-wdith to image shortcode - change css of #hero to .section--hero 2017-04-22 16:48:48 -07:00
.gitignore clean out master branch of non-code content 2017-03-23 08:55:59 -07:00
.htmlhintrc converted to all flexbox, added gallery shortcode 2017-03-04 08:13:15 -08:00
.stylelintrc fix iframe resize issue - added more custom sytling options 2017-03-13 18:21:06 -07:00
config.toml.sample add external path for images - add contact and avatar shortcode 2017-03-29 19:58:42 -07:00
readme.md add in settings to turn off youtube thumb images on demand globally and per shortcode 2017-04-11 20:08:03 -07:00

readme.md

Customizable Mobile First Responsive Landing Page Theme and Starter -- Noob Friendly

TL;DR

For those who are Hugo experienced and know what they are doing and are able to “figure out” the details simply clone the guide repo. Edit the markdown files in the /sections directory and settings in config.toml. To start from scratch by all means just clone (or submodule) this theme into an existing hugo projects themes folder. If you need to cheat and see ths guide it's here

About

Seriously....A complete theme in a repo that's especially useful for noobs who just want to generate a landing page with some customized styling options (colors, fonts, etc.) and one's content without knowing any html, javascript or css nor much about Hugo...but... You do have to learn about writing markdown and how to deploy your generated site to where others can see it.

Motivation: Plenty of themes out there for Hugo but few that would allow a noob to customize their page without knowing css and Go/HTML templates and fewer still with all the javascript necessary to be fully responsive.

Goal: Create a mobile first responsive flexbox based Hugo landing page theme including shortcodes that would allow a noob to generate a customized landing page by only knowing a little markdown. Provide a starter repo and guide to make it easy to create one's own landing page in a few minutes

Further Goal: Add automated (via nodejs) deployment to github pages, S3 bucket or any server using ssh. My other project 4S can do this it just needs to be integrated. Also want to automate building photo galleries. Currently this can be done but manually with Thumbsup. The generated code is made into a shortcode and the generated thumbs and images added to the project manually. Also add in code minification and optimazation for production/distribution builds

Ultimiate Goal: Put together a noob virtualbox VM with all the tools (e.g. atom, git, smartgit, hugo, node, etc.) and code installed and configured and ready to go. Fire up the VM and you're instantly productive. Might as well make a few tutorial videos on using the entire project.

Getting Started

See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the landing page guide (generated by Hugo and this theme of course). Once you have the tools you'll need installed you can begin editing a copy of the starter repository. Quickly you'll have a rough version of your landing page in just a few minutes.

Cavets

This code does not support older nor old-ball browsers I have taken NO measures to support anything but the latest popular browsers (that would be Chrome, Firefox and Edge). There is not css prefixing. The javascript should be compatible with the mentioned browsers on any version out in the last year or two. If you want to use this code to reach "everyone" then it would be up to you to make the necessary modifications. That said it will work for most people who have upgraded their phone/browser in the last two years. I make no guarantees against bugs as I have done very little testing on actual devices as services like browserstack are expensive and I don't have the time. So for example I have not tested in IOS running Safari since I don't own any Apple devices. Beyond that I have written no tests for the javascript code although I have tried to manually test things in particular the settings in the toml file. It's probably just fine for non-critical stuff. Otherwise I'd fork it and spend the time making it battle hardended.

Optimization

At this time I have not written any workflow code to concatenate and minifify the javascript, css, or html. Plans are in the works to write some nodejs to do this so when building using for depolyment Hugo will use the optimized files and templates. For the time being it is what it is. There not so much code here that I have honestly noticed a performance hit. I did write javascript code to use youtube thumb images which really helps with load time if you need a lot of videos embedded. Using optomized images on your part if you have a lot would have a greater effect than this optimization anyway.