petalmd.font

This is a scss-powered icon font for our beloved PetalMD application, it has been designed to reduce the pain of rendering vector-based icons by using simple html classes, scss functions and mixins.

Installation

npm install petalmd.font

scss

Import the font styles into your scss tree:

@import 'petalmd.font';

Include the font-face in your application stylesheet:

@font-face {
  font-family: '#{$pf-font-name}';
  src: url('#{$pf-font-path}/#{$pf-font-name}.eot');
  src: url('#{$pf-font-path}/#{$pf-font-name}.eot?#iefix') format('embedded-opentype'),
    url('#{$pf-font-path}/#{$pf-font-name}.woff2') format('woff2'),
    url('#{$pf-font-path}/#{$pf-font-name}.woff') format('woff'),
    url('#{$pf-font-path}/#{$pf-font-name}.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

By default the scss file is providing the entire toolkit, If you want a granular control on the imports, no problem, you can still include them on a per-feature basis:

@import 'petalmd.font/core';
@import 'petalmd.font/mixins';
@import 'petalmd.font/larger';
@import 'petalmd.font/stacked';
@import 'petalmd.font/flipped';
@import 'petalmd.font/rotated';

Note: if you're using libsass you may want to include the font scss using the includePaths option:

includePaths: ['node_modules/petalmd.font/scss/']

.eot, .ttf, .woff and .woff2 fonts

The font files are availables into the node_modules/petalmd.font/fonts/ directory, you just need to refer them into your favorite asset pipeline.

Configuration

Please look at scss/petalmd.font/_settings.scss file.

Usage

Mixins & functions

The same goal can be achieved by using the icon-element mixin:

a.download + i {
  @include icon-element;

  &:before {
    content: icon('download');
  }
}

Hacking on the font

I want to add a new icon to the font

Adding a file to the icons folder will do the job, the icon file must be a .svg file. Please note that your file name will be used as a reference for the generated class name.

If you're using Adobe Illustrator, please save your file as SVG with the following settings:

SVG Profiles: SVG 1.1
Fonts Type: SVG
Fonts Subsetting: None
Options Image Location: Embed
Advanced Options
- CSS Properties: Presentation Attributes
- Decimal Places: 2
- Encoding: UTF-8
- Output fewer elements: check

Leave the rest unchecked.

I want to build the font on my computer

First, clone this repository then install dependencies:

npm install

You must also install ttfautohint@1.5:

brew install ttfautohint

Then download version 1.5 from here. Place the 1.5 folder in your ttfautohint folder and run :

brew switch ttfautohint 1.5

This project is extensively using gulp for generating the font, let's install & run it:

npm install -g gulp

gulp

I want to add a new icon to Petalweb

First of all, you have to read the previous paragraph and install gulp before going further
Then, go in petalmd.font/icons folder and copy/paste your new icons
Add your new icons in /scss/petalmd-font/_glyphs.scss
Upgrade the version of the package.json file (example: ~~1.0.6~~ -> 1.0.7)
Run the svgo task to optimize your new icons

gulp svgo

Run the font task

gulp font

Commit and push your new files
Run npm login

npm login

(Visit the Petal documentation repo to find identification information)

Run npm publish

npm publish

Last thing, open the petalmd web app and update the petalmd-font version in package.json with the new one. (example: 1.0.7)

That's it, have fun!

License

Apache 2 license for code and assets, please see LICENSE file.

petalmd/petalmd.font