Documentation
Everything you need to create a website with Nausikaä can be found in the documentation. It starts with the Foundations: how to add Nausikaä to a page, theming, accessibility and responsive design. After that come four categories: Elements contains the standard HTML elements. Components are small groups of elements, that together fulfill one function. Collections are larger groups of components and/or elements, that make up commonly used website patterns (like image galleries and navbars). Finally, Utilities are the more complicated components, requiring React to work correctly.
All documented items contain a description, samples and example HTML code. If you find anything missing or wrong, please let me know.
Foundations
The Foundations explain how Nausikaä works as a whole: how to add it to a page, how the light and dark themes and the colors work, and what Nausikaä does for accessibility and different screen sizes.
-
Getting startedAdd Nausikaä to a page and learn the principles behind it.
-
ThemingLight, dark and e-ink themes, the color palette, and how to adjust colors and sizes.
-
AccessibilityWhat Nausikaä takes care of, what is up to you, and its known limitations.
-
Responsive designHow layouts and components adapt to phones, tablets and large screens.
Elements
The majority of elements in Hypertext Markup Language (HTML) are covered in the Elements section. These are the building blocks of every website, with no to little CSS classes to be learned. All basic tags like <a>, <ul>, <table> and <img> are covered. As well as <form> tags like <input>, <select> and <textarea>.
Newer form controls from the HTML5 spec are covered too: <meter>, <input type="range"> and <input type="color">. If you have any requests, please let me know!
-
TypographyInclude global settings, headings, body text, inline elements, lists, blocquotes and more.
-
LinksArguably the most important element on the internet. Where would we go without it?
-
ButtonsThe button indicates a possible user action, meant to look and behave as an interative element
-
Input fieldsA place to write down your dreams and hopes. Or just sign up for that ole newsletter.
-
Checkboxes & RadiosAllows a user to select a value from a small set of options, often binary
-
ImagesEmbed graphic representations of cats, among other things.
-
TablesInformation presented in a two-dimensional table comprised of rows and columns of cells
-
Progress barsIndicators showing the completion of a task, and meters for measurements within a range.
Components
Components are made up of multiple Elements and together fulfill a simple function. They enrich the user experience and provide builders with greater flexibility. Nausikaä has a small set of Components commonly found on the internet. Some CSS classes come in to play here. Javascript is not required.
-
BreadcrumbsIndicate the users current location within a navigational hierarchy. Watch out for houses made of candy.
-
ContainersSimple boxes for complicated stuff. When you don't know where to put it, put it in a container.
-
DialogsA classic modal overlay, in which you can include any content you want. Also known as popup.
-
DropdownsToggle contextual overlays for displaying lists of links and more. When you can't give everything at once.
-
NotificationsProvide contextual feedback messages for typical user actions.
-
PaginationA way for users to navigate paginated content.
-
PanelsA composable panel, for compact controls.
-
SpinnersA turning circle for the moments your visitor has to wait.
-
TabsA row of links to switch between the views of one subject.
-
TagsSmall tag labels to insert anywhere.
Collections
Collections are patterns commonly found on websites, made up of multiple Elements and Components. The number of Collections in Nausikaä is small, but hopefully more will be developed in the future.
-
ArticlesA self-contained composition which is intended to be independently distributable or reusable.
-
NavbarA responsive horizontal navbar that can support a menu, links, buttons, and dropdowns.
-
GalleryCollections of images displayed on a grid or as a slideshow
-
FormsAllows a user to enter data, using a combination of checkboxes, radio buttons, or text and select fields
-
ProductsAn article or substance that is manufactured or refined for sale.
-
ChartsKey figures, bars, columns, donuts and lines, drawn with lists and inline SVG.
-
SidebarA column next to the content that turns into a slide-in panel on small screens.
-
Site overviewA heading, an explanation and a grid of links with icons, as a landing page for a section.
-
UsersAvatars for people and groups, and a suggestion list to pick them from.
-
Code exampleA block of source code to copy, ready for syntax highlighting.
Utilities
Utilities are small, single-purpose components that provide additional functionality to a website. They are often used in combination with other elements, components, or collections to enhance the user experience. React is required to make use of Utilities in Nausikaä.