VFF - Vendasta Frontend Framework
===============
Provides reusible components for building Vendasta web pages. This project has been superceded by
[FrontEndCentral](http://www.github.com/vendasta/FrontEndCentral). However, some projects still exclusively use VFF and
it is still updated regularly.
The reference page for this framework is available at http://cdnstyles.com/styles/
---
#### Tips and Tricks
##### Adding New Icons (Fonts)
There are four **font files** in the ``` src/static/fonts ``` directory which house VFF's icons. These are:
- platform_icons.eot
- platform_icons.svg
- platform_icons.ttf
- platform_icons.woff
These files are created via http://icomoon.io and are generally provided by someone from the design team. If you
receive files having different names (``` Vendasta.svg ```, for example) simply rename them to ``` platform_icons ```
and replace the old files in VFF.
Once you have added the new **font files** to VFF, you will need to update ``` app.views.style_guide.IconHandler ``` to
be able to identify them.
To accomplish this, open up the ``` platform_icons.svg ``` file and take note of the glyph ``` unicode ``` values.
##### Example:
```xml
```
Notice that there are a couple of "ranges" of unicode values: **000-004**, **600-603**, and **800-802**
There are a couple of constants in ``` IconHandler ``` which will be set to these ranges. For this example, they would
be:
```python
ICON_NUMBER_RANGE_V1_START = 0
ICON_NUMBER_RANGE_V1_END = 4
ICON_NUMBER_RANGE_V2_START = 600
ICON_NUMBER_RANGE_V2_END = 603
ICON_NUMBER_RANGE_V3_START = 800
ICON_NUMBER_RANGE_V3_END = 802
```
Additionally, you will need to add the new icon classes to both ``` src/templates/style_guide/components/icons.html ```
and ``` src/static/sass/partials/_icons.scss ``` in order for them to show up on the ``` cdnstyles.com/styles/ ``` page.
Remember to run compass compile after updating ``` _icons.scss ```
#### Adding New FEC Icons
The FEC Icons in VFF are generated in the same way as the icons in FrontEndCentral, but are actually their own set of
icons that are hosted in VFF and allow VFF projects to display FEC-like icons.
There are a few steps that you need to do in order to add an icon:
Copy and paste the new svg(s) into src/static/icons.
Ensure that the names of the files are all lower-case separated by hyphens (these will be used to name your icon class).
Add the icon to src/templates/style_guide/fec_icons.html in the same way that the other icons are. (This displays the icon in the documentation at /styles/fec-icons/).
Run gulp generate_icons
Run gulp compile to recompile the css.
Your icons should now be added properly; however, there are a few validation steps:
Ensure that src/static/sass/fec-icons.scss has created the icon class and variable.
Go to localhost:8087/styles/fec-icons/ and ensure your new icons (and the existing icons) are displaying correctly.
Note: Be sure to add the generated eot/svg/ttf/wof files in src/static/fonts/fec to your commit