├── .gitignore
├── Gemfile
├── Gemfile.lock
├── README.md
├── _config.yml
├── _data
└── features.yml
├── _includes
├── footer.html
├── head.html
└── header.html
├── _layouts
├── default.html
├── page.html
└── post.html
├── _posts
└── 2016-08-13-welcome-to-jekyll.markdown
├── css
└── main.scss
├── feed.xml
├── gulpfile.js
├── images
├── auto.svg
├── data.svg
├── deploy.svg
├── design.svg
├── functional.svg
├── heart.svg
└── partial.svg
├── index.html
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .sass-cache
3 | .jekyll-metadata
4 | node_modules
5 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source "https://rubygems.org"
2 |
3 | gem "jekyll"
4 | gem 'jekyll-seo-tag'
5 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | colorator (1.1.0)
5 | ffi (1.9.14)
6 | ffi (1.9.14-java)
7 | forwardable-extended (2.6.0)
8 | jekyll (3.2.1)
9 | colorator (~> 1.0)
10 | jekyll-sass-converter (~> 1.0)
11 | jekyll-watch (~> 1.1)
12 | kramdown (~> 1.3)
13 | liquid (~> 3.0)
14 | mercenary (~> 0.3.3)
15 | pathutil (~> 0.9)
16 | rouge (~> 1.7)
17 | safe_yaml (~> 1.0)
18 | jekyll-sass-converter (1.4.0)
19 | sass (~> 3.4)
20 | jekyll-seo-tag (2.0.0)
21 | jekyll (~> 3.1)
22 | jekyll-watch (1.5.0)
23 | listen (~> 3.0, < 3.1)
24 | kramdown (1.12.0)
25 | liquid (3.0.6)
26 | listen (3.0.8)
27 | rb-fsevent (~> 0.9, >= 0.9.4)
28 | rb-inotify (~> 0.9, >= 0.9.7)
29 | mercenary (0.3.6)
30 | pathutil (0.14.0)
31 | forwardable-extended (~> 2.6)
32 | rb-fsevent (0.9.7)
33 | rb-inotify (0.9.7)
34 | ffi (>= 0.5.0)
35 | rouge (1.11.1)
36 | safe_yaml (1.0.4)
37 | sass (3.4.22)
38 |
39 | PLATFORMS
40 | java
41 | ruby
42 |
43 | DEPENDENCIES
44 | jekyll
45 | jekyll-seo-tag
46 |
47 | BUNDLED WITH
48 | 1.12.5
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jekyons
2 | Stop writing CSS and start building prototypes.
3 |
4 | ## huh?
5 | Jekyons is a starting point you can use to build Very Good prototypes with [Jekyll](http://jekyllrb.com/) (a powerful static site generator) and [Tachyons](http://tachyons.io/) (a life-changing functional CSS library). A few friends asked to check out my prototyping stack so I cleaned it up a little bit and here we are. I've already fumbled around integrating cool stuff like [BrowserSync](https://www.browsersync.io/) (actual magic) and [18F's jekyll-get](https://github.com/18F/jekyll-get) plugin so you don't have to.
6 |
7 | ## why do I care?
8 | GR8 question. Writing CSS is hard. Maintaining CSS across a team of developers and multiple projects is absolutely impossible. That makes prototyping, something that should feel natural in concept, a real bummer in practice. The power of Jekyll templating and the maintainability of Tachyons is the closest I've come to solving that problem.
9 |
10 | Still don't get it? For example, take the list of features on the Jekyons website. Responsive columns, multiple repeating elements in each bucket, images; this could easily amount to over 50 lines of HTML and possibly even more CSS. With Jekyll & Tachyons, I was able to design & build it in ~20 minutes with less than 10 lines of code *total*:
11 |
12 | ```
13 |
14 | {% for feature in site.data.features %}
15 |
16 |
17 |
{{ feature.name }}
18 |
{{ feature.description }}
19 |
20 | {% endfor %}
21 |
22 | ```
23 |
24 | DAMN Y'ALL. If you don't think that's cool you can LEAVE.
25 |
26 | ## ok, how?
27 | ```
28 | git clone https://github.com/tinychime/jekyons.git your-project
29 | cd your-project
30 | npm install
31 | bundle install
32 | jekyll build
33 | gulp
34 | ```
35 |
36 | This is very in alpha, so if you have any trouble with the steps above, [let me know on Twitter](http://www.twitter.com/joshosbrn)!
37 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Site settings
2 | title: Jekyons
3 | version: "v1"
4 | description: "Stop writing CSS and start building prototypes."
5 | baseurl: "" # the subpath of your site, e.g. /blog
6 | url: "" # the base hostname & protocol for your site
7 |
8 | # Tachyons Version
9 | tv: "4.7.0"
10 |
11 | # Build settings
12 | markdown: kramdown
13 |
14 | # Exclude this stuff
15 | exclude: [node_modules, gulpfile.js]
16 |
17 | # Gems
18 | gems:
19 | - jekyll-seo-tag
20 |
--------------------------------------------------------------------------------
/_data/features.yml:
--------------------------------------------------------------------------------
1 | - name: Functional CSS
2 | description: "Front-end code is categorically bad and I think you should write less of it. If you're building websites for a living and still writing CSS all the damn time, welcome 2 the future."
3 | icon: images/functional.svg
4 |
5 | - name: Auto-update
6 | description: "Using a potent combination of magic and node.js, BrowserSync automatically refreshes your browser every time you save. You can even test on multiple devices all at once using an external IP."
7 | icon: images/auto.svg
8 |
9 | - name: Actively Maintained
10 | description: "I use Jekyons every day to create prototypes for profit & pleasure. That means any updates I decide to make in an attempt to make my job easier get passed on to you in the form of new features."
11 | icon: images/heart.svg
12 |
13 | - name: Jekyll Partials
14 | description: "With Jekyll's templating engine, you can share partial sections of code across multiple pages. Make your :( static prototype :( feel like a ~*fancy app*~."
15 | icon: images/partial.svg
16 |
17 | - name: Easy Deployment
18 | description: "Ready to share your creation with the world (or your Mom)? Spin up an outside IP using BrowserSync or deploy to Github Pages to share your work with others"
19 | icon: images/deploy.svg
20 |
--------------------------------------------------------------------------------
/_includes/footer.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {% seo %}
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/_includes/header.html:
--------------------------------------------------------------------------------
1 |
2 | {{ site.title }} {{ site.version }}
3 |
{% if page.author %} • {{ page.author }}{% endif %}
9 |
10 |
11 |
12 | {{ content }}
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/_posts/2016-08-13-welcome-to-jekyll.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Welcome to Jekyll!"
4 | date: 2016-08-13 01:43:32 -0400
5 | categories: jekyll update
6 | ---
7 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
8 |
9 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
10 |
11 | Jekyll also offers powerful support for code snippets:
12 |
13 | {% highlight ruby %}
14 | def print_hi(name)
15 | puts "Hi, #{name}"
16 | end
17 | print_hi('Tom')
18 | #=> prints 'Hi, Tom' to STDOUT.
19 | {% endhighlight %}
20 |
21 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
22 |
23 | [jekyll-docs]: http://jekyllrb.com/docs/home
24 | [jekyll-gh]: https://github.com/jekyll/jekyll
25 | [jekyll-talk]: https://talk.jekyllrb.com/
26 |
--------------------------------------------------------------------------------
/css/main.scss:
--------------------------------------------------------------------------------
1 | ---
2 | # Overwrite Tachyons here. Don't go overboard!
3 | ---
4 |
5 | @import 'https://fonts.googleapis.com/css?family=Roboto:400,700';
6 |
7 | .roboto {
8 | font-family: "Roboto";
9 | letter-spacing: .05em;
10 | }
11 |
12 | .cf {
13 | clear: both;
14 | }
15 |
16 | .cf-4th {
17 | &:nth-child(4n) {
18 | margin-right: 0;
19 | clear: both;
20 | }
21 | }
22 |
23 | .p-fix {
24 | &:nth-child(3n) {
25 | padding-right: 0;
26 | margin-right: 0;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/feed.xml:
--------------------------------------------------------------------------------
1 | ---
2 | layout: null
3 | ---
4 |
5 |
6 |
7 | {{ site.title | xml_escape }}
8 | {{ site.description | xml_escape }}
9 | {{ site.url }}{{ site.baseurl }}/
10 |
11 | {{ site.time | date_to_rfc822 }}
12 | {{ site.time | date_to_rfc822 }}
13 | Jekyll v{{ jekyll.version }}
14 | {% for post in site.posts limit:10 %}
15 |
16 | {{ post.title | xml_escape }}
17 | {{ post.content | xml_escape }}
18 | {{ post.date | date_to_rfc822 }}
19 | {{ post.url | prepend: site.baseurl | prepend: site.url }}
20 | {{ post.url | prepend: site.baseurl | prepend: site.url }}
21 | {% for tag in post.tags %}
22 | {{ tag | xml_escape }}
23 | {% endfor %}
24 | {% for cat in post.categories %}
25 | {{ cat | xml_escape }}
26 | {% endfor %}
27 |
28 | {% endfor %}
29 |
30 |
31 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var shell = require('gulp-shell');
3 | var browserSync = require('browser-sync').create();
4 | var reload = browserSync.reload;
5 |
6 | // Task for building blog when something changed:
7 | gulp.task('build', shell.task(['bundle exec jekyll build --watch']));
8 | // Or if you don't use bundle:
9 | // gulp.task('build', shell.task(['jekyll build --watch']));
10 |
11 | // Task for serving blog with Browsersync
12 | gulp.task('serve', function () {
13 | browserSync.init({server: {baseDir: '_site/'}});
14 | // Reloads page when some of the already built files changed:
15 | gulp.watch('_site/**/*.*').on('change', reload);
16 | });
17 |
18 | gulp.task('default', ['build', 'serve']);
19 |
--------------------------------------------------------------------------------
/images/auto.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/images/data.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/images/deploy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/images/design.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
--------------------------------------------------------------------------------
/images/functional.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/images/heart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
--------------------------------------------------------------------------------
/images/partial.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 |
6 | {% for feature in site.data.features %}
7 |
8 |
9 |
{{ feature.name }}
10 |
{{ feature.description }}
11 |
12 | {% endfor %}
13 |
14 |
15 |
16 |
* This very list of features was created by looping over a .yml file and applying styles from Tachyons.css in less than 10 lines of code. Fork the Jekyons repo and check out the _data directory to see how it works.
17 |