Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

CSS class and naming conventions reference

Reference for Foxy's CSS class, ID, and data attribute conventions, BEM naming, and responsive breakpoints used in custom templates.

Class and ID conventions

Convention

Purpose

.fc-* classes

Styling only. Not required for functionality.

#fc-* IDs

Styling, used sparingly for CSS namespacing. Not recommended for JavaScript selectors.

data-fc-* attributes

Functional purposes and template rendering. Use these for JavaScript selectors instead of IDs.

Form input conventions

  • name attributes on inputs, selects, and other form elements use underscores and cannot be changed without breaking server-side functionality.

  • id values on form inputs match their name values and are not prefixed with fc-, since labels are tied to inputs by id.

  • Select inputs in JavaScript using name and value, not id.

BEM naming

Classes follow the BEM (Block, Element, Modifier) methodology:

block--element__modifier

Blocks can be chained together:

block--block--element__modifier

Most elements can be styled with the #fc namespace selector plus at most two class names.

Specific IDs and data attributes

Attribute

Description

#fc

Namespaces CSS for the default theme. May be on the html element (full-page templates) or a container div (embedded templates).

data-fc-container="cart"

The cart renders (via Twig.js) inside this element.

data-fc-container-for="…"

—

data-fc-messaging-for="…"

—

data-fc-error-for="…"

—

data-fc-id="…"

Tags a specific DOM element for access via code.

data-fc-container-id="…"

When a data-fc-id element triggers an action (removing a coupon, changing quantity, removing an item), the corresponding element is acted on.

Responsive breakpoints

@media (max-width: 480px) { }
@media (min-width: 768px) { }
@media (min-width: 768px) and (max-width: 991px) { }
@media (min-width: 992px) { }
@media (min-width: 992px) and (max-width: 1199px) { }
@media (min-width: 1200px) { }

These match the breakpoints used in Foxy’s default templates.

Underlying framework

The default theme is built on Bootstrap 3, compiled with a custom #fc namespace and applied via Sass’s @extend functionality — so no Bootstrap class names appear in the rendered HTML. A partial called _fc-to-bootstrap.scss maps Bootstrap classes onto Foxy’s own classes; if you’re building off the default responsive theme, this file shows which grid classes are applied to which elements for responsiveness. This dependency isn’t guaranteed to be permanent — future updates may remove Bootstrap for a lighter CSS approach.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.