A collection of accessible, modern front-end components.
Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.
The purpose of Frend is to offer ready-to-use components for projects. These also provide specifics on how they’ve utilised ARIA attributes and event bindings, based on global recommendations, in order to make them more predictable and usable for all.
The goal is to work on these components collaboratively. This allows us to share our implementation experiences, approaches to supporting different environments, and any bugs we’ve come across along the way.
CSS included with each component is purely functional. We include the relevant selectors in our stylesheets, but what you do within them is entirely up to you. We favour a BEM syntax when defining selectors, however these are all configurable in the component options if you’d like to use a different convention.
Styling hooks are added to the component when it’s initialised, so we have the ability to apply styles to their static state, before we style them in their fully-functioning state.
import into your existing project where and when they are needed. If this doesn’t suit your workflow, we also transpile modules to ES5 and bundle them using UMD, so they can be compiled using module loaders, or directly in the browser via a
<script> tag. You can find these files in the
dist directory of each component.
A simple API is exposed for each component instance, which usually contains
destroy() methods. More information about invoking components and any additional methods can be found on each of their respective pages.
Our thanks go to BrowserStack for providing us with an open-source account.
Frend is powered by Jekyll and served directly from the frend/frend.co Github repository thanks to Github Pages. If you’re cloning the repo, running the site locally will first require installation of Jekyll gems:
gem install jekyll gem install jekyll-redirect-from jekyll serve
Automated builds for component script files are handled by running Gulp’s watch task as you develop:
npm install gulp watch
Please refer to our contributing guidelines.