Using the design system
Engineer guidelines
The JDS is a set of tools that comprise how Jobilla behaves as a living product. It includes principles to keep us in line, guidelines that document standardized decisions to keep a uniform product, and reusable elements that represent common entities, utilities, and interfaces that our customers talk to.
How the JDS is organized
- Getting Started: Where you are now.
- Guidelines: Essential basics on colors, typography, and others. However, since the JDS is self-contained, odds are you won't need to tweak a lot of what's in here.
- Foundation: Important elements that might come in handy, whatever you're doing.
- Components: Piecemeal reusable element that can be used in many various places. Buttons, dropdowns, forms.
- Patterns: Reusable elements, or groups of elements, for a specific common purpose. Usually larger and has more behavior attached. Modals, drafting tables, navigators.
- Constructs: Reusable elements that represent a specific business concept. Candidate bubbles, job tiles, avatars.
Using the system
When you need to represent a UI element, an common layout/interaction, or a business concept in the app, look for an appropriate JDS component, pattern, or construct, respectively.
- Props are used to pass configuration and data into elements.
- Events are, in general, fired when users interact with an element.
- Slots accept children elements and content to be shown within context.
Layout
As a rule, individual elements do not manage their layout. They will mange their own contents and structure, but will not position themselves on the page any differently from any other HTML block element.
You can use a Layout pattern, such as JdsPageLayout, to wrap elements and manage their positioning. Refrain from positioning elements manually, such as using CSS, whenever a complementary JDS layout pattern is available. Some elements, particularly specialized constructs, will have their own Layout helper classes designed to manage and display that element.