This framework provides the UI foundation layer for any UBIO-style app.
Demo https://ubio.github.io/css/
In order to make UBIO apps visually consistent, we extract core styles responsible for the colour scheme and typography into a single CSS file, so it can be used as a base layer for any project.
This is a living project, that evolves as we go.
We keep it simple, scalable and flexible. This doesn't include a grid framework and icons, it's up to a particular project to take care of its layout and choose icons. For prototyping purposes we recommend https://fontawesome.com/icons
.block__element--modifier
http://getbem.com/introduction/.block-name__element-name--modifier-name
.block--modifier .block__element
are allowedvariables.css
– by overriding this one can customize core UI components to specific project needsthemes
- currently only contains default and the "night-dark" themesreset.css
– unifies browser-specific HTML stylesbase.css
– a tiny layer that styles up semantic HTML tagscomponents/
- this folder contains a set of core UI styles, each UI component is described in a separate CSS file, the component name matches the file name. Examples: button.css, input.css, e.t.c.helpers/
- this folder contains a set of CSS class helpers: utility classes, colour, background helpers.print.css
- a base layer for the print stylesheetTo consider: CDN vs. serve statically (e.g. GH Pages) vs. inlining in applications
--aspect--modifier
font-size
, font-family
, border-radius
) or can be custom (color-brand-red
)--control-height
--gap--small
--border-radius
--border-radius--active
--control-height
--control-height--small
Typography
section defines base and monospace font families. We prefer Libre Franklin font.Gaps
section provides a small set of fixed gaps that help with building consistent negative space: margins and paddings (as this spacing is independent of a particular element's font-size – elements appear better aligned together)Base
components such as font sizes & control heights, border colour and radius – this helps align UI elements together as they either fit into small/regular/large size grid or are fully responsive and adjust to any scale. Feel free to amend base font-size or override small/large font/control sizes with hardcoded pixel values if responsibility is not what you're looking for.CTA colours
- are responsible for default and accent colouring of "calls to action" (such as buttons, button-sets, toggles, sliders e.t.c) Amend this if your main accent colour is something else, but it's recommended to pick colours from the palette provided as part of the framework.UI Colours
- are for default background and foreground colours, there are also primary, secondary, muted colours for the foreground. Amend as per project needs. This will affect text, links and the background, but the call to actions (mainly buttons) are described separately (use CTA colour variables for that)Colour Palette
Amend with caution, this affects many UI elements provided by the framework.
--color-cool--800
is the recommended dark-mode background colour;--color-[name]--step
The base layer is the most interesting from the typography and UI point of view, as it describes semantically meaningful HTML tags that one can use without any additional CSS classes.
In order to amend typography for a specific project, it's recommended to create specific classes describing the desired style, rather than overriding the base.css with new rules for tags, as base.css might change in the future. Think of it as a prototyping tool that serves a project with lightly styled HTML tags.
color
) - set for most used foreground colours (default and dark mode).no-print
helper to use on elements that are not suitable for the printing (e.g animated spinners)npm run build
To publish
npm version <patch|minor|major>