Download
Forms elements

Forms elements

.parts-input
     input   /   textarea

Block container for input fields

Elements input or textarea should be direct inheritors of the block 

<div class="parts-input">
  <input type="text"/>
</div>
Copied 
<div class="parts-input">
  <textarea></textarea>
</div>
Copied

--xs
--sm
--lg
--xl

Size modifiers 

<div class="parts-input parts-input--xs">
  <input type="text" placeholder="xsmall"/>
</div>
Copied 
<div class="parts-input parts-input--sm">
  <input type="text" placeholder="small"/>
</div>
Copied 
<div class="parts-input parts-input--md">
  <input type="text" placeholder="medium"/>
</div>
Copied 
<div class="parts-input parts-input--lg">
  <input type="text" placeholder="large"/>
</div>
Copied 
<div class="parts-input parts-input--xl">
  <input type="text" placeholder="xlarge"/>
</div>
Copied

--smooth
--light
--dark

Styles 

<div class="parts-input parts-input--smooth">
  <input type="text" placeholder="Smooth"/>
</div>
Copied 
<div class="parts-input parts-input--light">
  <input type="text" placeholder="Light"/>
</div>
Copied 
<div class="parts-input parts-input--light parts-input--smooth">
  <input type="text" placeholder="Light Smooth"/>
</div>
Copied 
<div class="parts-input parts-input--dark">
  <input type="text" placeholder="Dark"/>
</div>
Copied 
<div class="parts-input parts-input--dark parts-input--smooth">
  <input type="text" placeholder="Dark Smooth"/>
</div>
Copied

--thick
--shadow
--corner
--rounded

<div class="parts-input parts-input--thick">
  <input type="text" placeholder="Thick"/>
</div>
Copied 
<div class="parts-input parts-input--shadow">
  <input type="text" placeholder="Shadow"/>
</div>
Copied 
<div class="parts-input parts-input--corner">
  <input type="text" placeholder="Corner"/>
</div>
Copied 
<div class="parts-input parts-input--rounded">
  <input type="text" placeholder="Corner"/>
</div>
Copied

--underline

JS required

For the correct display of styles with the focus on the field, the element input or textarea should have .js-input-focus class 

<div class="parts-input parts-input--underline">
  <input type="text" placeholder="Underline" class="js-input-focus"/>
</div>
Copied
Label

.parts-input
     __label

Label 
<div class="parts-input">
  <label class="parts-input__label">Label</label>
  <input type="text"/>
</div>
Copied
Placeholder

__placeholder

Imitation of the placeholder attribute

Placeholder

.parts-input
     __placeholder
         span
     input.js-input-focus

Markup

JS required

For the correct display of styles with the focus on the field, the element input or textarea should have .js-input-focus class 

<div class="parts-input">
  <div class="parts-input__placeholder">
    <span>Placeholder</span>
  </div>
  <input type="text" class="js-input-focus"/>
</div>
Copied

--compact

Placeholder compact 
<div class="parts-input">
  <div class="parts-input__placeholder--compact">
    <span>Placeholder</span>
  </div>
  <input type="text" class="js-input-focus"/>
</div>
Copied
Error

__error

Error

Что-то пошло не так 
<div class="parts-input">
  <input type="text" class="error"/>
  <div class="parts-input__error">...</div>
</div>
Copied

Checkbox

.parts-checkbox
     input
     __icon
     __text

Checkbox block and elements

The block must be a label element, and the elements must be located inside it in a sequence:
input, __icon, __text 

<label class="parts-checkbox">
  <input type="checkbox"/>
  <span class="parts-checkbox__icon"></span>
  <span class="parts-checkbox__text">Checkbox</span>
</label>
Copied

--switch

<label class="parts-checkbox parts-checkbox--switch">
  <input type="checkbox"/>
  <span class="parts-checkbox__icon"></span>
  <span class="parts-checkbox__text">Switch checkbox</span>
</label>
Copied
Radiobuttons

.parts-radio
     input
     __icon
     __text

Radiobutton and elements

Structure that equals to checkbox - label.parts-radio, inside there are input, __icon, __text 

<label class="parts-radio">
  <input type="radio" name="radiobtngroup" value=""/>
  <span class="parts-radio__icon"></span>
  <span class="parts-radio__text">...</span>
</label>
Copied
Selectbox

.parts-select

JS required

Class for <select> element, that initializes the stylized selectbox. 

<select class="parts-select">
  <option value="Selectbox">Selectbox</option>
  <option value="Select option 1">Select option 1</option>
  <option value="Select option 2">Select option 2</option>
</select>
Copied

.parts-selectbox
     select
             option
     __field
             __value
             __arrow
     __dropdown
             __list
             __option

Structure after init 

<div class="parts-selectbox">
  <select class="parts-select">
    <option value="Selectbox">Selectbox</option>
    <option value="Select option 1">Select option 1</option>
    <option value="Select option 2">Select option 2</option>
  </select>
  <div class="parts-selectbox__field">
    <div class="parts-selectbox__value">Selectbox</div>
    <div class="parts-selectbox__arrow"></div>
  </div>
  <div class="parts-selectbox__dropdown">
    <ul class="parts-selectbox__list">
      <li class="parts-selectbox__option">Select option 1</li>
      <li class="parts-selectbox__option">Select option 2</li>
    </ul>
  </div>
</div>
Copied

.parts-input
     .parts-select

Can accept styles of field modifier, if placed in .parts-input 

<div class="parts-input parts-input--lg">
  <select class="parts-select">
    <option value="Select option 1">Select option 1</option>
    ...
  </select>
</div>
Copied 
<div class="parts-input parts-input--thick">
  <select class="parts-select">
    <option value="Select option 1">Select option 1</option>
    <option value="Select option 2">Select option 2</option>
    ...
  </select>
</div>
Copied 
<div class="parts-input parts-input--rounded">
  <select class="parts-select">
    <option value="Select option 1">Select option 1</option>
    <option value="Select option 2">Select option 2</option>
    ...
  </select>
</div>
Copied 
<div class="parts-input parts-input--smooth">
  <select class="parts-select">
    <option value="Select option 1">Select option 1</option>
    <option value="Select option 2">Select option 2</option>
    ...
  </select>
</div>
Copied

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message

Support project
Subscribe for updates