SEAFF is a framework built and updated by microapps and contributors, based on the layout of the Shopify merchant admin, as well as its "made by Shopify" embedded applications. It's a free resource to help Shopify Apps Developers easily and quickly write the application's frontend/ui so that it has the same look and feel as the Shopify merchant admin.
All the elements and structures were conceived to be used in a Shopify Embedded Application.
To learn how to use the framework, have examples of use and information about Shopify Embedded Applications, please check the SEAFF documentation page.
Used in our live projects: MoonMail & MONEI
This project includes the files that should be included in your Shopify Embedded App, as well as the documentation of these files. What is important to know is the following:
- seaff.css: the CSS file that does all the magic - This should be THE CSS file to be used by your Shopify Embedded App
- docs.html: the main documentation file, with explanations about embedded apps and how to use the framework as well as examples of use
- full-width-table.html: a single example of one element - since it is better visualized alone in a page
- index.html: a file that organizes the documentation files and mimics the Shopify Merchant Admin interface
- snippets-generator.js: a tricky js used to generate the snippets more easily - you shouldn't use this file for anything, unless you think it will be useful for your project
Just fork the project and make pull requests. Any contribution is kindly appreciated :)