About

Phone1st logo

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.

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 and scss files may be adapted to suit your use. You'll need a Scss processor to parse the scss. The Css style-sheet in the build folder isn't minified.

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

Experimenting with Classes

Experimenting with the class utitlity method for styling. I think the more complicated classes with quite a number of styles are still easier using a stylesheet. Utitlity classes seem to work well with templates for consistant styles and speed. Will have to see how it goes and see what evolves.

Contact Info:

email: h@phone1st.org

Web: phone1st.org

Home | Test Page | Scss Mixins | Classes