{"id":20825823,"url":"https://github.com/upstatement/generator-style-guide-twig","last_synced_at":"2025-09-05T16:33:39.542Z","repository":{"id":57248970,"uuid":"26904639","full_name":"Upstatement/generator-style-guide-twig","owner":"Upstatement","description":"Yeoman Generator to quickly scaffold the Upstatement Style Guide for Twig/Timber","archived":false,"fork":false,"pushed_at":"2014-12-02T18:54:16.000Z","size":276,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-07T20:35:24.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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-20T09:15:33.000Z","updated_at":"2024-01-25T23:38:35.000Z","dependencies_parsed_at":"2022-08-24T16:22:28.662Z","dependency_job_id":null,"html_url":"https://github.com/Upstatement/generator-style-guide-twig","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fgenerator-style-guide-twig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fgenerator-style-guide-twig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fgenerator-style-guide-twig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fgenerator-style-guide-twig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Upstatement","download_url":"https://codeload.github.com/Upstatement/generator-style-guide-twig/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954114,"owners_count":21830892,"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:06:53.636Z","updated_at":"2025-05-07T20:35:40.133Z","avatar_url":"https://github.com/Upstatement.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Yeoman: Upstatement Style Guide\n==========================\n\n[Yeoman Generator](http://yeoman.io) to quickly scaffold the [Upstatement Style Guide Template](https://github.com/Upstatement/style-guide-twig) for Twig/Timber\n\n## Setup\n\nGo to the Terminal, we'll be doing everything from there. If you run into errors, it might be a permissions problem. To fix, try running the same command again and with `sudo` in front (i.e. - `sudo original command`). \n\n#### Make sure dependencies are installed\n* Most Upstatement folks already have Node, NPM and Bower installed. If you don’t, skip to the dependencies section at the bottom and come back. \n\n* Not everyone has Yeoman. To check if you do, run `yo -v`. If you need to install it, run the following: \n```bash\nnpm install -g yo\n```\n\n#### Import the Style Guide Generator:\n```bash\nnpm install -g generator-style-guide-twig\n```\n#### Install the Style Guide in your project\nNavigate to your WordPress project’s theme folder. This is where you’ll install the Style Guide. Initiate the generator:\n```bash\nyo style-guide-twig\n```\nFollow the prompts and you'll have a shiny new Style Guide sitting in your project, ready to customize! \n\n#### Render the Style Guide in WordPress\nThe WordPress database needs to know these pages exist in order to render them, so you need to go the WP Admin \u003e Pages and add new pages. They 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_Style Guide_\n![Style Guide](http://i.imgur.com/1gHvvfS.jpg)\n\n_Style Guide Source_\n![Style Guide Source](http://i.imgur.com/XM2tVRY.jpg)\n\n#### Run Compass\nNavigate to the newly created `style-guide` directory in your theme and run `compass watch`.       \n\nAaaaaand that’s it! You’re all set up and ready to customize your style guide.\n\n## Customize Your Style Guide\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 Own 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## Dependencies\n* **Node** - [Install](http://nodejs.org/)\n* **NPM** - [Install](https://www.npmjs.org/package/npm-install)\n* **Yeoman** - [Install](http://yeoman.io) \n* **Bower** - [Install](http://bower.io/#install-bower)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fgenerator-style-guide-twig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fupstatement%2Fgenerator-style-guide-twig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fgenerator-style-guide-twig/lists"}