@boxy-design/elm

Boxy for Elm 0.19: a sharp-edged, zero-radius design system. Hairline structure, a disciplined neutral palette, and square everything.

Generated, not hand-ported. This package is emitted from the same component spec as the Boxy stylesheet and is tested against 826 conformance cases, so the markup it renders is identical to the design system's. How that works.

Install

npm install @boxy-design/elm

Setup

• Add the package's src to source-directories in elm.json (npm install) or elm install avestura/boxy-design.
• Link boxy.css + boxy-components.css from your HTML, and put Boxy.IconSprite.view once in the view.
• Include boxy-htmx.js (from @boxy-design/htmx) if you want focus trapping and an inert page for modals.
• Load @boxy-design/elm/boxy-behaviors.js with a plain <script> so menus, tooltips, combobox, calendar, kanban and dialogs respond; it picks up what Elm renders.

Example

import Boxy.Button as Button
import Boxy.Field as Field
import Boxy.Input as Input

view model =
    Field.view "svc" [ Field.label "Service name" ] [] (\f -> [ Input.view [ Input.field f ] [] ])
    -- and: Button.view [ Button.primary ] [ onClick Deploy ] [ text "Deploy" ]

Notes

• One module per component, an options list for variants: Button.view [ Button.primary, Button.sm ] attrs children.
• Elm has no context, so Field and Tabs hand their wiring to their children explicitly.
• Also published to the Elm registry as avestura/boxy-design (elm install avestura/boxy-design) when the release mirror is configured.
• Use the className option instead of Html.Attributes.class on the root, which would replace the component's classes.

What is included

Icon, Button, ButtonGroup, Label, Field, Input, Textarea, Select, Choice, Checkbox, Radio, Toggle, Tag, Callout, Card, CardHead, CardBody, CardFoot, TableWrap, Table, Th, Td, Spinner, Tabs, TabList, Tab, TabPanel, Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter, Modal, Stack, Cluster, Grid, AutoGrid, Split, Collapse, Container, Rail, Section, GridBackground, DotBackground, Ticks, LabelText, Mono, Num, ScreenReaderText, Kbd, Mark, Code, Caret, Prose, Quote, Cite, List, OrderedList, ListItem, DescriptionList, Status, Skeleton, Empty, EmptyGlyph, Progress, ProgressRow, Meter, MeterCell, StepBar, StepBarCell, Avatar, AvatarGroup, Timeline, TimelineItem, TimelineTime, TimelineTitle, TimelineBody, Breadcrumb, BreadcrumbMore, Tree, TreeHeading, TreeLink, TreeSummary, TreeCount, Toc, TocLink, Accordion, AccordionNumber, AccordionBody, CodeBlock, CodeBlockHead, CodeBlockSpacer, CodeBlockButton, CodeBlockFoot, CodeLines, CodeLine, Token, Banner, Chart, ChartLegend, ChartKey, ChartTip, Dropzone, DropzoneGlyph, UploadList, UploadItem, UploadType, UploadName, UploadMeta, Sparkline, UptimeStrip, HelpText, SearchField, DateField, Slider, SliderScale, SliderTicks, Stepper, Segmented, Swatch, SwatchButton, ColorPicker, PickerField, PickerHue, PickerRow, PickerSwatches, PickerContrast, Combo, ComboToggle, Listbox, ListboxGroup, ListboxEmpty, ListboxOption, OptionMeta, MultiSelect, MultiInput, MultiClear, Calendar, RangeCalendar, CalendarFoot, RangePicker, RangePresets, Menu, MenuEntry, MenuItem, MenuLink, MenuItemCheckbox, MenuItemRadio, MenuIcon, MenuHint, MenuLabel, MenuSeparator, MenuHeader, MenuFooter, Popover, PopoverHead, PopoverBody, PopoverFoot, FloatingPanel, DrawerPanel, DrawerHead, DrawerBody, DrawerFoot, Drawer, ToastStack, Toast, ToastBody, Tooltip, PaletteSearch, PaletteList, PaletteGroup, PaletteLink, PaletteAction, PaletteMeta, PaletteEmpty, PaletteFoot, TagRemove, Thread, Message, MessageWho, MessageMeta, MessageBody, MessageActions, Thought, ThoughtBody, ToolList, Tool, ToolStatus, ToolName, ToolArgs, ToolDuration, ToolBody, ToolSummary, Approval, ApprovalHead, ApprovalBody, ApprovalFoot, Composer, ComposerFiles, ComposerBar, Kanban, KanbanColumn, KanbanHead, KanbanCount, KanbanList, KanbanSlot, KanbanCard, KanbanCardTitle, KanbanCardMeta, KanbanPriority, Panes, Pane, PaneHead, Resizer, BellButton, BellCount, Inbox, InboxHead, InboxTabs, InboxList, InboxDay, InboxFoot, Note, NoteIcon, NoteText, NoteActions, NoteTime, DataGrid, DataGridBar.

More components are added to the spec and arrive in every package at once. Until then, build the rest from the stylesheet classes the same way the docs do: Boxy component reference.

Versioning

Every @boxy-design/* package and the boxy-design CLI share one version number, and a release publishes them together. Keep them on the same version.

Links

Docs · Source · Other frameworks · MIT