pusher_chameleon 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (140) hide show
  1. checksums.yaml +7 -0
  2. data/.ruby-version +1 -0
  3. data/Gemfile +3 -0
  4. data/Gemfile.lock +23 -0
  5. data/README.md +8 -0
  6. data/docs/.gitignore +4 -0
  7. data/docs/Gemfile +10 -0
  8. data/docs/Gemfile.lock +72 -0
  9. data/docs/README.md +15 -0
  10. data/docs/Rakefile +40 -0
  11. data/docs/_config.production.yml +18 -0
  12. data/docs/_config.yml +40 -0
  13. data/docs/_includes/footer.html +38 -0
  14. data/docs/_includes/head.html +15 -0
  15. data/docs/_includes/header.html +27 -0
  16. data/docs/_includes/icon-github.html +1 -0
  17. data/docs/_includes/icon-github.svg +3 -0
  18. data/docs/_includes/logo-pusher.svg +4 -0
  19. data/docs/_includes/sidebar.html +33 -0
  20. data/docs/_layouts/default.html +53 -0
  21. data/docs/_layouts/page.html +14 -0
  22. data/docs/_layouts/post.html +15 -0
  23. data/docs/_plugins/chameleon_version.rb +11 -0
  24. data/docs/_plugins/copy_images_directory.rb +22 -0
  25. data/docs/_plugins/ext.rb +2 -0
  26. data/docs/_posts/2016-03-16-getting-started.md +28 -0
  27. data/docs/_posts/2016-03-16-introduction.md +24 -0
  28. data/docs/_posts/2016-03-17-buttons.md +61 -0
  29. data/docs/_posts/2016-03-17-colors.md +139 -0
  30. data/docs/_posts/2016-03-17-flex.md +24 -0
  31. data/docs/_posts/2016-03-17-forms.md +66 -0
  32. data/docs/_posts/2016-03-17-visibility.md +28 -0
  33. data/docs/_posts/2016-04-04-typography.md +111 -0
  34. data/docs/_posts/2016-04-05-syntax-highlighting.md +28 -0
  35. data/docs/_posts/2016-05-08-alerts.md +50 -0
  36. data/docs/_posts/2016-05-12-labels.md +22 -0
  37. data/docs/_posts/2016-05-13-tooltips.md +33 -0
  38. data/docs/_sass/_base.scss +36 -0
  39. data/docs/_sass/_chameleon_imports.scss +20 -0
  40. data/docs/_sass/_layout.scss +136 -0
  41. data/docs/_sass/_typography.scss +41 -0
  42. data/docs/_sass/layout/_aside.scss +151 -0
  43. data/docs/about.md +15 -0
  44. data/docs/autoprefixer.yml +4 -0
  45. data/docs/css/main.scss +11 -0
  46. data/docs/feed.xml +30 -0
  47. data/docs/fonts/Realtime-Text/realtime_text_black.eot +0 -0
  48. data/docs/fonts/Realtime-Text/realtime_text_black.svg +249 -0
  49. data/docs/fonts/Realtime-Text/realtime_text_black.ttf +0 -0
  50. data/docs/fonts/Realtime-Text/realtime_text_black.woff +0 -0
  51. data/docs/fonts/Realtime-Text/realtime_text_black.woff2 +0 -0
  52. data/docs/fonts/Realtime-Text/realtime_text_bold.eot +0 -0
  53. data/docs/fonts/Realtime-Text/realtime_text_bold.svg +249 -0
  54. data/docs/fonts/Realtime-Text/realtime_text_bold.ttf +0 -0
  55. data/docs/fonts/Realtime-Text/realtime_text_bold.woff +0 -0
  56. data/docs/fonts/Realtime-Text/realtime_text_bold.woff2 +0 -0
  57. data/docs/fonts/Realtime-Text/realtime_text_light.eot +0 -0
  58. data/docs/fonts/Realtime-Text/realtime_text_light.svg +249 -0
  59. data/docs/fonts/Realtime-Text/realtime_text_light.ttf +0 -0
  60. data/docs/fonts/Realtime-Text/realtime_text_light.woff +0 -0
  61. data/docs/fonts/Realtime-Text/realtime_text_light.woff2 +0 -0
  62. data/docs/fonts/Realtime-Text/realtime_text_regular.eot +0 -0
  63. data/docs/fonts/Realtime-Text/realtime_text_regular.svg +249 -0
  64. data/docs/fonts/Realtime-Text/realtime_text_regular.ttf +0 -0
  65. data/docs/fonts/Realtime-Text/realtime_text_regular.woff +0 -0
  66. data/docs/fonts/Realtime-Text/realtime_text_regular.woff2 +0 -0
  67. data/docs/fonts/Realtime-Text/realtime_text_semibold.eot +0 -0
  68. data/docs/fonts/Realtime-Text/realtime_text_semibold.svg +249 -0
  69. data/docs/fonts/Realtime-Text/realtime_text_semibold.ttf +0 -0
  70. data/docs/fonts/Realtime-Text/realtime_text_semibold.woff +0 -0
  71. data/docs/fonts/Realtime-Text/realtime_text_semibold.woff2 +0 -0
  72. data/docs/index.html +23 -0
  73. data/images/ui_icons/alert_beta.svg +3 -0
  74. data/images/ui_icons/alert_info.svg +3 -0
  75. data/images/ui_icons/alert_tick.svg +6 -0
  76. data/images/ui_icons/alert_warning.svg +6 -0
  77. data/images/ui_icons/chevron_down.svg +3 -0
  78. data/images/ui_icons/github--active.svg +6 -0
  79. data/images/ui_icons/github.svg +6 -0
  80. data/images/ui_icons/google--active.svg +6 -0
  81. data/images/ui_icons/google.svg +10 -0
  82. data/images/ui_icons/plus.svg +3 -0
  83. data/javascripts/chameleon/code_box.js +14 -0
  84. data/javascripts/chameleon/pusher_featurette.js +52 -0
  85. data/javascripts/chameleon/pusher_text_cycler.js +60 -0
  86. data/lib/pusher_chameleon/engine.rb +13 -0
  87. data/lib/pusher_chameleon/version.rb +8 -0
  88. data/lib/pusher_chameleon.rb +71 -0
  89. data/package.json +24 -0
  90. data/pusher_chameleon.gemspec +21 -0
  91. data/stylesheets/.gitkeep +0 -0
  92. data/stylesheets/_base.scss +400 -0
  93. data/stylesheets/_global.scss +96 -0
  94. data/stylesheets/chameleon.scss +30 -0
  95. data/stylesheets/components/_alert.scss +102 -0
  96. data/stylesheets/components/_code_box.scss +84 -0
  97. data/stylesheets/components/_flex_aligners.scss +38 -0
  98. data/stylesheets/components/_label.scss +41 -0
  99. data/stylesheets/components/_signpost.scss +150 -0
  100. data/stylesheets/components/_spacers.scss +11 -0
  101. data/stylesheets/components/_statistic.scss +62 -0
  102. data/stylesheets/components/_tooltip.scss +65 -0
  103. data/stylesheets/components/_visibility.scss +117 -0
  104. data/stylesheets/forms/_base.scss +47 -0
  105. data/stylesheets/forms/_buttons.scss +242 -0
  106. data/stylesheets/forms/_checkbox.scss +31 -0
  107. data/stylesheets/forms/_field.scss +11 -0
  108. data/stylesheets/forms/_fieldset.scss +18 -0
  109. data/stylesheets/forms/_forms.scss +21 -0
  110. data/stylesheets/forms/_input.scss +14 -0
  111. data/stylesheets/forms/_range.scss +110 -0
  112. data/stylesheets/forms/_select.scss +15 -0
  113. data/stylesheets/forms/_textarea.scss +11 -0
  114. data/stylesheets/grid/_classes.scss +152 -0
  115. data/stylesheets/grid/_column.scss +126 -0
  116. data/stylesheets/grid/_flex-grid.scss +268 -0
  117. data/stylesheets/grid/_grid.scss +60 -0
  118. data/stylesheets/grid/_gutter.scss +34 -0
  119. data/stylesheets/grid/_layout.scss +51 -0
  120. data/stylesheets/grid/_position.scss +73 -0
  121. data/stylesheets/grid/_row.scss +95 -0
  122. data/stylesheets/grid/_size.scss +24 -0
  123. data/stylesheets/typography/_base.scss +60 -0
  124. data/stylesheets/typography/_helpers.scss +66 -0
  125. data/stylesheets/typography/_import.scss +54 -0
  126. data/stylesheets/typography/_syntax_highlighting.scss +168 -0
  127. data/stylesheets/typography/_syntax_highlighting_dark.scss +73 -0
  128. data/stylesheets/typography/_syntax_highlighting_light.scss +73 -0
  129. data/stylesheets/typography/_titles.scss +69 -0
  130. data/stylesheets/typography/_typography.scss +12 -0
  131. data/stylesheets/util/_breakpoint.scss +273 -0
  132. data/stylesheets/util/_color.scss +42 -0
  133. data/stylesheets/util/_flex.scss +68 -0
  134. data/stylesheets/util/_mixins.scss +233 -0
  135. data/stylesheets/util/_selector.scss +40 -0
  136. data/stylesheets/util/_unit.scss +90 -0
  137. data/stylesheets/util/_url_helper.scss +30 -0
  138. data/stylesheets/util/_util.scss +13 -0
  139. data/stylesheets/util/_value.scss +107 -0
  140. metadata +224 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 59ef1724035b6cf0c74bd9eb45f2dfef0cb9dd8a
4
+ data.tar.gz: 2833a53cd191def21c39315c7155599c60733c3b
5
+ SHA512:
6
+ metadata.gz: e8b3a100368f1e7154b00ba7b149fffb28f2b0b45524f95841d48239c4709af97b5ce99ffa8b31e71939ebfabc19a3f1e8fa156670cdd2237a8981fa8d59075f
7
+ data.tar.gz: 469ffa68ba70aa716daec5ace32277acb9d9ea8e3681d0db82953ab9addc64a244736f4c3c99f429dcea0fba3a97ec575a07a3d3438ba943ce6210affe9cc69d
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ 2.2
data/Gemfile ADDED
@@ -0,0 +1,3 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gemspec
data/Gemfile.lock ADDED
@@ -0,0 +1,23 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ pusher_chameleon (0.5.5)
5
+ sass (>= 3.2.0)
6
+
7
+ GEM
8
+ remote: https://rubygems.org/
9
+ specs:
10
+ gem_publisher (1.3.1)
11
+ rake (0.9.2.2)
12
+ sass (3.4.22)
13
+
14
+ PLATFORMS
15
+ ruby
16
+
17
+ DEPENDENCIES
18
+ gem_publisher (= 1.3.1)
19
+ pusher_chameleon!
20
+ rake (= 0.9.2.2)
21
+
22
+ BUNDLED WITH
23
+ 1.11.2
data/README.md ADDED
@@ -0,0 +1,8 @@
1
+ # Pusher Chameleon
2
+
3
+ Chameleon is a library of front-end assets that can be used across Pusher.
4
+
5
+ *Grid and Core taken from Foundation for Sites - Zurb Foundation 2016*
6
+
7
+
8
+ ### [Docs](https://pusher.github.io/chameleon)
data/docs/.gitignore ADDED
@@ -0,0 +1,4 @@
1
+ .sass-cache
2
+ .jekyll-metadata
3
+ _site/
4
+ images/
data/docs/Gemfile ADDED
@@ -0,0 +1,10 @@
1
+ source "https://rubygems.org"
2
+
3
+ gem "jekyll"
4
+
5
+ gem "octopress-autoprefixer"
6
+ gem "facets"
7
+ gem "jekyll-assets"
8
+ gem "kramdown"
9
+ gem "rouge"
10
+ gem "typogruby"
data/docs/Gemfile.lock ADDED
@@ -0,0 +1,72 @@
1
+ GEM
2
+ remote: https://rubygems.org/
3
+ specs:
4
+ addressable (2.3.8)
5
+ autoprefixer-rails (6.3.6.2)
6
+ execjs
7
+ colorator (0.1)
8
+ concurrent-ruby (1.0.1)
9
+ execjs (2.7.0)
10
+ facets (3.0.0)
11
+ fastimage (1.9.0)
12
+ addressable (~> 2.3.5)
13
+ ffi (1.9.10)
14
+ jekyll (3.1.2)
15
+ colorator (~> 0.1)
16
+ jekyll-sass-converter (~> 1.0)
17
+ jekyll-watch (~> 1.1)
18
+ kramdown (~> 1.3)
19
+ liquid (~> 3.0)
20
+ mercenary (~> 0.3.3)
21
+ rouge (~> 1.7)
22
+ safe_yaml (~> 1.0)
23
+ jekyll-assets (2.1.2)
24
+ fastimage (~> 1.8)
25
+ jekyll (~> 3.0)
26
+ sprockets (~> 3.3)
27
+ sprockets-helpers (~> 1.2)
28
+ tilt (~> 2.0)
29
+ jekyll-sass-converter (1.4.0)
30
+ sass (~> 3.4)
31
+ jekyll-watch (1.3.1)
32
+ listen (~> 3.0)
33
+ kramdown (1.10.0)
34
+ liquid (3.0.6)
35
+ listen (3.0.6)
36
+ rb-fsevent (>= 0.9.3)
37
+ rb-inotify (>= 0.9.7)
38
+ mercenary (0.3.5)
39
+ octopress-autoprefixer (2.0.0)
40
+ autoprefixer-rails
41
+ jekyll (~> 3.0)
42
+ rack (1.6.4)
43
+ rb-fsevent (0.9.7)
44
+ rb-inotify (0.9.7)
45
+ ffi (>= 0.5.0)
46
+ rouge (1.10.1)
47
+ rubypants (0.2.0)
48
+ safe_yaml (1.0.4)
49
+ sass (3.4.21)
50
+ sprockets (3.5.2)
51
+ concurrent-ruby (~> 1.0)
52
+ rack (> 1, < 3)
53
+ sprockets-helpers (1.2.1)
54
+ sprockets (>= 2.2)
55
+ tilt (2.0.2)
56
+ typogruby (1.0.18)
57
+ rubypants
58
+
59
+ PLATFORMS
60
+ ruby
61
+
62
+ DEPENDENCIES
63
+ facets
64
+ jekyll
65
+ jekyll-assets
66
+ kramdown
67
+ octopress-autoprefixer
68
+ rouge
69
+ typogruby
70
+
71
+ BUNDLED WITH
72
+ 1.11.2
data/docs/README.md ADDED
@@ -0,0 +1,15 @@
1
+ # Chameleon Docs
2
+
3
+ This repo contains the source and compiled docs for [Chameleon](https://github.com/pusher/chameleon).
4
+
5
+ ## Building
6
+ The site is built on Jekyll, which allows us to host the site on Github Pages. However due to restrictions on external plugins, the site should first be compiled locally, and then pushed on to the `gh-pages` branch.
7
+
8
+ A Rakefile is included which automates this.
9
+
10
+ To build the site, run: `rake site:publish`.
11
+
12
+ This will:
13
+ - Compile the jekyll site
14
+ - Create a new git commit with the new site
15
+ - Push to the live gh-pages branch
data/docs/Rakefile ADDED
@@ -0,0 +1,40 @@
1
+ require "rubygems"
2
+ require "tmpdir"
3
+
4
+ require "jekyll"
5
+
6
+
7
+ # Change your GitHub reponame
8
+ GITHUB_REPONAME = "pusher/chameleon"
9
+
10
+
11
+ namespace :site do
12
+ desc "Generate blog files"
13
+ task :generate do
14
+ Jekyll::Site.new(Jekyll.configuration({
15
+ "source" => ".",
16
+ "destination" => "_site",
17
+ "config" => ["_config.yml","_config.production.yml"]
18
+ })).process
19
+ end
20
+
21
+
22
+ desc "Generate and publish blog to gh-pages"
23
+ task :publish => [:generate] do
24
+ Dir.mktmpdir do |tmp|
25
+ cp_r "_site/.", tmp
26
+
27
+ pwd = Dir.pwd
28
+ Dir.chdir tmp
29
+
30
+ system "git init"
31
+ system "git add ."
32
+ message = "Docs updated at #{Time.now.utc}"
33
+ system "git commit -m #{message.inspect}"
34
+ system "git remote add origin git@github.com:#{GITHUB_REPONAME}.git"
35
+ system "git push origin master:refs/heads/gh-pages --force"
36
+
37
+ Dir.chdir pwd
38
+ end
39
+ end
40
+ end
@@ -0,0 +1,18 @@
1
+ # ==================
2
+ # Environment
3
+ # ==================
4
+ environment: production
5
+
6
+ # ==================
7
+ # Base
8
+ # ==================
9
+ url: "https://pusher.github.io/chameleon"
10
+
11
+ # Build settings
12
+
13
+ assets:
14
+ baseurl: https://pusher.github.io/chameleon/
15
+ cachebust: hard
16
+ debug: false
17
+ css_compressor: sass
18
+ js_compressor: uglifier
data/docs/_config.yml ADDED
@@ -0,0 +1,40 @@
1
+ # ==================
2
+ # Environment
3
+ # ==================
4
+ environment: development
5
+
6
+ # Site settings
7
+ title: Pusher Chameleon
8
+ gitrepo: https://github.com/pusher/chameleon
9
+ version: 0.1.9
10
+
11
+ # Build settings
12
+ markdown: kramdown
13
+
14
+ gems: [jekyll-assets, rouge, autoprefixer-rails, kramdown, octopress-autoprefixer]
15
+
16
+ exclude: [
17
+ "Gemfile",
18
+ "Gemfile.lock",
19
+ "Rakefile"
20
+ ]
21
+
22
+ kramdown:
23
+ input: GFM
24
+ syntax_highlighter: rouge
25
+
26
+ highlighter: rouge
27
+
28
+ kramdown:
29
+ input: GFM
30
+ syntax_highlighter: rouge
31
+ syntax_highlighter_opts:
32
+ css_class: 'highlight'
33
+
34
+ assets:
35
+ baseurl: http://127.0.0.1:4000/
36
+ cache: false
37
+ cachebust: none
38
+ css_compressor: sass
39
+ js_compressor: uglifier
40
+ debug: true
@@ -0,0 +1,38 @@
1
+ <footer class="site-footer">
2
+
3
+ <div class="wrapper">
4
+
5
+ <h2 class="footer-heading">{{ site.title }}</h2>
6
+
7
+ <div class="footer-col-wrapper">
8
+ <div class="footer-col footer-col-1">
9
+ <ul class="contact-list">
10
+ <li>{{ site.title }}</li>
11
+ <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
12
+ </ul>
13
+ </div>
14
+
15
+ <div class="footer-col footer-col-2">
16
+ <ul class="social-media-list">
17
+ {% if site.github_username %}
18
+ <li>
19
+ {% include icon-github.html username=site.github_username %}
20
+ </li>
21
+ {% endif %}
22
+
23
+ {% if site.twitter_username %}
24
+ <li>
25
+ {% include icon-twitter.html username=site.twitter_username %}
26
+ </li>
27
+ {% endif %}
28
+ </ul>
29
+ </div>
30
+
31
+ <div class="footer-col footer-col-3">
32
+ <p>{{ site.description }}</p>
33
+ </div>
34
+ </div>
35
+
36
+ </div>
37
+
38
+ </footer>
@@ -0,0 +1,15 @@
1
+ <head>
2
+ <meta charset="utf-8">
3
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+
6
+ <title>{% if page.title %}{{ page.title | escape }} | Chameleon{% else %}{{ site.title | escape }}{% endif %}</title>
7
+ <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
8
+
9
+ <link rel="stylesheet" href="{{ "css/main.css" | prepend: site.assets.baseurl }}">
10
+ <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
11
+ <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
12
+
13
+ <script src="https://use.typekit.net/mpu7zkn.js"></script>
14
+ <script>try{Typekit.load({ async: true });}catch(e){}</script>
15
+ </head>
@@ -0,0 +1,27 @@
1
+ <header class="site-header">
2
+
3
+ <div class="wrapper">
4
+
5
+ <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
6
+
7
+ <nav class="site-nav">
8
+ <a href="#" class="menu-icon">
9
+ <svg viewBox="0 0 18 15">
10
+ <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
11
+ <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
12
+ <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
13
+ </svg>
14
+ </a>
15
+
16
+ <div class="trigger">
17
+ {% for my_page in site.pages %}
18
+ {% if my_page.title %}
19
+ <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
20
+ {% endif %}
21
+ {% endfor %}
22
+ </div>
23
+ </nav>
24
+
25
+ </div>
26
+
27
+ </header>
@@ -0,0 +1 @@
1
+ <a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 16 16" width="12px" height="12px">
2
+ <path fill="#fff" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <svg aria-hidden="true" class="svg-pusher-logo" width="130" height="50" role="img" version="1.1" viewBox="0 0 120 37">
3
+ <path d="M23.4196429,3.26418269 C19.8125,1.53870192 16.1607143,3.63774038 14.2410714,6.06586538 C13.0714286,7.64903846 12.4196429,10.3084135 12.5089286,14.0884615 C12.2767857,19.4961538 14.7053571,27.4742788 14.7053571,27.4742788 L19.6696429,26.1668269 L16.9553571,33.0242788 L18.1696429,33.8603365 L22.7589286,22.7603365 L18.5446429,23.9254808 C18.5446429,23.9254808 16.3482143,19.1670673 17.1875,12.7365385 C17.5625,8.44951923 19.7589286,6.02139423 21.9196429,6.43942308 C24.1160714,7.08870192 25.0535714,10.7264423 23.0892857,13.4836538 C21.125,16.2319712 17.9375,17.4949519 17.9375,17.4949519 L18.125,19.1759615 C18.125,19.1759615 27.9553571,15.9117788 27.3035714,7.98701923 C27.0714286,6.15480769 25.7142857,4.29591346 23.4196429,3.26418269 L23.4196429,3.26418269 Z M7.97321429,29.1997596 C7.97321429,29.1997596 5.21428571,21.8353365 5.02678571,14.6932692 C4.83928571,12.4074519 4.69642857,5.0875 7.50892857,3.82451923 C8.02678571,2.98846154 8.82142857,2.37475962 8.82142857,2.37475962 C8.82142857,2.37475962 1.70535714,1.81442308 2.08035714,14.8266827 C2.78571429,23.5430288 4.51785714,27.5543269 4.51785714,27.5543269 L0.0714285714,28.7639423 L7.27678571,34.3584135 L7.79464286,33.1487981 L3.91071429,30.3026442 L7.97321429,29.1997596 L7.97321429,29.1997596 Z M14.0982143,28.4971154 C10.4017857,15.7694712 11.1964286,9.33004808 12.9732143,5.50552885 C14.9821429,1.21850962 17.8392857,2.38365385 17.8392857,2.38365385 C17.8392857,2.38365385 18.9642857,1.92115385 20.2232143,1.92115385 C20.3125,1.503125 15.2589286,-2.13461538 10.0178571,2.01009615 C1.63392857,9.28557692 9.08035714,29.7600962 9.08035714,29.7600962 L5.75892857,30.6495192 L14.1875,36.9466346 L18.3571429,27.2963942 L14.0982143,28.4971154 L14.0982143,28.4971154 Z M17.9910714,12.3629808 L17.8035714,13.9995192 C17.8035714,13.9995192 22.4375,11.6247596 21.4553571,7.09759615 C20.9375,7.14206731 19.8125,7.746875 19.6339286,7.93365385 C20.0446429,11.0555288 17.9910714,12.3629808 17.9910714,12.3629808 L17.9910714,12.3629808 Z M116.4375,20.2432697 C118.875,19.407212 119.991072,17.3971158 119.991072,14.8800485 C119.991072,13.2435101 119.473214,11.6158659 118.258929,10.4507216 C116.946429,9.14326969 115.026786,8.91201969 113.294643,8.91201969 L107.491072,8.91201969 L107.491072,27.5632216 L110.205357,27.5632216 L110.205357,18.9358178 L110.25,18.9358178 L116.428572,27.5632216 L119.848214,27.5632216 L114.607143,20.6168274 C115.223214,20.6168274 115.875,20.4745197 116.4375,20.2432697 L116.4375,20.2432697 Z M110.214286,18.5622601 L110.214286,11.429087 L113.116072,11.429087 C115.267857,11.429087 117.285714,12.5497601 117.285714,14.9245197 C117.285714,17.9129812 114.571429,18.5622601 112.133929,18.5622601 L110.214286,18.5622601 L110.214286,18.5622601 Z M94.0625001,27.5632216 L104.125,27.5632216 L104.125,25.0461543 L96.7767859,25.0461543 L96.7767859,19.3983178 L104.125,19.3983178 L104.125,16.8812505 L96.7767859,16.8812505 L96.7767859,11.429087 L104.125,11.429087 L104.125,8.91201969 L94.0625001,8.91201969 L94.0625001,27.5632216 L94.0625001,27.5632216 Z M87.5089287,16.979087 L79.7857144,16.979087 L79.7857144,8.91201969 L77.0714287,8.91201969 L77.0714287,27.5632216 L79.7857144,27.5632216 L79.7857144,19.4516832 L87.5089287,19.4516832 L87.5089287,27.5632216 L90.2232144,27.5632216 L90.2232144,8.91201969 L87.5089287,8.91201969 L87.5089287,16.979087 L87.5089287,16.979087 Z M65.9732144,13.6170678 C65.9732144,12.2651447 67.0982144,11.0555293 68.4553573,11.0555293 C70.0982144,11.0555293 71.0803573,12.1317312 71.0803573,13.7593755 L73.794643,13.7593755 C73.794643,10.5841351 71.544643,8.58293315 68.4553573,8.58293315 C65.5982144,8.58293315 63.2142859,10.7264428 63.2142859,13.6704332 C63.2142859,17.3081735 65.5535716,18.1442312 68.4553573,19.2649043 C70.0000001,19.869712 71.4553573,20.3411062 71.4553573,22.297837 C71.4553573,24.1122601 70.3303573,25.4730774 68.4553573,25.4730774 C66.4910716,25.4730774 65.4107144,23.9343755 65.4107144,22.1110582 L62.6964287,22.1110582 C62.6964287,25.4730774 65.0357144,27.9901447 68.4553573,27.9901447 C71.7767859,27.9901447 74.2142859,25.7043274 74.2142859,22.3512024 C74.2142859,15.2091351 65.9732144,17.5838947 65.9732144,13.6170678 L65.9732144,13.6170678 Z M57.357143,21.4528851 C57.357143,23.6942312 56.1428573,25.419712 53.8035716,25.419712 C51.4642859,25.419712 50.2500001,23.6942312 50.2500001,21.4528851 L50.2500001,8.91201969 L47.5357144,8.91201969 L47.5357144,21.5507216 C47.5357144,23.3651447 48.0535716,25.0906255 49.4553573,26.3536062 C50.6250001,27.4298082 52.2142859,27.9367793 53.8125001,27.9367793 C55.4017859,27.9367793 57.0000001,27.4209139 58.169643,26.3536062 C59.5714287,25.1439908 60.0892859,23.3651447 60.0892859,21.5507216 L60.0892859,8.91201969 L57.3750001,8.91201969 L57.3750001,21.4528851 L57.357143,21.4528851 L57.357143,21.4528851 Z M38.3035716,8.91201969 L32.8750001,8.91201969 L32.8750001,27.5632216 L35.5892859,27.5632216 L35.5892859,20.1987985 L38.2589287,20.1987985 C41.9553573,20.1987985 44.857143,18.5177889 44.857143,14.5598562 C44.9107144,10.5841351 42.0000001,8.91201969 38.3035716,8.91201969 L38.3035716,8.91201969 Z M38.3035716,17.7262024 L35.6339287,17.7262024 L35.6339287,11.429087 L38.3035716,11.429087 C40.3660716,11.429087 42.1875001,12.2651447 42.1875001,14.6043274 C42.1875001,16.9346159 40.3660716,17.7262024 38.3035716,17.7262024 L38.3035716,17.7262024 Z" fill="#dddddd"></path>
4
+ </svg>
@@ -0,0 +1,33 @@
1
+ <div class="docs__logo">
2
+ <div>
3
+ <span class="docs__logo__title">Chameleon</span>
4
+ <a href="{{ site.gitrepo }}" class="docs__logo__version">{% include icon-github.svg %} Version {{ site.data.chameleon_version }}</a>
5
+ </div>
6
+ </div>
7
+ <nav class="docs__nav">
8
+ {% for category in site.categories %}
9
+ {% assign category_title = category | first %}
10
+ {% if page.url contains category_title %}
11
+ <div class="docs__nav__item is-active">
12
+ {% elsif page.url == '/' and forloop.first == true %}
13
+ <div class="docs__nav__item is-active">
14
+ {% else %}
15
+ <div class="docs__nav__item">
16
+ {% endif %}
17
+ <div class="docs__nav__item__title">{{ category | first | capitalize }}</div>
18
+ <div class="docs__nav__item__content">
19
+ <ul>
20
+ {% for posts in category %}
21
+ {% for post in posts %}
22
+ {% if page.url == post.url %}
23
+ <li class="is-active"><a href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></li>
24
+ {% else %}
25
+ <li><a href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></li>
26
+ {% endif %}
27
+ {% endfor %}
28
+ {% endfor %}
29
+ </ul>
30
+ </div>
31
+ </div>
32
+ {% endfor %}
33
+ </nav>
@@ -0,0 +1,53 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ {% include head.html %}
5
+
6
+ <body>
7
+
8
+ <div class="docs">
9
+ <aside class="docs__aside">
10
+ {% include sidebar.html %}
11
+ </aside>
12
+ <main class="docs__content">
13
+ <div class="grid">
14
+ <div class="grid__small-12 grid__medium-10 grid__medium-centered grid__columns">
15
+ {{ content }}
16
+ </div>
17
+ </div>
18
+ </main>
19
+
20
+ <script>
21
+ var navItems = document.getElementsByClassName("docs__nav__item__title");
22
+
23
+ var toggleNav = function(ev) {
24
+ var active_class = document.querySelector(".docs__nav__item.is-active");
25
+
26
+ if (active_class) {
27
+ active_class.classList.remove('is-active');
28
+ if (ev.target.parentNode == active_class) return false
29
+ }
30
+
31
+ ev.target.parentNode.classList.add('is-active');
32
+
33
+ };
34
+
35
+ for (var i = 0, v = navItems.length; i < v; i++) {
36
+ navItems[i].addEventListener('click', toggleNav, false);
37
+ }
38
+ </script>
39
+
40
+ <script>
41
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
42
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
43
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
45
+
46
+ ga('create', 'UA-84735356-1', 'auto');
47
+ ga('send', 'pageview');
48
+
49
+ </script>
50
+ </div>
51
+
52
+ </body>
53
+ </html>
@@ -0,0 +1,14 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post">
5
+
6
+ <header class="post-header">
7
+ <h1 class="post-title">{{ page.title }}</h1>
8
+ </header>
9
+
10
+ <div class="post-content">
11
+ {{ content }}
12
+ </div>
13
+
14
+ </article>
@@ -0,0 +1,15 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post">
5
+
6
+ <header class="post-header">
7
+ <h1>{{ page.title }}</h1>
8
+ <p>{{ page.subtitle }}</p>
9
+ </header>
10
+
11
+ <main class="post-content">
12
+ {{ content }}
13
+ </main>
14
+
15
+ </article>
@@ -0,0 +1,11 @@
1
+ require 'json'
2
+
3
+ module ChameleonVersion
4
+ class Generator < Jekyll::Generator
5
+ def generate(site)
6
+
7
+ site.data['chameleon_version'] = JSON.load(File.open(File.expand_path('../../../package.json', __FILE__)))['version']
8
+
9
+ end
10
+ end
11
+ end
@@ -0,0 +1,22 @@
1
+ require 'fileutils'
2
+
3
+ class MyNewCommand < Jekyll::Command
4
+ class << self
5
+
6
+ # As the docs get precompiled before being sent up to jekyll,
7
+ # and they sit inside Chameleon, the images folder needs to be
8
+ # copied into the docs repo.
9
+ if (!File.directory?('images'))
10
+ FileUtils.cp_r '../images', 'images'
11
+ end
12
+
13
+ def init_with_program(prog)
14
+ prog.command(:build) do |c|
15
+ c.action do
16
+ puts "hello world"
17
+ end
18
+ end
19
+ end
20
+
21
+ end
22
+ end
@@ -0,0 +1,2 @@
1
+ require "jekyll-assets"
2
+ require "autoprefixer-rails"
@@ -0,0 +1,28 @@
1
+ ---
2
+ layout: post
3
+ title: "Getting Started"
4
+ categories: chameleon
5
+ permalink: /chameleon/getting-started
6
+ ---
7
+
8
+ Chameleon is designed to work with most frameworks. If you find a language or framework doesn't seem to be working, feel free to create a pull request.
9
+
10
+ ## Importing with Sass
11
+
12
+ Create a new `chameleon_and_globals.scss` file in your sass directory, and add the following:
13
+
14
+ ```scss
15
+ @import 'chameleon';
16
+ @include CHAMELEON-base;
17
+ ```
18
+
19
+ This will bring in the core chameleon file, and the base styles (reset and box model). However to reduce bloat, not all patterns are included by default. You can now include the relevant mixins required for your project.
20
+
21
+ For example, if you only required the grid, typography, and form patterns:
22
+
23
+ ```scss
24
+ @include CHAMELEON-grid;
25
+ @include CHAMELEON-typography;
26
+ @include CHAMELEON-forms;
27
+ ...
28
+ ```
@@ -0,0 +1,24 @@
1
+ ---
2
+ layout: post
3
+ title: "Overview"
4
+ categories: chameleon
5
+ permalink: /
6
+ ---
7
+
8
+ Chameleon is a library of front-end patterns, variables, and helpers that when used, will Pusherify your UI!
9
+
10
+ It includes our color palettes, typography, and repeated components that are used across our products.
11
+
12
+ ### FAQ
13
+
14
+ *Why would I want to use this?*
15
+
16
+ If you're working on a public facing app or project, then it's important that the visual style is kept consistent. The core aim of this library, is to help you spend less time worrying about what font-size something should be, or what the primary colour is. All of the variables are set, and many repeated patterns are here ready to drop in.
17
+
18
+ *What things are in here?*
19
+
20
+ Firstly, the base Sass variables. These include our colours, our typefaces, our font-weights, and our breakpoints. Certain patterns that are (or are likely to be) repeated across projects can also be found here. For example, buttons, form fields, and labels. There are also a few larger components, however for the most part, these are kept at project level.
21
+
22
+ *Credits*
23
+
24
+ Zurb Foundation for the the grid. Marvel for their colour naming convention.
@@ -0,0 +1,61 @@
1
+ ---
2
+ layout: post
3
+ title: "Buttons"
4
+ subtitle: "We have three main buttons styles: primary, secondary, and tertiary. Ideally, the primary button should only ever be used once on a page as the main call to action."
5
+ categories: components
6
+ permalink: /components/buttons/
7
+ ---
8
+
9
+ <div class="pattern">
10
+ <a class="btn btn--primary">Get Started</a>
11
+ <a class="btn btn--primary ghosted">Get Started</a>
12
+ </div>
13
+
14
+ ``` html
15
+ <a class="btn btn--primary">Get Started</a>
16
+ <a class="btn btn--primary ghosted">Get Started</a>
17
+ ```
18
+
19
+ <div class="pattern pattern--dark">
20
+ <a class="btn btn--secondary">Update</a>
21
+ <a class="btn btn--secondary ghosted">Update</a>
22
+ </div>
23
+
24
+ ``` html
25
+ <a class="btn btn--secondary">Update</a>
26
+ <a class="btn btn--secondary ghosted">Update</a>
27
+ ```
28
+
29
+ <div class="pattern pattern--dark">
30
+ <a class="btn btn--tertiary">View Libraries</a>
31
+ </div>
32
+
33
+ ``` html
34
+ <a class="btn btn--tertiary">View Libraries</a>
35
+ ```
36
+
37
+ ## Small
38
+ There is also a smaller button style. This is mainly used for UI elements, and in tables.
39
+
40
+ <div class="pattern pattern">
41
+ <a class="btn btn--primary btn--small">Copy Snippet</a>
42
+ <a class="btn btn--neutral btn--small">Test</a>
43
+ </div>
44
+
45
+ ``` html
46
+ <a class="btn btn--primary btn--small">Copy Snippet</a>
47
+ <a class="btn btn--neutral btn--small">Test</a>
48
+ ```
49
+
50
+ ## Social Buttons
51
+ These are used for linking social accounts when signing in/registering with Pusher
52
+
53
+ <div class="pattern">
54
+ <button class="btn btn--google">Connect Google Account</button>
55
+ <button class="btn btn--github">Connect GitHub Account</button>
56
+ </div>
57
+
58
+ ``` html
59
+ <button class="btn btn--google">Connect Google Account</button>
60
+ <button class="btn btn--github">Connect GitHub Account</button>
61
+ ```