Getting Started with Fancy Etch
Get up and running with Fancy Etch in just a few minutes. The only requirement is a compatible CSS framework to provide the underlying design tokens — either Fancy Framework, our free native option, or ACSS (Automatic.css), a popular premium alternative. Pick whichever suits your workflow, and you're ready to go.
Copy and paste
Once you're logged into your account, head to the templates list, pick the one you need, and paste it straight into the Etch editor. For this to work, your site must be served over HTTPS with a valid SSL certificate, and you'll need to allow clipboard permissions in your browser the first time you paste.
@keyframes animations in Etch
Etch uses SCSS/Sass internally, which means @keyframes animations cannot be written directly in the class editor. They must be added through the Style Manager, under the Stylesheets tab.
Open the Style Manager
In the left sidebar, click the Style Manager icon. This opens the manager with four tabs: Selectors, Variables, Stylesheets, and Custom Media Definitions.
Go to the Stylesheets tab
Click the Stylesheets tab. You'll see a list of the project's existing stylesheets (Main, Fancy, wave section, Ribik, etc.).
Create a new stylesheet
At the bottom of the list, click Add Stylesheet. Give it a descriptive name related to the component or layout the animation belongs to.
Paste your @keyframes
In the code editor on the right, paste your animation.
Tip: create one stylesheet per component or layout. This keeps the project organized and makes it easy to find and update specific animations later.
Custom Media Definitions
Fancy Etch uses a set of custom media definitions to handle responsive design and ensure visual consistency across all layouts and components.
@custom-media --fe-2col (inline-size >= 560px);
@custom-media --fe-3col (inline-size >= 840px);
@custom-media --fe-4col (inline-size >= 1120px);
@custom-media --fe-5col (inline-size >= 1400px);
@custom-media --fe-landscape (inline-size >= 478px);
@custom-media --fe-tablet (inline-size >= 767px);
@custom-media --fe-desktop (inline-size >= 991px);
@custom-media --fe-below-tablet (inline-size < 767px);
@custom-media --fe-nav-mobile (min-width: 901px);
Tip: when you paste a layout or component, its required media definitions are imported automatically. However, it's a good idea to copy all definitions upfront and paste them into the Custom Media Definitions tab — this lets you manage and adjust all breakpoints globally from the start, in one place.
Component styles
To avoid cluttering the component panel with too many options, you can find the component styles in the variables of the component's main class.