About Phone1st starter theme information and usage

A light, clean, starter theme that starts... phone1st

A light and basic html starter theme to get you off to a quick start with your web developments. The CSS is put together using SCSS, a popular way of creating quick, organised stylesheets. Using Phone1st will save you time, building quicker, smarter projects. Once you start using Phone1st you’ll keep using it.

Quick Start

Download - Rename the folder - Import into CodeKit

Build your site with the help of the test folder

Remove the test folder

Upload the build folder to your server

CodeKit

Phone1st is designed to be used with CodeKit (Mac only). Taking advantage of CodeKits - kit templates and kit variables.

If you don’t have CodeKit the css folder could be adapted to suit your use.

The theme should build correctly when imported into Codekit, but if not:

You can delete the build folder and re-build.

Remove the config.codekit3 file and re-import into CodeKit using your CodeKit settings.

You can set the paths to the 'build' folder to suit yourself but phone1st uses:

style.scss - /build/css/style.css
app.js - /build/js/app.js
images - /build/images/
index.kit - /build/index.html

To view the test folder pages

test.kit - /build/test/test.html
about.kit - /build/test/about.html
scss.kit - /build/test/scss.html

base.scss - /build/test/css/base.css

all test images to /build/test/test-images/

The Test Folder

The test folder can be removed when no longer required it will not effect the theme.

Test Page - Use the test page to set the basic elements.

Basic SEO

The following variables for Meta Data are available with some Facebook and Twitter meta. These are optional and you should add or subtract what you require.

Meta variables:

<!-- $title Page Title -->// - Basic page title for use with navigation etc. eg Home, About, etc

<!-- $SEO-title A Longer Title-->//- A more descriptive title - 60ish characters

<!-- $description Page Description -->// - 120ish characters

<!-- $keyword Home, About -->// - word or words

<!-- $url index.html -->// - exact url (canonical)

<!-- $post-image eg tile-wide.png -->// - image to use for Facebook and Twitter meta image

See includes/_meta.kit.

Important - Check the meta data in your page head with the browser inspector

NOTES

Dart Scss

Check the Dart Scss website for updates and deprecations

Contact Info:

email: h@phone1st.org