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

Remove css/_start.scss

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 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
extras.kit - /build/test/extras.html
layout.kit - /build/test/layout.html
flexbox.kit - /build/test/flexbox.html
contact.kit - /build/test/contact.html

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

all extras js files go into the js folder /build/test/js/
all test images to /build/test/test-images/
contact page uses /build/test/firestore/contact.js

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.

Extras Page - A few javascript extras to start you off.

Scss Page - User and Bourbon mixins used with the Phone1st theme.

Layout Page - Basic Grid Css page layout.

Flexbox Page - Basic Flexbox introduction.

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 available:

<!-- $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

//Note: Your sitename is added after the $SEO-title

<!-- $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, set the website path and sitename at the top of the page. The page variables (from the top of each page), along with your website path and sitename will be used to set the meta data.

sitename is usually the name in your web address ie www.mysitename.com - your sitename would be mysitename

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

NOTES

Dart Scss

The math division is changing in Dart Scss

@use "sass:math";//already in style.scss

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3

// Also allowed, calc returns a single number
@debug calc(12px / 4px); // 3

for more information click here

Contact Info:

email: [email protected] or use the Contact Form at the bottom of the page