Web Fundamentals
Web Fundamentals is a technical documentation center for multi-device web development. Our goal is to build a resource for modern web developers that’s as curated and thorough as developer.android.com or iOS Dev Center.
Content plan
Content plan for Web Fundamentals is tracked through GitHub Issues and our Site Structure + Content Inventory doc
Release status
The project was soft launched in late April with a formal v1 launch in June 2014. We've now moved to a six-week rolling release cycle.
Technology
This is a Jekyll build.
/src
/appengine - the server to host the static content
/site - the documentation
/getting-started - the getting started articles
/multi-device-layouts - responsive design guide
/introduction-to-media - the guide to using media
/optimizing-performance - the perf articles
/using-touch - managing touch
/showcase - the case-studies
/build
is never checked in but generated by Jekyll.
Installing Dependencies
Mac
- Install XCode Command Line Tools
- Install RVM
curl -sSL https://get.rvm.io | bash
- Set RVM Default to 2.0.0
rvm install ruby-2.0.0-p451
rvm --default use 2.0.0
- Install Pygments
easy_install pygments
- Install RubyGems dependencies (Jekyll, Kramdown and Sass)
- cd src/ &&
bundle install
- cd src/ &&
- Install Node.js
- Install the Grunt CLI
npm install -g grunt-cli
Using project-level meta data
The table of contents is generated from src/site/_project.yaml
To parse the _project.yaml
file, include {% injectdata content _project.yaml %}
in the page. You then have access to the variables in the page object.
Generating Table of Contents
The table of contents is generated from src/site/_book.yaml
To parse the _book.yaml
file, include {% injectdata content _book.yaml %}
in the page and then iterate as follows:
{% for section in page.content.toc %}
SOME MARKUP
{% endfor %}
Jekyll Special elements
- Code import:
{% highlight javascript %} {% include sample1.js %} {% endhighlight %}
{{ articles _category_}}
a list of articles in divs, ordered by the "order" preamble.{{ showcases _category_}}
a list of showcases.