Documenting resources related to front-end style guides and pattern libraries
HTML CSS Other
Latest commit 41945a0 Jan 21, 2017 @maban committed on GitHub Merge pull request #319 from codegaze/improve-contributors-page-perf
Contributors page small perf improvement
Permalink
Failed to load latest commit information.
_includes Remove complexity and uppercase all tags Jan 7, 2017
_layouts Move scripts to their own page Jan 12, 2017
_patterns Add transcript to patterns Jan 22, 2015
_podcast Add episode 12 May 25, 2015
_resourcearticle Add "Pattern Patter" Dec 30, 2016
_resourcebook Add description for Atomic Design Jan 12, 2017
_resourceexample Update philagovpatterns.md Jan 10, 2017
_resourcepodcast Add podcast Dec 30, 2016
_resourcetalk feat: add tags to each section Dec 28, 2016
_resourcetool feat: add tags to each section Dec 28, 2016
_sass Adjust line height of titles Jan 13, 2017
css Add lazyloading of images Dec 30, 2016
images improve navigation UI on small screens Jan 12, 2017
podcast Add episode 12 May 25, 2015
scripts Inject HTML content after loop ends Jan 15, 2017
.gitignore feat: add a Gemfile to the repo Dec 28, 2016
CNAME Update CNAME Nov 18, 2014
Gemfile feat: add a Gemfile to the repo Dec 28, 2016
Gemfile.lock feat: add a Gemfile to the repo Dec 28, 2016
README.md Tidy up Mar 31, 2015
_config.yml Move podcast to podcasts page Dec 30, 2016
add.html Buncha improvements Dec 30, 2016
articles.html Stuff for the thing Dec 30, 2016
books.html Stuff for the thing Dec 30, 2016
contributors.html Stuff for the thing Dec 30, 2016
examples.html Stuff for the thing Dec 30, 2016
favicon.ico Add favicon Nov 18, 2014
feed.xml Add initial files Nov 14, 2014
index.html Stuff for the thing Dec 30, 2016
podcasts.html Stuff for the thing Dec 30, 2016
styleguide.html Get site set up for podcasts Jan 22, 2015
talks.html Stuff for the thing Dec 30, 2016
tools.html Stuff for the thing Dec 30, 2016

README.md

Style Guide Resources

http://styleguides.io/

This site lists lots of useful resources to help you learn about and create your own Front-End Style Guides and Pattern Libraries.

Best of all, you can add your own resources to share with others. And you don’t even need to download any files to do that, you can do it all within GitHub’s web interface.

To do

  • Add screenshots to resources that are examples
  • Additional hover state to resources that doesn’t rely on transform
  • Transfer all the resources from Gimmiebar
  • Set up a domain
  • Set up tags and filters

How to add resources the easy way

The site uses a templating system called Jekyll that generates static HTML files, and makes it easy (hopefully) to add files that share the same template. GitHub plays nicely with Jekyll, and lets you add and edit files using the web interface. So no need to download anything, you can do it straight in repository on GitHub.

First, you’ll need to decide whether your resource is a book, article, tool, podcast, guide, example, or talk.

The only folders you’ll need to worry about are:

  • _resourcearticle
  • _resourcebook
  • _resourceexample
  • _resourcepodcast
  • _resourcetalk
  • _resourcetool

If it’s a tool, open up the _resourcetool folder. In there, you’ll find a README that’ll explain exactly what to do to.

How to add resources the hard way

If you want to get this repo running locally on your machine, you’ll need to get set up with Jekyll.

To install Jekyll, open up your command line and type…

gem install jekyll

…then…

jekyll serve

…to get the server address where the static files are built. You only need to worry about the files in the folders prefixed by _resource, and you can follow the instructions in the README in each folder if you’re not sure what to do.