A brief introduction to CSS Project minimum page

I. Author, download, demo, etc.

Minimum Page project is a few foreigners recently the whole out, or some reference value, so take to say.

These two people are Peter Wilson and Josh kinal. They have a blog called Bigredtin, or you can follow them on Twitter: Peter and Josh.

The project is now on GitHub and can be viewed here. The relevant source file of the article is described here can be downloaded here (friendly tip: There are various browser default built-in CSS style OH).

By the way, this article also has two related demo, you can click here to view: normal demo and form related demo.

Some specific code changes to the minimum page project, or some general recommendations. Can be added to the Questions section page.

Here's the download Ah, demo What you can put the following after reading and then back to look at the general know what oil is squeezed out.

Second, Minimum page is exactly what kind of onion?

According to my current understanding, Minimum page project is to toss some "interesting" CSS code just. Two-bit project founders feel that the CSS reset and CSS base styles that are used more recently need to recreate a lot of the same unnecessary styles, especially those common to browsers. For example:

The font-weight of the strong label is normal, and it is often necessary to revert to bold bold.

The font-weight of the B tag is normal, and it is often necessary to restore it to bold bold.

The font-weight that sets the H1~h6 label is normal, and it is always necessary to revert it to bold bold.

There is another situation, such as the List-style property, which sometimes has a redefinition problem when resetting the style. The following code:

/* Reset.css */li {  list-style:none;} /* Base.css */ol li {/  * give the value of the LI tag under ol */  list-style:decimal outside;} UL li {/  * to ul under the LI tag labeled with dots */  list-style:disc outside;}

As a result, when there are sequence tables and unordered list nesting, the tragedy occurs, the nested ordered list should be displayed value, the results are a dot mark.

You can really click here: Ordered unordered list nested conflicts demo

Although the selector ol > Li and ul > Li can solve the problem, people always think about using the minimum amount of that code in an inertial way.

You can click here: Sub-selector to fix conflicting demo

Here say humorous digression, according to my understanding, above about UL, OL, Li's practice is a look good piece of dog excrement. Harry Because the Li tag is inherited, there is absolutely no need to fuss over the Li tag. The following CSS code can be used directly:

OL {/  * to the ol under the LI Tag Value */  list-style:decimal outside;} UL {/  * to ul under the LI tag with dots Mark */  list-style:disc outside;}

The code is minimal and there are no nested conflicts. You can click here: the list of inherited uses nested demo

Three, style, form style

Looks like minimum page project has a special form CSS file, according to the initiator, the style is limited outside the form, that is, margin, padding or some background background color link set to highlight the blue, keyboard focus to obtain the inverse display.

The form style is mostly stripped from the skeleton framework (for mobile device development friendly), with fewer changes and some code compression. In the first part of the demo, the normal demo page contains the most commonly used elements, and the form-related demo has its own demo page.

Iv. What does it do?

The Minimum page project seems to be doing something like this: form a compact and sturdy base CSS without having to toss the browser's default style over and over again, but also make sure that the effect is the same for each user under each browser, without worrying about the one or two doer pixels.

To encourage users to think about the CSS code that they want to insert into their own site. Code styles are not minimized in that form, and developers are modifying the original base style, which is more pervasive and versatile to fit their site.

Five, this is not normalize.css it?

First of all about the NORMALIZE.CSS project, you can click here to view: Normalize.css. Although both normalize.css and minimum page come from similar places, they are designed to circumvent traditional CSS reset and only set the browser to a different style. But Normalise.css takes a more rigorous approach and avoids too many styles.

On the other hand, the Minimum page contains more styles (more in the form section) and saves a lot of small differences.

No project is Sunshine Avenue. That's why none of the two projects provide a minimal version to prevent you from blindly adding to CSS reset.

Six, what is it?

The above basically according to the official homepage of the content, estimates will also make a lot of people are Zhang two monks-can not touch the head. So I decided to introduce the minimum page project in a more receptive way.
The final product form of the Minimum page project is a CSS file (Base.css and forms.css in the download Resource). We all know that the end product of the CSS reset reset is also a CSS file, but the inside of the style regardless of whether there are differences in each browser is set to 0, or normal.

And here minimum page project:
1. base.css files are defined only for elements that differ in each browser (for example, strong tags are ignored).
2. The defined style is not blindly set to 0, but rather a careful comparison of the most appropriate values specified by the default values of each browser. For example, list styles:

It's not what you think and don't want:

UL, OL, DL {    margin:0;    padding:0;}

3. Tags are inserted directly into the project, with some UI property styles. For example a tag link color, or a picture under a figure tag:

Figure img {    background-color: #f3f3f3;    padding:4px;    margin:5px;    border:1px solid #ccc;        border-radius:3px;}

You can see a background color, a padding with margin, and a rounded style. This is more obvious in the specially proposed FORMS.CSS, from the demo page in the text box and so on can estimate the various HTML form control voluminous style, we actually use the project results in accordance with the site's own situation, modify (for example) here the form style.

When we use the Minimum page project, we want to result in the situation of our site itself, the CSS properties in the changes. As mentioned above, the reason why we put the form such as CSS is pretty fine, is to facilitate the user to make changes. This is why the project is not the correct way to minimize the CSS file.

Hint: There is a folder named _reference-ua-css in the source file, where CSS files are the default CSS style values built into each browser, from which you can see that the CSS property values for the styles set in the Minimum page project are carefully contrasted, The value of the set is also considered, so it is quite useful for reference and referential significance.

Seven, short of the conclusion

Oneself is also the study side organizes, therefore, the article may have the expression inaccurate place, welcome correction. For the project itself, because he has not accurately grasped its essence, so I do not dare to make comments. But it's pretty sure how many of them see me. Some of the shadows in the schema CSS, such as not being reset by the browser's consistent default properties.

I wonder what you think of the browser default CSS in this project?