Components necessary to build the site

[wibjorn]

As we continue to mature the Atlas site, we'll need a series of components in order to display things as we'd like. Let's kick off that discussion.

Here's is a list collected by @v-mingho as part of task-378407, along with a few additions of my own. I've included links to the old docs style guide when available and a brief description.

• .nav-bar - provides the top navigation bar.
• .container - a utility class to provide constrained widths.
• .column - A pretty standard 12 column grid.
• .hero - A full width background, accepting image and video backgrounds.
• .title/.subtitle/.supertitle - Helps render headings and groups of headings.
• .content - Helps markdown render efficiently.
• code blocks - We'd want to create a new component for this, even if that component looks exactly like it does on Docs.
• layout - while we do not current have this, we could greatly simply our site layout code by using css-grid. Should we create a new component to do that?

Which of these should we take? Can we take them as-is (without appearance changes)? Do we need to give them some care before we do this? It should we separate components into component specific discussions?

[brianeckmann]

Here are some others can come to mind. I'd love to touch up every component's CSS if we can. This site is our design & engineering showcase so it's important it's polished at or above the level we'd ship externally

• tabs if we are going to separate design + implementation views for components
• or we'll need a show code component depending on the above
• left-hand navigation to navigate our L2 list
• TOC, pretty much what exists on Docs today
• footer, will be super minimal
• we'll have images/svg's on the site, early or eventually so we probably need sizing support

[wibjorn]

Of those mentioned here, I think we can categorize some of these as short term vs longer term needs:

Short

• Some sort of left-hand navigation
• Some sort of thing to showcase how things look. ("or we'll need a show code component depending on the above")
• Side navigation (this is called toc in the current docs world).

Longer

• Tabs
• In this article / headings from content "TOC, pretty much what exists on Docs today"

Question

we'll have images/svg's on the site, early or eventually so we probably need sizing support

Any more detail to provide here? For reference, .image

[brianeckmann]

I think the .image class(es) you shared should be all we need.

Should we identify the short-term components we need from DocsUI so I can do some touchup and get them into the design?

[wibjorn]

@brianeckmann I'd love to see us (for the next month or two) attack the following categories of things:

• the things we need to structure and build a basic website (this thread)
• the foundational components that we would want to adopt shortly after the first category.

To me, image falls into the latter of these two categories. Same with buttons. That said, these would be among the first that we'd want to do after the site laid out well.