3 atoms Atoms
00-config/_variables.scss
, line 15
3.2 atoms.form-controls Form controls
Form controls are all individual elements that can be used in forms. They built up to form-groups.
Common form controls
Shared size and type resets for form controls. Apply .form-control
to any
of the following form controls:
- select
- textarea
- input[type="text"]
- input[type="password"]
- input[type="datetime"]
- input[type="datetime-local"]
- input[type="date"]
- input[type="month"]
- input[type="time"]
- input[type="week"]
- input[type="number"]
- input[type="email"]
- input[type="url"]
- input[type="search"]
- input[type="tel"]
- input[type="color"]
02-atoms/form-controls/form-controls.scss
, line 3
3.2.1 atoms.form-controls.input Input
The <input>
element is mostly used for text-based inputs that include the
HTML5 types: text
, search
, tel
, url
, email
, password
, date
,
time
, number
, range
, color
, and file
.
Styling
The border should light up simply and clearly indicating which field the user is currently editing.
Requirements
Element should have a .form-control class.
Markup
02-atoms/form-controls/_input.scss
, line 7
3.2.2 atoms.form-controls.textarea Textarea
Form control which supports multiple lines of text. Change rows attribute as necessary.
Styling
The border should light up simply and clearly indicating which field the user is currently editing.
Requirements
You should have put a .form-control class on each textarea.
Markup
02-atoms/form-controls/_textarea.scss
, line 1
3.2.2.1 atoms.form-controls.textarea.textarea-autogrow Textarea Autogrow
If you want the textarea to autogrow while typing you need to add
classes form-control--autogrow
and js-textarea-autogrow
to the
element as well. Also you need to remove the rows attribute and replace
it with a data-min-rows
attribute. The value should be a number just like rows.
Markup
02-atoms/form-controls/_textarea.scss
, line 17
3.2.3 atoms.form-controls.select Select list
The <select>
element represents a form field for selecting amongst a set of
options.
Styling
The border should light up simply and clearly indicating the user is selecting this form item.
Requirements
You should have put a <div>
with the class .select-wrapper
around the
<select>
element for cross-browser styling
Markup
02-atoms/form-controls/_select.scss
, line 1
3.2.4 atoms.form-controls.input-radio Input radio
The input element should have a parent with class radio
.
The label always comes after the input. The visual part of the
element is only the label. The user clicks on the label and the
:before
pseudo-element changes in style. The input itself stays
hidden from the user as it iss not themable.
The for
attribute is necessary to bind the our custom radio
with the input. Add the input's id
as the value of the for
attribute of the label.
Markup
02-atoms/form-controls/_radio-checkbox.scss
, line 1
3.2.5 atoms.form-controls.input-checkbox Input checkbox
The input element should have a parent with class checkbox
.
The label always comes after the input. The visual part of the
element is only the label. The user clicks on the label and the
:before
pseudo-element changes in style. The input itself stays
hidden from the user as it iss not themable.
The for
attribute is necessary to bind the our custom checkbox
with the input. Add the input's id
as the value of the for
attribute of the label.
Markup
02-atoms/form-controls/_radio-checkbox.scss
, line 18
3.2.6 atoms.form-controls.input-switch Input switch
The switch is a based around the input type checkbox
element.
Wrap the checkbox in a <label>
element and put a span with class lever
next to the
input element. Now you can put your labels at the beginning and end of the label.
Markup
02-atoms/form-controls/_switch.scss
, line 1
3.2.7 atoms.form-controls.input-range Input range
The range input can be themed cross-browser very well. There is no extra markup needed, just update the scss variables in the variables forms file.
Markup
02-atoms/form-controls/_range.scss
, line 1
3.3 atoms.card Card
The card is a very basic element that we see a lot in Open social.
It is the most basic way of structuring content into sections.
A card is elevated (through box-shadow
property) one level from the canvas.
It will also have a background-color
and border-radius
.
Card title
A card can have a title to display what the card is about.
Add .card__title--underline
for a border on the head.
Add a child <div class="card__subtitle">
for a subtitle.
Card body
Add .card__body--fat
to double the padding of the card.
.cardbody - Default body card .cardbody--fat - Fat body card
Card footer
The footer is reserved for actions the user can perform in the card. In most cases there will be buttons, but there can also be labels in here.
Card title optional subtitle
Body can contain element
Card title optional subtitle
Body can contain element
Markup
Card title
optional subtitle
Body can contain element
02-atoms/cards/cards.scss
, line 1