Open sfrisk opened 9 years ago
I would go for a mixture of features of Normalize.css and Blueprint.
With regards to look-and-feel, I would opt for something not very different from the Github look-and-feel. Github is rather minimalistic and clean and at par with modern design standards.
Also, I believe that users should be able to cherrypick which features they want and/or customize them on a per feature basis, using SCSS.
I think having a solid base reset for form elements is important, since they can be tricky to control. Below is a thin base collection of styles that I often use to get forms to play a bit nicer cross-browser:
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native
* <audio> and <video> controls
* 2. Improve usability and consistency of cursor style between
* image-type <input> and others
*/
button,
html input[type="button"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
cursor: pointer;
/* 2 */
}
/* 1. Fix vertical alignment inconsistencies */
input[type="color"],
input[type="range"] {
vertical-align: middle;
/* 1 */
}
/**
* 1. Set `min-width` to 0 to avoid overflow issues in Chrome
* 2. Remove default `margin`, `padding`, and `border` across browsers
*/
fieldset {
min-width: 0;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 2 */
border: 0;
/* 2 */
/* Remove `margin-bottom` from the last element in a <fieldset> */
}
fieldset > *:last-child {
margin-bottom: 0;
}
/* Make checkbox, image, and radio inputs `inline-block` by default */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
display: inline-block;
width: auto;
}
/* 1. Constrict `max-width` for file inputs to avoid overflow issues */
input[type="file"] {
max-width: 100%;
/* 1 */
cursor: pointer;
}
/* Set search inputs to `border-box` by default */
input[type="search"] {
box-sizing: border-box;
}
/**
* 1. Remove `padding` so people aren't caught out if they zero out fieldsets
* 2. Correct `color` not being inherited in IE 8/9
*/
legend {
font-weight: 700;
padding: 0;
/* 1 */
color: #222222;
border: 0;
/* 2 */
}
/**
* 1. Restrict <textarea> elements to vertical resizing only
*/
textarea {
resize: vertical;
/* 1 */
}
Then I'll typically do something like this to get all the input fields to be the same height, which helps with gridded form layouts:
.form-label {
display: inline-block;
margin-bottom: 0.25rem;
}
/* 1. Specified so Safari gives `.form-legend` elements 100% width */
.form-legend {
width: 100%;
/* 1 */
}
/**
* Give certain <input>, <select>, and <textarea> elements some default
* styles
*/
.form-input[type="date"],
.form-input[type="datetime"],
.form-input[type="datetime-local"],
.form-input[type="email"],
.form-input[type="month"],
.form-input[type="number"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="tel"],
.form-input[type="text"],
.form-input[type="time"],
.form-input[type="url"],
.form-input[type="week"],
.form-select,
.form-textarea {
line-height: 1;
display: block;
width: 100%;
height: 44px;
padding: 8px;
vertical-align: middle;
color: #222222;
border: 1px solid #dedede;
border-radius: 3px;
outline: 0 none;
}
.form-input[type="date"]:focus,
.form-input[type="datetime"]:focus,
.form-input[type="datetime-local"]:focus,
.form-input[type="email"]:focus,
.form-input[type="month"]:focus,
.form-input[type="number"]:focus,
.form-input[type="password"]:focus,
.form-input[type="search"]:focus,
.form-input[type="tel"]:focus,
.form-input[type="text"]:focus,
.form-input[type="time"]:focus,
.form-input[type="url"]:focus,
.form-input[type="week"]:focus,
.form-select:focus,
.form-textarea:focus {
border-color: #1fa3ec;
outline: 0 none;
box-shadow: inset 0.1rem 0.1rem 0.238rem rgba(0, 0, 0, 0.15);
}
/**
* 1. Increase padding to correct line-height in Firefox
* 2. Give <select> menus a solid background color
*/
.form-select {
padding: 10px;
/* 1 */
background: #f8f8f8;
/* 2 */
}
/* 1. Resets for <textarea> only */
.form-textarea {
height: auto;
/* 1 */
line-height: 1.5;
/* 1 */
}
@cbracco :
Why do search fields have box-sizing: border-box
by default but not other form fields? That seems rather inconsistent to me.
Doesn't it make more sense to either set box-sizing: border-box
as a default for all forms fields or not set it as a default for any form fields?
Because normalize.css explicitly sets the search input to be content-box
, see here: https://github.com/necolas/normalize.css/blob/master/normalize.css#L351
I find in most situations when I use that input I prefer it to use border-box
like the rest of the elements, so I override it explicitly in my reset, instead of modifying core normalize.css because its just easier for me to maintain it that way.
@cbracco @jslegers
We also have a discussion about the use of box-sizing
over at the beginning of the Normalization Thread.
Also can I just say how much I like seeing inputs and buttons get the pointer cursor? That's always a huge pet peeve for me when that doesn't happen automatically.
How much styling is planned? Whatever we do will become the default styles (like it or not) for many projects that use this. I would lean toward a cohesive set of styles that are unique to CSS-Chassis that are a little more than just base styling.
@MichaelArestad well there are two pieces to this.
1.) Base styles for css only form elements which will likely be minimal
2.) A more customized styling which requires JS ( either from jquery UI/Mobile or another js library implementing the css-chassis standard )
I would probably expect 1 to be more generic while 2 will be much more unique just due to cross browser limitations of css styles on form elements.
Ah. Perfect.
1 == bare minimum styles (normalizeish) 2 == css-chassis styles. (potentially also minimal, but useable out of the box)