Apollo by Studio 24
- Sticky footer
- Data tables
- Collapsible sections
- Tabbed sections
Inspiration and ideas:
- Download Apollo.
apollo/folder and the files
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
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)
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.
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.