{"id":21890867,"url":"https://github.com/chantastic/frontend-guide","last_synced_at":"2026-01-05T00:10:01.547Z","repository":{"id":141974437,"uuid":"57317712","full_name":"chantastic/frontend-guide","owner":"chantastic","description":"A Guide to PCO Frontend Tools","archived":false,"fork":false,"pushed_at":"2016-06-24T09:16:23.000Z","size":3,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-02T22:29:24.880Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/chantastic.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-28T16:29:32.000Z","updated_at":"2019-06-25T14:26:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"c8103208-fb16-4556-af3a-b1e9525b3bfa","html_url":"https://github.com/chantastic/frontend-guide","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/chantastic%2Ffrontend-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Ffrontend-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Ffrontend-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Ffrontend-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/frontend-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"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-28T12:17:42.321Z","updated_at":"2026-01-05T00:10:01.517Z","avatar_url":"https://github.com/chantastic.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Guide\nA Guide to PCO Frontend Tools and Techniques\n\n1. [Interfaces](#interfaces)\n1. [InterfacesIcons](#interfacesicons)\n1. [minions.css](#minionscss)\n1. [Rails SJR](#rails-sjr)\n1. [Turbolinks](#turbolinks)\n\n## Interfaces\n\u003e Interfaces is a small collection of UI elements shared between all PCO apps. Consider it a starting point, not an absolute solution.\n\n### Things you should know:\n\n#### The Topbar lives in Interfaces\nTopbar is one of the few responsibilities of Interfaces. All the smarts about app and user switching happens in Interfaces.\n\n#### Interfaces is a starting point\nDon't feel weird about \"outgrowing\" Interfaces. It's a starting point. In versions to come, improving extensibility is the foremost concern.\n\n#### UI doesn't get developed in Interfaces\nDeveloping in a shared/versioned/changelogged space is painful. Avoid the pain by developing and testing new UI app-side. After it's proven to be useful and stable, PR it into Interfaces.\n\n### References\n* Docs: [http://pco-interfaces.herokuapp.com](http://pco-interfaces.herokuapp.com/interfaces)  \n* Repo: [https://github.com/ministrycentered/interfaces](../ministrycentered/interfaces/ministrycentered/interfaces)\n\n## InterfacesIcons\n\u003e InterfacesIcons provides shared icons to PCO apps. SVG icons are made available in Rails and React variants.\n\n### Things you should know:\n\n#### Not all apps are on it yet\nAt the time of writing only People and Check-Ins use InterfacesIcons. And Check-Ins is on an old pre-SVG version.\n\n#### It's a WIP\nIf you find parts of it painful, let [me](../chantastic) know.\n\n#### Eventually all icons will live here\nSVGs are more accessible than icon-fonts. Once we've worked out the kinks, this will be the single repository for Planning Center icons.\n\n### References\n* Available Icons: [http://pco-interfaces.herokuapp.com/interfaces_icons](http://pco-interfaces.herokuapp.com/interfaces_icons)  \n* Repo/Docs: [https://github.com/ministrycentered/interfaces_icons](../ministrycentered/interfaces_icons)\n\n## minions.css\n\u003e Minions are a large collection of responsive-capable utility classes. They serve to eliminate the proliferation of BEM modifiers and necessary nudges. It's literally so much jargon, who knows what it means?\n\n### Things you should know:\n\n#### Load order matters\nminions classes need to be **last** in your CSS manifest. They only have a specificity of `0,0,1,0`. So, write your styles carefully.\n\n#### Utility classes are a great alternative to \"modifiers\"\nIf you've used BEM for a while, you know modifiers are where the entire system gets crufty. Reach for minions before creating new modifiers.\n\n#### Best-practices are TBD\nUtility classes are a relatively new addition to our frontend toolset. So, it's possible to over use them. Know that we don't have any tools yet to provide data about commonly used collections of used utility-classes.\n\n### Resources\n* minions.css (source): [https://github.com/chantastic/minions.css](../chantastic/minions.css)  \n* minions_rails (Rails asset gem): [https://github.com/chantastic/minions_rails](../chantastic/minions_rails)  \n\n## Rails SJR\n\u003e Server-generated JavaScript Responses are a technique we make heavy use of in our Rails apps. It should be the first-line of defense in adding interactivity to a Rails page.\n\n### Resources\n\n* Example: [https://signalvnoise.com/posts/3697-server-generated-javascript-responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses)\n\n### react-rails\n\n* Repo: [https://github.com/reactjs/react-rails](../reactjs/react-rails)\n\n## Turbolinks\n\u003e Turbolinks makes following links in your web application faster. Instead of forcing the browser to recompile the JavaScript and CSS between each page, it keeps the current page instance alive and replaces only the body (or parts of) and the title in the head.\n\n### Things you should know:\n\n#### We use 2 versions of Turbolinks\n* [Turbolinks Classic](../turbolinks/turbolinks-classic) is used in most of our apps.\n* [Turbolinks (v5)](../turbolinks/turbolinks) is used in apps that have been migrated to Rails 5 (or are in that process).\n\nMake sure you're viewing documentation for the Turbolinks version loaded in your app. These versions are **very** different.\n\n#### Turbolinks affects jQuery and React\n* [Running jQuery initializer functions in **Turbolinks Classic**](../turbolinks/turbolinks#running-javascript-when-a-page-loads)\n* [Running jQuery initializer functions in **Turbolinks v5**](../turbolinks/turbolinks#running-javascript-when-a-page-loads)\n* [Mounting/unmounting React Components using the `react_component` helper](../reactjs/react-rails#rendering--mounting)\n\n### References\n* Turbolinks Classic: [https://github.com/turbolinks/turbolinks-classic](../turbolinks/turbolinks-classic)\n* Turbolinks (v5+): [https://github.com/turbolinks/turbolinks](../turbolinks/turbolinks)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Ffrontend-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Ffrontend-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Ffrontend-guide/lists"}