{"id":20825883,"url":"https://github.com/upstatement/style-guide-twig","last_synced_at":"2025-12-11T20:42:40.053Z","repository":{"id":23402196,"uuid":"26764306","full_name":"Upstatement/style-guide-twig","owner":"Upstatement","description":"Style Guide Template for Twig/Timber","archived":false,"fork":false,"pushed_at":"2017-11-01T19:14:28.000Z","size":32,"stargazers_count":29,"open_issues_count":1,"forks_count":2,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-01-18T17:48:31.766Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Upstatement.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-17T15:56:58.000Z","updated_at":"2020-04-18T11:27:36.000Z","dependencies_parsed_at":"2022-08-21T23:10:43.705Z","dependency_job_id":null,"html_url":"https://github.com/Upstatement/style-guide-twig","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fstyle-guide-twig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fstyle-guide-twig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fstyle-guide-twig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fstyle-guide-twig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Upstatement","download_url":"https://codeload.github.com/Upstatement/style-guide-twig/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243173170,"owners_count":20248055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T23:07:02.008Z","updated_at":"2025-12-11T20:42:39.999Z","avatar_url":"https://github.com/Upstatement.png","language":"HTML","readme":"# Upstatement Style Guide\n#### Template for Twig/Timber\n\n### What Is This?\nA style guide starter theme that helps display typography, objects, and other design patterns. It’s templated using Twig \u0026 Timber for easy inclusion in our WordPress projects. \n\nThe Style Guide is designed for easy use by our clients. It lets the designer **name components** and **write notes** about when to use them. It gives the client **code snips** that make it easy to copy, paste, and replicate our work.\n\nCheck out this [live example](http://harvardlawreview.org/style-guide/) of the Style Guide in action for [The Harvard Law Review](http://harvardlawreview.org/style-guide/). \n\n### How Does it Work?\n\nThis package ships with some standard patterns (buttons, text styles, section headers, etc.) to help you get started. But nothing is set in stone. Delete anything you don’t want, replace anything the needs changing, and add custom components for your project. \n\n### Installation\n\n1. **Get the Style Guide** Download the zip file for this repo\n2. **Add To Your Project** Place the folder in top level of your theme, this will be something like `wp-content/themes/[your theme name]` \n3. **Install Dependencies** Navigate to the folder in terminal. Run `bower install`\n4. **Process CSS** Navigate to the folder in terminal. Run `compass watch`\n5. **Render the Style Guide** WordPress needs to know the Style Guide exists in order to render it. You’ll need to point WP to the two twig templates that show the Style Guide, `page-style-guide.twig` and `page-style-guide-source.twig`. These can be found at the top level of this repository. To do this, you have to take two steps. \n\n\t* First, **move the `page-style-guide.twig` and `page-style-guide-source.twig` files** to a directory where WordPress will find the `page-` prefix and render pages. This is commonly a folder named `views` or `templates` and probably contains several other pages with the same prefix.\n\n\t* Second, **create the pages in the WordPress Pages menu**. The pages should be named Style Guide and Style Guide Source. It’s important that their permalinks exactly match the name of the files between the `page-` prefix and `.twig` suffix. Here’s what it should look like …\n\n\t_Style Guide_\n\t![Style Guide](http://i.imgur.com/1gHvvfS.jpg)\n\n\t_Style Guide Source_\n\t![Style Guide Source](http://i.imgur.com/XM2tVRY.jpg)\n\n\n### How To Use\n\nAfter you’ve installed and confirmed that WordPress is rendering the Style Guide, you’ll want to customize it. Here’s how.\n\n#### Naming \nFirst, you’ll want to personalize your new Style Guide with the project name. Do this via the `client` variable on line 3 of `style-guide.twig`.   \n\n```twig\n{% set client = ‘Your Client Name’ %}\n```\n\nYou’ll also want to set a relative path so all the base style guide components (CSS, JS, etc.) will link correctly. You can do this all from the `path` variable on line 4 of `style-guide.twig`\n\n```twig\n{% set path = '/wp-content/themes/your_theme’ %}\n```\n\n#### Add Custom Code\nAdd the appropriate Fonts, CSS, JS, etc. for your project. You’ll do this in the file named `page-style-guide-source.twig`.\n\nUse the `header_scripts` and `footer_scripts` blocks to add your custom elements and have them load at the top or bottom of the page, respectively. \n\n```twig\n{% block header_scripts %}\n   {# Your Fonts, CSS, JS, etc. go here #}\n{% endblock header_scripts %}\n\n{% block footer_scripts %}\n   {# Your Fonts, CSS, JS, etc. go here #}\n{% endblock footer_scripts %}\n```  \n\n#### Add Your Elements\nYou’ll want to augment the Style Guide with your own HTML components — typography, teases, buttons, etc. Do this in file named `page-style-guide-source.twig`.\n\n**Basic Style Example**\nThe template accepts raw HTML as well as [Twig includes](http://twig.sensiolabs.org/doc/tags/include.html). In the most basic template, you can simply name your component and add the appropriate HTML.\n\n```twig\n{#\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\nHeadlines\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\n#}\n{% embed style_mod\n   with { title:'Headlines' } %}\n\n  {% block markup %}\n    \u003ch1 class=\"h1\"\u003eHeadline Level 1\u003c/h1\u003e\n    \u003ch2 class=\"h2\"\u003eHeadline Level 2\u003c/h2\u003e\n\t\t\u003ch3 class=\"h3\"\u003eHeadline Level 3\u003c/h3\u003e\n\t{% endblock markup %}\n\n{% endembed %}\n```  \n\n**Adding Descriptions**\nYou can also add a description of the component and give advice for when to use it in the design using the `descriptions` variable.\n\n```twig\n{#\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\nSection Headers\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\n#}\n{% embed style_mod\n\t with { title:'Section Headers' } %}\n\n  {% set descriptions = [\n     'Describes the contents of a section (for instance, Must Reads)',\n\t\t 'Fancy h3 should be used sparingly'\n\t\t]\n  %}\n\n  {% block markup %}\n\t  \u003ch1 class=\"section-h1\"\u003e\u003ci class=\"section-txt\"\u003eSection h1\u003c/i\u003e\u003c/h1\u003e\n\t  \u003ch2 class=\"section-h2\"\u003eSection h2\u003c/h2\u003e\n\t  \u003ch3 class=\"section-h3\"\u003eSection h3\u003c/h3\u003e\n\t  \u003ch4 class=\"section-h4\"\u003eSection h4\u003c/h4\u003e\n\t{% endblock markup %}\n\n{% endembed %}\n```\n\n**Adding Custom Classes**\nEach style mod receives a unique class to help you style overrides when necessary. You can also add your own custom class to the `style-mod` container that wraps your HTML via the `class` variable, passed using the `with` directive on the style_mod embed. Here’s an example in use.\n\n```twig\n{#\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\nArticle Pullquote\n~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~\n#}\n{% embed style_mod\n   with { title:'Article Pullquote',\n          class: 'no-dropcap’\n} %}\n\n  {% block markup %}\n    \u003cdiv class=\"article-txt\"\u003e\n      \u003cp class=\"pullquote\"\u003eAssume that no search for this weapon was underway; our best guess is that even \u003cem\u003eSherlock Holmes\u003c/em\u003e never would have found it in the absence of the confession.\u003c/p\u003e\n      \u003c/div\u003e \u003c!-- /article-txt --\u003e\n  {% endblock markup %}\n\n{% endembed %}    \n```\n\n#### Overrides\nSometimes when you add project HTML, you’ll want to customize certain design attributes for the Style Guide alone. Make any necessary overrides in `sass/style-guide-overrides.scss`\n\n\n\n### Dependencies\n* **NPM** - [Install NPM](https://www.npmjs.org/package/npm-install)\n* **Bower** - [Install Bower](http://bower.io/#install-bower)\n* **Compass** - [Install Compass](http://compass-style.org/install/) \n\n### What’s Included?\n\nThe files and what each one does.\n\n* **Style Guide** *style-guide.twig*        \nBase template. Set client name here.\n\n* **Style Guide Source** *page-style-guide-source.twig*       \n Contains This is where you’ll do most of your work. \n\n* **Style Guide Container** *page-style-guide.twig*       \nThere should be no need to touch this file. \n\n \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fstyle-guide-twig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fupstatement%2Fstyle-guide-twig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fstyle-guide-twig/lists"}