Apollo by Studio 24
Layouts
Patterns
- Sticky footer
- Data tables
- Forms
- Quotes
- Icons
- Breadcrumbs
- Cards
- Pagination
- Collapsible sections
- Tabbed sections
Inspiration and ideas:
Getting started
- Download Apollo.
- Copy
apollo/folder and the files.babelrc,.nvmrc,package.jsonto the root of your project - To build files run
nvm use && npm install && npm run build
Please note this is currently a beta release and the installation process will be refined before the final v2.0
Overview
The thinking here is drawn from the Springer Nature Front End Playbook approach. That is to say:
- Serve core CSS styles to all browsers for an accessible experience (perhaps not the most exciting, but it works)
- Use a CSS media query to cut the mustard and serve advanced CSS styles to modern browsers (plus IE10/11)
- Load JavaScript according to whether the advanced CSS styles have been applied to the site
We believe this is in the best interests of all web users, and takes into account issues of performance for older browsers by giving them just what they need to make content accessible for users. We infer that users of older browsers may well have a device with less processing power, and so we simplify. We can progressively enhance the experience for users who are privileged to have access to more capable browsers and devices.
Points to bear in mind
There are some design patterns we have tended to follow in recent projects at Studio 24. These are:
- Limiting the content width to 90% of the viewport on small screens.
- Reducing this width to 80% of the viewport on tablet screens.
- Setting a max-width for content at 1300px
- Allowing certain elements to extend beyond these restrictions to fill the browser width (e.g. feature photography, full-width video)
It is worth bearing these points in mind for our base styles. For example, they will provide a nice margin on either side of text on smaller screens, keeping the text away from the very edges.
Support
The Apollo CSS framework is maintained by Studio 24. If you’ve got any questions please get in touch. You can also review the Apollo GitHub repo, where you can submit bug reports or suggestions for improvements.