Test:Test
From partnersenproppersolutions
To do
Installation
- Extensions
- Lockdown: done
- Fonts and icons
- FontAwesome: done
- Lato: use Lato as the default font (see style guide below) + use classes for "Inleiding, Platte tekst, TUSSENKOPPEN en Quotes"
- Test "Lato900" class!
- Layout components
- Custom header, to be defined in a MediaWiki system message
- (1) logo on top with buttons right
- (2) make menu cover the full width of the screen: 3 links (Diensten, Werkwijze, Over ons) and 2 empty bar elements
- SubHeader for page-wide banners: done, currently confined to WS_NS _TEST
Style guide
- Color schemes
- #80614b (brown)
- #a3a42b
- #ddde3a
- #365e89
- #557ebe
- #f1f1f3
- #4d4d4d (dark)
- Lato font
- Inleiding: Lato normal 400
- Platte tekst (incl. buttons): Lato normal 400
- TUSSENKOPPEN: LATO BOLD 700
- Quotes: Lato Bold 700 italic
- Button classes
Todo.
- Determine which elements require panels, wells, etc.
Scheme for colour classes
Normal text and a link to an existing page and a link to a non-existing page
Kleur code & bootstrap
Code | Colour | Colour on hoverBest practice: if darker color, use lighter color - conversely if lighter color, use darker color for hover effect | UsageButtons; Panels, ?Cards | custom class name | |
---|---|---|---|---|---|
#80614b | #80614b | AA7B5C | Footer | ws-darkbrown | |
#a3a42b | #a3a42b | BFBF44 | Huisstyle | ws-darkgreen | |
#ddde3a | #ddde3a | CECE3D | Logo | ws-lightgreen | |
#365e89 | #365e89 | 5184BA | Buttons? | ws-darkerblue | |
#557ebe | #557ebe | 365e89 | Buttons? Panels? | ws-darkblue | |
#f1f1f3 | #f1f1f3 | DDDDDD | Header en footer | ws-light | |
#4d4d4d | #4d4d4d | #757575 | Text | ws-dark |
- To do
- Distinguish between classes with and without hover effect, e.g. E.g. ws-btn-dark and ws-dropdown-dark - Or introduce an extra class for hover effects?
Structure
For files, see Test:Files
- Home page
- Onze diensten
- List page with clients
- Blog?
- Contact
Testing
Logo header
Button groups
- Zie Test:Menu/test
comments
- ... style="padding:0px; margin:0px; box-shadow: 0px 2px 0px #888;"
- To do: add new classes btn-ws-xxx, e.g. with color: #f1f1f3 and back-ground-color: 365e89;