search

maybeweare / breakpoint.css

A breezy CSS Framework
1 stars 3 forks source link

Forms #18

Open kingsleyzissou opened 6 years ago

kingsleyzissou commented 6 years ago

So I've tried to make a very semantic approach, let me know if you have any suggestions.

To get an input group you use the "field" class.

An input type will be wrapped in a class of the same name. I.e. a select element is wrapped in a "select" class and an input element is wrapped in an "input" class.

Labels are optional and can be placed above or below the input. The label requires the "label" class.

There is a field "helper" class. This would need javascript, so the implementation is not there, but anyone making use of the framework could toggle the visibility of the helper class fairly easily with JS.

Here is an example of what the HTML would look like: 

<div class="field">
    <div class="input">
        <input type="text" name="text" value="" placeholder="Enter your name...">
    </div>
    <label class="label" for="text">Name</label>
    <ul class="helper">
        <li><small class="message">This is an error message</small></li>
    </ul>
</div>
kingsleyzissou commented 6 years ago

@piccolazucca @dimitraz here we go, made the suggested changes

dimitraz commented 6 years ago

@kingsleyzissou can you rebase?

kingsleyzissou commented 6 years ago

@dimitraz @piccolazucca I updated the radio & checkbox selector wrapper to flexbox so the inputs are more robust i.e. if the font size changes or the selector wrapper is made larger, the tick or the radio button will always be centered.

kingsleyzissou commented 6 years ago

@piccolazucca @dimitraz rebased, can you have a look?

dimitraz commented 5 years ago

ping @kingsleyzissou can you finish this i need it lol

dimitraz commented 5 years ago

ping

kingsleyzissou commented 5 years ago

Lol I haven’t checked my email in weeks

On 6 Apr 2019, at 10:55, Dimitra Zuccarelli notifications@github.com wrote:

ping

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/maybeweare/breakpoint.css/pull/18#issuecomment-480491161, or mute the thread https://github.com/notifications/unsubscribe-auth/ATfcsPRQxnLjE4KUjV0ruteNtKqjeTiWks5veG8FgaJpZM4UNKll.

dimitraz commented 5 years ago

Who doesn’t check their email I check mine every hour

Sent from my iPhone

On 6 Apr 2019, at 22:28, Gianluca notifications@github.com wrote:

Lol I haven’t checked my email in weeks

On 6 Apr 2019, at 10:55, Dimitra Zuccarelli notifications@github.com wrote:

ping

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/maybeweare/breakpoint.css/pull/18#issuecomment-480491161, or mute the thread https://github.com/notifications/unsubscribe-auth/ATfcsPRQxnLjE4KUjV0ruteNtKqjeTiWks5veG8FgaJpZM4UNKll.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

kingsleyzissou commented 4 years ago

@dimitraz sorry dim, dropped the ball there