Geode is a blank template for use with Hammer hammerformac.com
Working with Geode is fast and easy.
- Create new Project
- Update variables
- Begin coding
Contents
- Introduction
- Contents
- How to install
- Working with Geode
- Variables
- Structure
- Classed Element Includes
- Development Map
- Issues & Feature Request
- Notes & References
To get started adding Geode to Hammer
Navigate to Geode releases on Github.com
- Download the latest .zip release from Github
- Rename the zip archive to .hammer
- Geode-0.1.0.zip -> Geode-0.1.0.hammer
- Double click to install
- Create new project in Hammer
- Select Geode as template
- Start coding
Geode works as a standalone Hammer template
To use Geode with just Hammer
-
Create a new project using the Geode Template.
-
customize the variables in the variables.html file located in the partials directory
- Definitions of the variables are lower in this document.
- Build with Hammer.
The following are the variables defined in Geode. Working with Hammer — you'll want to edit the _variables.html file found in the top level folder of your project.
- $version
- Working version of the website
- $siteName | siteName
- Website name
- $name
- Websafe version of website name
- e.g. Fun Site Name -> "fun-site-name"
- $keywords
- Comma separated keywords for the site
- Treat these as keywords
- $description
- Short description of the website
- Treat this as description
- $publisher
- Name or url to the publisher's website
- Website's twitter account
- $siteUrl
- URL for the website
- $siteUrlShort
- Shortened url for the website
- if you have a custom short domain or use a service like bit.ly
- $siteEmail
- Website's contact email address
- $siteAnalytics
- Google Analytics ID
- This may in the future expand to be a multitude of analytics services
- $siteColor
- Colour of the website.
- Used for Windows 8 tiles
- $copyright
- Copyright information for the website
- $language
- Language encoding of the website
- e.g. en-GB
- $license
- License to use for website
- $creatorName
- Name of the creator of the site
- $creatorTwitter
- Twitter account of the creator
- $twitterCard
- Twitter card type - Summary, Photo, Gallery, App, Player, Product
- Can just be left as summary
- $date
- Change to adjust the created dates
- If using Grunt - leave as is - this will be automatically generated
The following is the files/directory structure of Geode
_partials/ - bits and pieces of the project
_analytics.html - website analytics include
_scripts.html - javascripts at the end of the page
_variables.html - variables file — edit if using just Hammer
block/ - block items — ie header, footer
_footer.html -
_header.html -
element/ - contains individual elements — ie Navigation
_nav.html - example navigation module
head/ - files relevant to <head>
_graph.html - meta tags for social media graph information
_head.html - the meat of <head>
_head.mobile.html - mobile data and tags
_ie.html - Internet Explorer conditional file
utility/ - useful miscellaneous files
_conditional.html - <html> conditionals
_license.html - license, version, creator information
_resources/ - useful templates not used directly in _Geode_
graph-images.psd - template for creating various social media images
splash-icon-sprites.psd - template for creating iOS icons as well as startup images
Style-tile.psd - Photoshop version style tile
style-tile.sketch - Sketch version style tile
.hammer-ignore - tells hammer which files/folders to ignore
404.html - 404 error page — File not found
assets/ - contains all the page assets — CSS, JS, Images
css/ - scss/css files for the project
_extends.scss - scss silent extends
_functions.scss - scss functions
_mixins.scss - scss mixins
libraries/ - libraries used in _Geode_
csswizardry-grids/ - grid library for layout
typecsset/ - baseline grid for typography
style-ie8.scss - ie8 (6 & 7) specific stylesheet
style.scss - _Geode_ main stylesheet
img/ - contains images for _Geode_
js/ - contains javascript/coffescript
console.coffee - coffescript for browsers that don't support console.log()
crossdomain.xml - Crossdomain access rights
favicon.ico - Website favicon — in splash-icon-sprites.psd
Gruntfile.coffee - Grunt build file
humans.txt - Humans.txt credit file
index.html - Home page, show's basic _Geode_ layout
LICENSE.md - _Geode_ license
logo.svg - Website logo as SVG — used for Relogo
package.json - Node/NPM package data — Contains variables for Grunt
privacy.html - Privacy policy page
README.md - This document
robots.txt - Robots follow/nofollow rules
template.txt - document for Hammer template
tos.html - Terms of service page
NOTE: Experimental
_partials > elements > _nav.html demonstrates a simple way of using Hammer variables and classes to namespace a reusable Hammer Include.
the
element was given a class with a defined Hammer Variable including a default.Defining the $elementVariable immediately before adding the Hammer Include, will apply the variable to the element.
<!-- @include nav -->
- Builds as -
<nav class="navigation-element"></nav>
<!-- $elementNavigation classed-nav -->
<!-- @include nav -->
- Builds as -
<nav class="classed-nav"></nav>
Any repeat include elements after the $elementVariable is defined, will continue to use $elementVariable until it is redefined again.
<!-- $elementNavigation header-nav -->
<!-- @include nav -->
<!-- @include nav -->
- Builds as -
<nav class="header-nav"></nav>
<nav class="header-nav"></nav>
<!-- $elementNavigation header-nav -->
<!-- @include nav -->
<!-- $elementNavigation footer-nav -->
<!-- @include nav -->
- Builds as -
<nav class="header-nav"></nav>
<nav class="footer-nav"></nav>
Geode is not under any scheduled development. It remains as a side project of @gregdaynes and as such is only worked on when time or resources permit.
@todo
Geode example icons and startup imagesMore default elementsMore default blocksAdditional SCSS extends, mixing, functions- Styleguide
- Grunt Build tools [production]
- Github page for project
Use Github to report issues and feature requests https://github.com/gregdaynes/Geode/issues
- Style Tiles
- BBC Gel
- vm/vh units
- Progressive JPEG
- Relogo
- Understanding the favicon
- Optimized GA script
- hCard
- tinypng
-
Create template package
zip -r geode-vX.x.x.hammer ./ -x Build* .git .DS_Store