Skip to content

Latest commit

 

History

History
159 lines (114 loc) · 4.06 KB

README.md

File metadata and controls

159 lines (114 loc) · 4.06 KB
Raw

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

  1. Import the font styles into your scss tree:
@import 'petalmd.font';
  1. 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.