Forms & buttons

Default styles and utilities for HTML form elements, input styles and buttons.

Source file
src/css/forms-buttons.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/forms-buttons.css

Included with:

Forms (anchor)

Fieldset legend







Buttons (anchor)

.btn

Utilities (anchor)

The button groups and icon buttons components are also utility extensions designed specifically to work with buttons and inputs styles.

Search form (anchor)

 
<search>
  <form action="#" class="search">
    <label for="docsearch" class="vis-hidden">Find a doc</label>
    <input type="search" id="docsearch" name="q">
    <button type="submit">Search</button>
  </form>
</search>

With the search icon included with the icon buttons:

 
<search class="mb-3">
  <form action="#" class="search">
    <label for="search-ico" class="vis-hidden">Find a doc</label>
    <input type="search" id="search-ico" name="q">
    <button type="submit" class="ico-btn ico-search"><span class="vis-hidden">Search</span></button>
  </form>
</search>

Button sizes (anchor)

<button class="btn-sm">Small</button>
<button>Default</button>
<button class="btn-lg">Large</button>

Outline button (anchor)

<button class="btn-outline">Outline</button>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Example HTML 
<label for="text-light" class="vis-hidden">Light</label>
<input class="light" type="text" name="text-light" id="text-light" placeholder="Light">
<button class="light">Light</button>

<label for="text-dark" class="vis-hidden">Dark</label>
<input class="dark" type="text" name="text-dark" id="text-dark" placeholder="Dark">
<button class="dark">Dark</button>

Primary colors (anchor)

The color modifier classes use the primary colors variables, the source files are included separately.

Color forms (anchor)

Source file
src/css/colors/color-forms.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-forms.css

Included with:

Example HTML 
<label for="text-primary" class="vis-hidden">Input primary</label>
<input class="form-primary" type="text" name="text-primary" id="text-primary" placeholder="Primary">

<label for="text-success" class="vis-hidden">Input success</label>
<input class="form-success" type="text" name="text-success" id="text-success" placeholder="Success">

<label for="text-danger" class="vis-hidden">Input danger</label>
<input class="form-danger" type="text" name="text-danger" id="text-danger" placeholder="Danger">

<label for="text-info" class="vis-hidden">Input info</label>
<input class="form-info" type="text" name="text-info" id="text-info" placeholder="Info">

<label for="text-warning" class="vis-hidden">Input warning</label>
<input class="form-warning" type="text" name="text-warning" id="text-warning" placeholder="Warning">

<label for="text-secondary" class="vis-hidden">Input secondary</label>
<input class="form-secondary" type="text" name="text-secondary" id="text-secondary" placeholder="Secondary">

Color buttons (anchor)

Source file
src/css/colors/color-buttons.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-buttons.css

Included with:

Example HTML 
<button class="btn-primary">Primary</button>
<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
<button class="btn-info">Info</button>
<button class="btn-warning">Warning</button>
<button class="btn-secondary">Secondary</button>
Previous: Typography
Next: Tables