# Overview

Marfeel's theming and styling system allows customer sites to be personalised to the extreme. Marfeel components follows the Atomic design system (creating atoms, molecules and organisms) to assemble different templates. Both article and section pages are composed of different layouts that can be customized further, if necessary.

The main reasons why Marfeel uses atomic design principles for theming and styling are:

  • Time to First Impression: Styles belonging to a page's critical path are clearly identified, and a page's above-the-fold content loads with only one round trip to the server. This guarantees a great Time to First Impression (TTFI-> resource).
  • Overall performance: All pages respect a CSS size limit, and unused declarations are transparently stripped away. Marfeelized websites lazy load the styles they need to render, and nothing more.
  • Consistent Multi-channel strategy: Declare templates and styles once and they are transparently transpiled to CSS following each platform's specificities, for example respecting AMP's maximum size requirements. Every marfeelized website keeps the same look and feel on all the supported platforms: PWA, AMP, Native applications, Facebook Instant Articles or Apple News.
  • Themeability: The default Marfeel theme can be extended to match specific requirements.

In practice, styling at Marfeel is done through two main extension points:

  • Marfeel Components
  • Layout structure

# Marfeel Components

The Marfeel UI Components are organisms common to all sites and can be customized following our markup extensibility best practices. Changes can be both structural or aesthetic.

Atomic header Atomic footer

# Layout structure

Layouts are organisms composing section pages. You can define which layouts belong to a section and apply further customizations with SCSS.

A collection of layouts can be combined into templates called Content Groups.

Additionally, the structure of the article pages can be customized.

# Atomic design

Marfeel uses Atomic Design System in order to organize, maintain and scale the platform components.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces (icons, text, logos, lists). Can’t be broken down any further and serve as the elemental building blocks of an interface.

Atom icon:

Atomic icon

Atom logo:

Atomic logo

Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. In the following example we have the header-top (formed by the logo and icon atoms) (1) and the navigation molecules (2).

  1. Atomic header top
  2. Atomic navigation

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. In the following case we have the header organism composed by header-top and navigation molecules.

Atomic header

For further information you can read the following article:

# How Marfeel creates a site

The very first step is to create a design prototype of the site made by the Design Team. With this prototype, developers have a source of truth on how the site must be delivered (styles, fonts, layouts, ...)

The following schema shows the parts involved when creating new sites at Marfeel.

Foundation dependencies

# Components overview

At Marfeel we have several components that are grouped in three categories:

  • Global components: this are the common components that live along the app.

    • Header
    • Footer
    • Lateral menu
    • Cookies acceptance
  • Section page components: this are the components related to the section pages.

    • Individual article layouts
    • Content groups
  • Article page components: this are the components related when you open an article.

    • Top media
    • Headers
    • Captions
    • Blockquotes
    • Tags
    • Sharing bar