Use your own CSS framework and css framework

Use your own CSS framework (for conversion) and css framework
[Classic recommendations] CSS framework selection wizard

Many CSS frameworks have existed for a while, but most Web developers avoid using them. On the contrary, the most experienced developers want to create their own CSS frameworks, provide the advantages of personalized solutions, and reduce the negative dependence on third-party solutions. Although the CSS framework aims to accelerate network development, developing a comprehensive CSS framework may require a lot of time and effort. This article provides guidance and carefully selected resources to help you fulfill your wish.

Before getting started
First, try some popular CSS frameworks or at least look at the files they provide:

 

• Blueprint
• Yet Another Multicolumn Layout (YAML)
• YUI Grids CSS Foundation
• 960 Grid System

You may also need to check the authoritative list of CSS frameworks.

Why should I build my own CSS framework?
CSS plays a vital role in modern web design. It is really not difficult to learn. There is no reason not to seek a shortcut to accomplish this seemingly permanent task.

Here are some specific reasons/advantages:

More effective:
You will be able to use your own more effective framework.

Better design compatibility:
Your design will not depend on how a framework is developed, and the framework will automatically support your design preferences.

Less headaches:
Will you inherit from errors or defects created by others. Of course, your own CSS framework may have errors or defects, but you can better solve these problems.

Greater flexibility:
When your design preferences and requirements change, you can easily modify them.

Additional benefits:
You will not spend your precious time learning the framework. On the contrary, your time will be spent learning more precious things: CSS.

Let's start-grouping and rules
The main objection is that developing your own CSS framework is a complicated task. The CSS framework is just a simple set of CSS code that you use repeatedly in your project. The process of optimizing and improving code quality and utility requires additional effort, skills, and time.

Let's take a look at what type of CSS code is repeatedly used in our project. WeCSS layout, layout, tables, and commonly used items such as lists and images are always used. We can also use CSS to ensure that the overall appearance elements and feelings are consistent in all Web browsers.. In addition, some of us may like components (such as menus, Atlas, slide, etc.) that we use repeatedly in our projects; including their styles in our frameworks.

To easily maintain each part of your framework, you can divide it into multiple CSS files, for example:

Reset.css
Base.css
Typography.css
Layout.css
Form.css
Table.css
Browser.css
Print.css

The above list is just a suggestion. You can divide your framework into any number of files. However, to maximize the benefits of your CSS framework, make sure that:

You have thoroughly tested the output of all mainstream browsers
Litmus-online services that make compatibility testing easier
You have followed the best CSS practices:
CSS standards and best practices
CSS best practices-insight into industry best practices
Concise code, reasonable structure, and appropriate documentation
Styleneat-online tools, organizing and standardizing your CSS-selection, sub-Selector and attributes
Use the minimum class and ID
It has passed the error test and has passed the W3C CSS verification service.

Use CSS Reset, Base & Typography as a solid foundation
Various elements in different browsers have different default styles (margins, blank edges, borders, outlines, etc ). Delete inconsistent default styles in the reset file and make sure that all major browsers use consistent styles to render your website. There are two most popular CSS resets, which you may consider using in your own CSS framework:

• Eric Meyer CSS Reset
• YUI Reset CSS

After CSS Reset is completed, the next logical step is to set your own Base and provide a default style that applies to all mainstream browsers. This can be done in a dedicated base.css file or with your Reset file. Here are some resources to help you build your Base:

• Tripoli
• YUI Base CSS

Typography is closely followed by every specific design, so it seems to be the first thing to consider as annoying and unwise to include in a CSS framework. However, there is a text typographical file that covers all the basics and is a real time-saving means. Even for a period of time, you may have to use more typographical files for different detailed styles due to the needs of different styles of fonts.
Here are some resources and tools to help you get started:

 

• Typetester
• Typechart
• Blueprint Typography
• CSS Type Set
• EM Calculator

Layout (Layouts)-find the Holy Grail

Layout is the most tricky, perhaps the most controversial part of a CSS framework. Just like typographical layout, layout changes with design, and you should be careful when choosing whether to make it part of your CSS framework. You can even consider the possibility of having more than one layout file in your framework.
Here is a list of resources that may provide further assistance:

• In search of the One True Layout
• 6 Keys To Understanding Modern CSS-Based Layouts
• Advanced CSS Layouts: Step by Step
• Five Simple Steps to Designing Grid Systems
• Fixed Width CSS Layouts
• Perfect Multi-Column CSS Liquid Layouts
• The 'holy Grail '3 Column Liquid Layout (Pixel Widths)
• CSS Layouts: A collection of 224 Grid and CSS Layouts
• CSS Layout Generator

Forms & Tables-why not?

Table lists and table lists can be included in your base.css file. However, having more additional templates will add great value for your design to meet different needs.
Before making a final decision, let's take a look at these resources:

• The Form Garden-a css Based Collection for Web Forms
• Fancy Form Design Using CSS
• Clean and Pure css form Design
• Blueprint Form
• A css Styled Table
• Top 10 CSS Table Designs

Browser-specific CSS
Unfortunately, in many cases, we need to write some browser-specific CSS workarounds. However, hacks or workarounds of CSS may produce a CSS verification error. To solve this problem, you should use the condition tag containing browser.css in your HTML file.
Here are some resources for your reference:

• IE6 CSS Fixer: Starter Kit
• CSS Hacks
• Developing CSS for IE6 and 7
• Explorer Exposed!

Print Style
A separate print style sheet will greatly improve the availability of your website, especially for a large number of content pages.
Here are some additional guidance resources:

• CSS Media Types Create Print-Friendly Pages
• Print Stylesheet-The Definitive Guide

What else can you do?
You can do more things. This is the main idea behind your own CSS framework. You can create many abstract CSS files as long as you like, such:

Component.css (Component)
This may include common CSS components, such as drop-down menus and tooltip.
Application.css (Application)
This may have multiple versions for each of the different types of applications you often design. For example, WordPress, Drupal, and BlogEngine. Net.

Last-Use your own CSS framework
Using your framework is simply to include all the necessary files in your HTML. But containing unnecessary CSS files means additional HTTP requests. To avoid this situation, you should first merge all the files (except browser.css and print.css) and then include the new CSS in your project file.

In order to keep this article short, we only provide some limited resources, so please feel free to find a better alternative and share your comments with others.
You can also take a quick look:

• Definitive List of CSS Frameworks
• List of Really Useful Tools for CSS Developers
• CSS3 Unleashed-Tips, Tricks & Techniques

------------------------------
Originally published in ikel 1st, 2009: Saud Khan
Http://www.w3avenue.com/2009/04/01/guidelines-for-developing-your-own-css-framework/

Note: This is actually an old article. But it still seems excited. This article does not focus on what you learn, but on what you do. After the concept of oo css (object-oriented CSS) was introduced, the old OOCSS framework and BulePrint framework were launched. Up to now, there have been 10 CSS frameworks, you cannot determine which one to choose.
On the other hand, you will regret it when you choose it. As mentioned above. Therefore, most people wish to write one by themselves.
Of course, you can write a sample CSS framework in this article. As mentioned in this article, beginners can do the same. This article gives you reference to authoritative, classic, and famous articles. Of course, on the other hand, if you have a certain level of CSS skills, it is even more appropriate. So I hope you can write it by yourself. I hope you have read at least the book "proficient in CSS.

How to Use the css framework

He has a frame package. You need to understand what the style of each frame package is. In addition, some of them still need to be written by yourself.

How can I use div + css to create a webpage framework?

1. The layout first determines the big frame, and then gradually constructs the internal details. From the perspective of hierarchical relationships, it is the layout from the outside to the inside;
2. If you are not familiar with divcss, you can use the image as the background image first.
3. If you are not proficient in positioning the layout, You can temporarily layout it in an absolute position.
4. If you are not familiar with this page, you must first consider whether you have the ability to write out the layout of the page, or whether you can write it out; such as rounded corners, shadows, translucent effects, and misplacement of modules;

In fact, whether the page layout is simple is relatively simple. The opinions of proficient people and new users must be different. In the long run, new users should not be skillful. Do not be afraid of errors or difficulties when writing divcss code, when you encounter a problem, you can find a solution. It is the best solution to solve the problem. When you no longer encounter the problem or rarely encounter the problem, it means you are proficient or not far from proficient

Another point is that you should have a favorite attitude and do not study as a burden or task. When you are interested in something, you will learn quickly; it's like some students have always scored well in a certain subject during their studies, and most people are actually interested in learning so well.