starter-dough v0.2.3
Starter Dough
This is a web component framework designed to fullfill all styling needs. It also has basic behaviour for displaying things like modals. It is designed to work with any front-end framework or library, such as React, Vue, or Angular. It should also work with any other rendering engines, like HandleBars or Razor.
To use it simply import it as a script tag.
<script src="https://cdn.jsdelivr.net/npm/starter-dough/dist/bundle.js"></script>
The package is also on NPM with all of the source available for anyone that wants to do a custom integration. This is not an optimised process and it is recommended to look at the webpack config and package files from the repro to better understand how to integrated it.
Themeing
Themes are fully configurable (docs to come). There are default options for colours, padding, breakpoints, text variants. They are as follows.
Colours:
- body
- surface
- contrast
- faded_text
- primary
- info
- success
- warning
- danger
Padding
- block
- small_block
- badge
- input
Text:
- code
- display_h1
- display_h2
- display_h3
- display_h4
- display_h5
- display_h6
- h1
- h2
- h3
- h4
- h5
- h6
- body
- body_large
- small
Breakpoints:
- xs
- sm
- md
- lg
- xl
Components
Below is a list of the components and their props as well as their children. Some components also have a child. This is a component that can only come as a direct child. They are declared with p-child
.
p-accordion
p-child
title
- String
p-alert
- props
colour
- Colour Namedismissable
- Boolean (No value)
- props
p-badge
- props
colour
- Colour Nametop-right
- Boolean (No value)
- props
p-breadcrumbs
p-child
href
- String (optional)id
- String (optional)
p-button
- props
colour
- Colour Nameoutline
- Boolean (No value)href
- String (optional)type
- String (optional)
- props
p-buttongroup
- No props but buttons are expected a children
p-card
- props
img
- String (optional URL)img-alt
- String (optional should be included with img)colour
- Colour Name (optional)flush
- Boolean (No value)fill
- Boolean (No value)
- slots
title
- Should only be a span with text
- props
p-carousel
- props
colour
- Colour Name (optional)height
- CSS height property
p-child
img
- Image URL
- props
p-code
- props
language
- Language name (see highlight.js) (optional)colour
- Colour Name (optional)
- props
p-container
- props
full-width
- Boolean (No value)flush
- Boolean (No value)fill
- Boolean (No value)
- props
p-dropdown
- props
target
- The ID of the clickable element
p-child
divider
- Boolean (No value)href
- String (optional)target
- String (optional)
- props
p-headrow
p-icon
- props
name
- Icon name (See RemixIcon)size
- CSS widths and heightcolour
- Colour Name (optional)text
- Boolean (No value) If true then will use the text coloursplin
- Make the icon spin (good for loading)
- props
p-input
- props
name
- String (the form property name)help
- Help text (optional)type
- The input type (e.g. text) (optional)default
- String (the default value) (optional)disabled
- Boolean (No value)
- props
p-layout
- props
areas
- The slot names for the areas (comma separated)colours
- Colour Name for each area (comma separated) (optional)- For each breakpoint - TOPxHEIGHTxLEFTxWIDTH on grid of 12 (optional)
- props
p-link
- props
colour
- Colour Name (optional)href
- Target URLtarget
- e.g. _blank (optional)disabled
- Boolean (No value)
- props
p-list
- props
variant
-ordered
orunordered
align
-left
,right
orcenter
(optional)no-margin
- Boolean (no value)
- props
p-listgroup
- props
flush
- Boolean (No value)
p-child
colour
- Colour Name (optional)disabled
- Boolean (no value)href
- Target URL to make this is a link (optional)target
- e.g. _blank (optional)
- props
p-modal
- props
watch
- CSS selector for click listeninglarge
- Boolean (no value)colour
- Colour Name (optional)
- props
p-nav
- props
align
-left
,centre
,right
, orspread
(optional)column
- Boolean (no value)tabs
- Boolean (no value)
p-child
href
- Target URL (optional)id
- Element ID (optional)spy
- CSS selector (optional)
- props
p-navbar
- props
icon
- URL for bar logobg
- Colour Name (optional)
p-child
href
- Target URL (optional)id
- Element ID (optional)
- slots
right
- The right hand side of the nav bar
- props
p-offcanvas
- props
watch
- CSS selector for click listenerlarge
- Boolean (no value)colour
- Colour Name (optional)
- props
p-paginator
- props
total
- The total number of itemsskip
- Number to skiptake
- Number to take
- props
p-panel
- props
colour
- Colour Name
- props
p-popover
- props
target
- CSS selector for the element to position aroundtrigger
- CSS selector for the trigger elementposition
-top
,bottom
,left
, orright
(optional)on
-click
orhover
(optional)
- props
p-progress
- props
value
- Current percentage of completion (may be comma separated)colour
- Bar colour (should be comma separated if value is)labels
- Boolean (no value)striped
- Boolean (no value)
- props
p-row
- props
cols
- The number of columns (optional - default 12)flush
- Boolean (no value)fill
-screen
orcontainer
(optional)
p-child
centre
- Boolean (no value)align
-centre
,right
, orleft
(optional)- For each breakpoint - width out of 12 (optional)
- props
p-select
- props
label
- String (optional)name
- Stringhelp
- String (optional)default
- String (optional)disabled
- Boolean (no value)
- props
p-spacer
- props
size
- A padding option
- props
p-submit
- props
colour
- Colour Nameoutline
- Boolean (no value)
- props
p-table
- props
colour
- Colour name (optional)
p-child
p-child
- props
p-text
- props
align
-left
,right
, orcenter
(optional)no-margin
- Boolean (no value)variant
- A text variant- For each breakpoint - a text variant (optional)
- props
p-textarea
- props
name
- Stringhelp
- String (optional)default
- String (optional)disabled
- Boolean (no value)code
- Boolean (no value)height
- Css Height (optional)
- props
p-toast
- props
position
-top-left
,top-right
,bottom-left
, orbottom-right
- props
p-toggle
- props
name
- Stringhelp
- String (optional)type
-radio
,checkbox
,toggle
default
- String (optional)disabled
- Boolean (no value)value
- Stringcolour
- Colour Name
- props
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago