View Source Doggo

Hex

Illustration of a happy Shiba Inu dog wearing a traditional Japanese kimono. The dog is centered within a circular frame, adorned with decorative patterns that include waves and stripes, indicative of a Japanese aesthetic. The Shiba Inu is smiling with its tongue out, suggesting a cheerful and playful demeanor. The kimono features bold red and white accents, complementing the dog's tan and white fur.

Collection of unstyled Phoenix components with semantic CSS classes.

Installation

The package can be installed by adding doggo to your list of dependencies in mix.exs:

def deps do
  [
    {:doggo, "~> 0.1.5"}
  ]
end

Gettext

To allow Doggo to translate certain strings such as form field errors with Gettext, set your Gettext module in config/config.exs:

config :doggo, gettext: MyApp.Gettext

Storybook

The library is equipped with story modules for Phoenix Storybook. After you followed the installation instructions of Phoenix Storybook, you can configure a storybook module for Doggo in your application as follows:

defmodule MyAppWeb.Storybook.Doggo do
  use PhoenixStorybook,
    otp_app: :my_app_web,
    content_path: Path.join(:code.priv_dir(:doggo), "/storybook"),
    title: "Doggo Storybook",
    css_path: "/assets/storybook.css",
    js_path: "/assets/storybook.js",
    sandbox_class: "my-app-web"
end

The important option here is content_path, which points to the storybook directory in the priv folder of Doggo. Adjust the rest of the option to the needs of your application.

In your router, add the Doggo storybook as a second storybook and change the path of your application storybook to avoid path conflicts.

scope "/", MyAppWeb do
  pipe_through :browser

  live_storybook("/storybook/app", backend_module: MyAppWeb.Storybook)

  live_storybook("/storybook/doggo",
    backend_module: MyAppWeb.Storybook.Doggo,
    session_name: :live_storybook_doggo,
    pipeline: false
  )
end

Design decisions

  • Favor semantic HTML elements over CSS classes for structure and clarity.
  • Adhere to accessibility guidelines with appropriate ARIA attributes and roles.
  • Utilize semantic HTML and ARIA attributes for style bindings to states, rather than relying on CSS classes.
  • Where state or variations can not be expressed semantically, use modifier classes named .is-* or .has-*.
  • Provide a base CSS class for each component to support unstyled or alternatively styled variations of the same HTML elements.
  • The library is designed without default styles and does not prefer any particular CSS framework.

Status

The library is actively developed. Being in its early stages, the library may still undergo significant changes, potentially leading to breaking changes.