city-of-helsinki / hel-bootstrap-3

City of Helsinki themed Boostrap 3 SASS library

City of Helsinki Bootstrap 3 Theme

City of Helsinki Bootstrap theme. Beta

Contents

• Documentation - Made with Mkdocs
• Bootstrap sass theme - Available as npm package

Install

Install or add Bootstrap sass theme to your application

npm install hel-bootstrap-3

NOTE: This probably fails on most enviroments as the sass files can not find each other or their dependencies. So importing individual files recommended for now:

Use customised

Import the sass files in this order. Customise the theme for your application and exclude the Bootstrap components you are not using.

@import helsinki-variables;

@import application-variables; // Copy and edit this file to customise your app theme

@import theme-bootstrap-variables;

@import bootstrap;

@import theme-custom-styles;

Files

_helsinki-variables.scss : Helsinki UI and Brand specific variables. Do not use these directly in your app styles!

_application-variables.scss : App specific setup. Copy and modify to customise your app's look using Helsinki brand variables or your own brand.

_theme-bootstrap-variables.scss : Bootstrap variables with theme modifications

_theme-custom-styles.scss : Bootstrap overrides that can not be achieved only through variables

Bootstrap components

In your application make use of standard Bootstrap 3 components as much as possible.

More information about Bootstrap-sass here and the use of Bootstrap components here

Compatible with React-Bootstrap components.

Develop

• Clone this repository
• pip install requirements.txt
• npm install
• grunt dev

hel-bootstrap-3's Issues

Input placeholder color

Improve input field placeholder text visibility on different background colors.

Input error state is almost invisible

When adding this to Huvaja I noticed the labels, borders and help-block of inputs with errors are white on a white background, making them difficult to see. For example in this image from the Bootstrap test page there's an "Input error" field between the "Input warning" and "Input success" fields:

Import paths fail on different environments

Either document or fix the paths of sass file imports.

Remove border-bottom from inverted navbar.

Becomes visible only under the active link item underlining.

$icon-font-path fails on most setups

Document how $icon-font-path should be changed on different applications or make default path bulletproof.

Input group styling

Input group buttons should align properly with input field.

Select element is inconsistent across browsers

Chrome (OSX):

Safari (OSX):

Firefox (OSX):

IE11 (Win7):

Remove white space from logo svg

helsinki-logo-xx.svg should not include white space around graphic. White space in image file makes aligning with margins difficult.

H3 too big

<h3> size too close to <h2>. Revise header sizing.
(Check Bootstrap 4 for upcoming type scales)

Revise active link style on collapsed (mobile) menu.

Currently selected item underline (border-bottom) expands full menu width. Is there a way to make underline link width?

Also the beveled divider between menu and the navbar is ugly.

Include language versions of the logo

At least Swedish should be available

SVG logos sizing in IE

CSS generated svg logos do not respect background-position on IE(11) properly.
Should test what attributes the svg needs to make the bg svg size properly (maybe width, height, viewbox, preserveAspectRatio)

Revise label coloring

Either make text light on dark backgrounds or keep all label colors light.

When accessed Bootstrap test page jumps on focused field.

File input consistency

Should achieve maximum visual consistency without extra markup or js.