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:
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:
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.
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.
When your design preferences and requirements change, you can easily modify them.
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:
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:
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:
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:
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:
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:
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:
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:
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:
This may include common CSS components, such as drop-down menus and tooltip.
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:
Originally published in ikel 1st, 2009: Saud Khan
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.
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.