-
Notifications
You must be signed in to change notification settings - Fork 827
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #89 from primer/octicons-v4
Creating a grunt build system for octicons v4.0.0
- Loading branch information
Showing
541 changed files
with
3,855 additions
and
1,749 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| .* | ||
| node_modules | ||
| .DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .github | ||
| .travis.yml | ||
| Gruntfile.js | ||
| script | ||
| lib/*.sketch |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| language: node_js | ||
| node_js: | ||
| - '5' | ||
|
|
||
| deploy: | ||
| - provider: npm | ||
| email: ${NPM_EMAIL} | ||
| api_key: ${NPM_API_KEY} | ||
| - provider: rubygems | ||
| api_key: ${RUBYGEMS_API_KEY} | ||
| skip_cleanup: true | ||
| on: | ||
| branch: master | ||
| repo: ${TRAVIS_REPO_SLUG} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| module.exports = function(grunt) { | ||
|
|
||
| grunt.initConfig({ | ||
|
|
||
| pkg: grunt.file.readJSON('package.json'), | ||
|
|
||
| sass: { | ||
| options: { | ||
| }, | ||
| dist: { | ||
| files: { | ||
| 'build/octicons.css': 'index.scss' | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| postcss: { | ||
| options: { | ||
| processors: [ | ||
| require('autoprefixer')({ browsers: '> 5%' }) | ||
| ] | ||
| }, | ||
| build: { | ||
| src: 'build/**/*.*css' | ||
| } | ||
| }, | ||
|
|
||
| cssnano: { | ||
| options: { | ||
| sourcemap: true | ||
| }, | ||
| dist: { | ||
| files: { | ||
| 'build/octicons.min.css': 'build/octicons.css', | ||
| 'build/font/octicons.min.css': 'build/font/octicons.css' | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| svgmin: { | ||
| dist: { | ||
| options: { | ||
| plugins: [ | ||
| {removeTitle: true}, | ||
| {removeStyleElement: true}, | ||
| {removeAttrs: { attrs: ['id', 'class', 'data-name', 'fill', 'fill-rule'] }}, | ||
| {removeEmptyContainers: true}, | ||
| {sortAttrs: true}, | ||
| {removeUselessDefs: true}, | ||
| {removeEmptyText: true}, | ||
| {removeEditorsNSData: true}, | ||
| {removeEmptyAttrs: true}, | ||
| {removeHiddenElems: true} | ||
| ] | ||
| }, | ||
| files: [{ | ||
| expand: true, | ||
| cwd: 'lib/svg', | ||
| src: ['*.svg'], | ||
| dest: 'build/svg' | ||
| }] | ||
| } | ||
| }, | ||
|
|
||
| svg_sprite: { | ||
| octicons: { | ||
| expand: true, | ||
| cwd: 'lib/svg', | ||
| src: ['*.svg'], | ||
| dest: 'build/', | ||
| options: { | ||
| mode: { | ||
| symbol: { | ||
| dest: "", | ||
| sprite: "sprite.octicons.svg" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| webfont: { | ||
| options: { | ||
| font: "octicons", | ||
| fontFamilyName: "Octicons", | ||
| types: 'eot,woff,woff2,ttf,svg', | ||
| fontHeight: 96, | ||
| normalize: false, | ||
| ascent: 84, | ||
| descent: 12, | ||
| htmlDemo: false, | ||
| codepointsFile: 'lib/font/codepoints.json', | ||
| templateOptions: { | ||
| baseClass: 'octicon', | ||
| classPrefix: 'octicon-', | ||
| mixinPrefix: 'octicon-', | ||
| fontFamilyName: "Octicons" | ||
| } | ||
| }, | ||
| octicons_css: { | ||
| src: 'lib/svg/*.svg', | ||
| dest: 'build/font', | ||
| options: { | ||
| template: 'lib/font/template.css' | ||
| } | ||
| }, | ||
| octicons_scss: { | ||
| src: 'lib/svg/*.svg', | ||
| dest: 'build/font', | ||
| options: { | ||
| stylesheet: 'scss', | ||
| template: 'lib/font/template.scss' | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| clean: { | ||
| font: [ | ||
| 'build/font/*' | ||
| ], | ||
| svg: [ | ||
| 'build/svg/*', | ||
| 'build/sprite.octicons.svg', | ||
| 'build/octicons.*' | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| grunt.loadNpmTasks('grunt-contrib-clean'); | ||
| grunt.loadNpmTasks('grunt-postcss'); | ||
| grunt.loadNpmTasks('grunt-svg-sprite'); | ||
| grunt.loadNpmTasks('grunt-webfont'); | ||
| grunt.loadNpmTasks('grunt-svgmin'); | ||
| grunt.loadNpmTasks('grunt-cssnano'); | ||
| grunt.loadNpmTasks('grunt-sass'); | ||
|
|
||
| // build tasks | ||
| grunt.registerTask('css', ['sass', 'postcss', 'cssnano']); | ||
| grunt.registerTask('font', ['clean:font', 'webfont']); | ||
| grunt.registerTask('svg', ['clean:svg', 'svgmin', 'svg_sprite']); | ||
|
|
||
| // default task, build /dist/ | ||
| grunt.registerTask('default', [ 'svg', 'font', 'css']); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,138 +1,41 @@ | ||
| # Octicons! | ||
| # GitHub Octicons | ||
|
|
||
| This is the [Bower][bower] package for [GitHub Octicons][octicons]. | ||
| [](https://www.npmjs.org/package/octicons) | ||
| [](https://travis-ci.org/primer/octicons) | ||
|
|
||
| ## Add Octicons to your project | ||
| > Octicons are a scalable set of icons handcrafted with <3 by GitHub. | ||
| 1. Create a new file called *bower.json* (if you don't have one already). | ||
| ## Install | ||
|
|
||
| 2. Add a new line for the Octicon dependency, pointing to the correct repository: | ||
|
|
||
| ``` json | ||
| { | ||
| "name": "my_great_project", | ||
| "dependencies": { | ||
| "octicons": "*" | ||
| } | ||
| } | ||
| ``` | ||
| #### NPM | ||
|
|
||
| 3. Run `bower install`. The Octicons styles will be downloaded to *bower_components/octicons*. | ||
|
|
||
| 4. Link to the `octicons.css` stylesheet in the `<head>` of your `<html>` page: | ||
|
|
||
| ``` html | ||
| <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css"> | ||
| ``` | ||
|
|
||
| 4. Simply use an icon in your HTML page: | ||
|
|
||
| ``` html | ||
| <span class="octicon octicon-microscope"></span> | ||
| ``` | ||
|
|
||
| ### Rails' asset pipeline | ||
|
|
||
| Octicons includes a stylesheet specifically for [Rails 4/Sprockets][sprockets]. | ||
|
|
||
| 1. Create a new file called *vendor/assets/bower.json* (if you don't have one already). | ||
|
|
||
| 2. Add a new line for the Octicon dependency, pointing to the correct repository: | ||
|
|
||
| ``` json | ||
| { | ||
| "name": "my_great_project", | ||
| "dependencies": { | ||
| "octicons": "*" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 3. `cd` into `vendor/assets` and run `bower install`. The Octicons styles will be downloaded to *vendor/assets/bower_components/octicons*. | ||
|
|
||
| 4. Open your config/application.rb, and add this line inside your Application: | ||
|
|
||
| ``` ruby | ||
| config.assets.precompile += %w(*.svg *.eot *.woff *.ttf) | ||
| ``` | ||
|
|
||
| 5. In your application stylesheet, require `sprockets-octicons`: | ||
|
|
||
| ``` css | ||
| /* | ||
| = require sprockets-octicons | ||
| */ | ||
| ``` | ||
|
|
||
| 6. Simply use an icon in your HTML page: | ||
|
|
||
| ``` html | ||
| <span class="octicon octicon-flame"></span> | ||
| ``` | ||
|
|
||
| 7. If you want a view helper, add something like this to *app/helpers/application_helper.rb*: | ||
|
|
||
| ``` ruby | ||
| def octicon(code) | ||
| content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}" | ||
| end | ||
| ``` | ||
|
|
||
| ## Installing locally | ||
|
|
||
| It's easy to install octicons locally if you have [Homebrew](http://brew.sh/) installed. Simply run the following commands: | ||
| This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `octicons` with this command. | ||
|
|
||
| ``` | ||
| brew install caskroom/cask/brew-cask | ||
| brew tap "caskroom/fonts" | ||
| brew cask install "font-octicons" | ||
| $ npm install --save octicons | ||
| ``` | ||
|
|
||
| ## Best practices | ||
| - Octicons look best in sizes that are multiples of 16px. You can update the size using the `font-size` CSS property. For example: | ||
| ## Usage | ||
|
|
||
| ``` css | ||
| .octicon { | ||
| font-size: 32px; | ||
| } | ||
| ``` | ||
| The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this. | ||
|
|
||
| - Octicons are not monospaced. This lets them work well next to type, but it means they won’t stack nicely by default. If you intend to stack octicons, such as in navigation, you will want to add some CSS to make them the same width, and centered. For example: | ||
|
|
||
| ``` css | ||
| .navigation .octicon { | ||
| width: 16px; | ||
| text-align: center; | ||
| } | ||
| ``` | ||
|
|
||
| ### Resources | ||
|
|
||
| - [octicons.github.com](http://octicons.github.com/) - the Octicons website | ||
| - Read why [icon fonts are awesome](http://css-tricks.com/examples/IconFont/) | ||
| - How to compose your [HTML for icon font usage](http://css-tricks.com/html-for-icon-font-usage/) | ||
| - [sketch-octicons](https://github.com/JuanitoFatas/sketch-octicons) - Octicons icons as Sketch Symbols | ||
|
|
||
| ## Why can't I see the characters in Font Book?? | ||
|
|
||
| Give this a try, you should be all set: | ||
|
|
||
|  | ||
| ```scss | ||
| @import "octicons/index.scss"; | ||
| ``` | ||
|
|
||
| ## FAQ | ||
| ## Documentation | ||
|
|
||
| Check out [issues with the FAQ label](https://github.com/github/octicons/issues?q=is%3Aclosed+is%3Aissue+label%3AFAQ). | ||
|
|
||
| ## Versions | ||
|
|
||
| Octicons operates similarly to [Semver](http://semver.org/) with the following version convention: | ||
| ## License | ||
|
|
||
| - Major: Breaking changes — removed icons, markup changes, unicode switches, css renames, icon redesigns | ||
| - Minor: Non-breaking changes — new icons, new aliases, minor icon changes | ||
| - Patch: Unnoticeable tweaks — slight visual changes, package updates | ||
| _Code License:_ [MIT](./LICENSE) © [GitHub](https://github.com/) | ||
|
|
||
| _Font License:_ [SIL OFL 1.1](./LICENSE) © [GitHub](https://github.com/) | ||
|
|
||
| [octicons]: http://octicons.github.com | ||
| [bower]: http://bower.io/ | ||
| [sprockets]: http://guides.rubyonrails.org/asset_pipeline.html | ||
| [primer]: https://github.com/primer/primer | ||
| [docs]: http://primercss.io/ | ||
| [npm]: https://www.npmjs.com/ | ||
| [install-npm]: https://docs.npmjs.com/getting-started/installing-node | ||
| [sass]: http://sass-lang.com/ |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.