About the designer’s framework in web design and production

"Framework" is a pretty buzzword in web development these days. For example, the JavaScript frameworks YUI, JQuery and Prototype have attracted widespread attention, and the web application frameworks Rails and Dojo have attracted even more attention. It seems that everyone uses some kind of framework to develop their own websites. But what exactly is a framework? Are frameworks only useful to programmers? Can designers benefit from them?

What is a framework?

In order to facilitate communication, we give a unified definition of "framework" (at least in this article): a set of tools, function libraries, conventions, and general modules that try to abstract common tasks and can be reused. It allows designers and developers to focus on aspects unique to the task project and avoid duplication of development. Generally speaking, frameworks are the JavaScript framework and Web application framework mentioned above.

It's important to emphasize that we don't have to talk about construction, packaging and distribution. Instead, a framework can be used only by you or your team.

CSS framework

Sometimes, you may taste the benefits of abstract and similar CSS code, which is most obvious among designers who design several similar websites at the same time. In addition, the designers on the team benefited a lot from the framework's approach. For example, I work for a newspaper, and all 20+ websites maintain a lot in common. Based on the characteristics of news websites, they tend to be more similar than different. But even a single designer working on a project that looks very different on the surface can abstract away some common little pieces for the CSS framework.

At Lawrence Journal-World, where I work, we recently built a CSS framework and found it to be a huge efficiency multiplier. Sure, it took us days to create a CSS framework ourselves, but once the framework was complete, developing high-quality web pages was extremely fast. What's more, since every designer on the team now uses this framework, when a designer modifies another team member's web page, they no longer need to spend 20 minutes understanding other people's construction ideas and can get started immediately.

Are there any that can be ignored?

When investing in a very holistic CSS framework, what you want to look for is common code that is repeated over and over again in every project. The goal is to consolidate the core position of these codes and follow the "Don't repeat yourself" t Repeat Yourself)" encoding method. This makes maintenance much easier and saves bandwidth costs for your visitors.

In almost every project I work on, there are a few CSS issues I have to declare:

"Extensive reset" of the browser's default style, for example, setting the margin and padding of all elements to 0, removing the borders of framesets and images, etc.

Align to baseline. This includes things like setting margins for block-level elements such as paragraphs, headers, and lists to the same (or multiple) base line heights.

Create the basic style of the form.

Create several commonly used CSS classes, for example, .hide (set display to none, that is, hide the element), .mute (set to a smaller font and brighter color).

And here’s the funnier thing, many website designers find themselves reusing the same basic structure over and over again, so why not make it their own, in a way that is very flexible and can be used across multiple websites? Yahoo did this , this is YUI. When we were building the CSS framework for the Lawrence Journal-World website, I started by looking at how Yahoo did it. We're pretty sure that's not what we want, but it serves as a good example and gives us a lot of ideas to think about and how to construct our own framework. We settled on a 16-cell problem that was flexible enough to work on every one of our sites, even if each site looked a little different from the next. In addition, most websites share widgets, such as drop-down menus, navigation menus, buttons, etc. These are also the main objects that need to be abstracted. In addition, you may have common content names, such as thumbnails for image lists. You can standardize the CSS naming, such as "thumbnail-list", so that all thumbnails that display thumbnails use this CSS class.

Another thing to do may be to extract hacks (such as compatibility with those old browsers) and add your own extended style module. I tried it myself, but found that the hack was too proprietary to be extracted into a general framework.

What are the real benefits?

The real benefit of the framework is that it can start work quickly. You can create a new (X)HMTL file and introduce your framework. You no longer have to deal with resetting padding and margins. Beautiful typography, clean forms, neat layout, Valid widgets, etc. Obviously, obviously, though, you definitely have to customize the look and feel for each site. To achieve this, all you need to do is override and add to the default style where necessary.

Obviously, although you have to customize the look for each website, all you need to do to accomplish this is add a few lines of code to the default styles. For example, if you set a basic horizontal navigation style for all UL tags with the class attribute "tabs" in your frame, and have a gray border, you only need a few lines of CSS code to customize it. The look and feel your website conforms to.

The list floats to the left, and the links are placed in the form of blocks in the list. The links also float to the left, and the font is centered. The framework will help you complete these tasks like annoying advertisements. In your website design work, just focus on Focus on the specific, interesting details of your website, rather than writing CSS code that has been written a million times before.

How to build a CSS framework?

There are several possible ways to build a framework, but the most common, and arguably the most useful, is to abstract common CSS into a standalone stylesheet file that only contains a specific part of the whole. For example, you could have one style handle typography and another handle bulk reset. This good method allows you to selectively introduce the styles you need. There may be six or seven different style files in your framework, but you don't need one or two of them, as long as they are not imported. The framework created by our team consists of 5 style files:

reset.css —handles reset

type.css — handles typography

grid.css — handles layout

widgets.css — handles widgets such as tab menus, drop-down menus, and "more" buttons

base.css — Contains all other stylesheet files so that we only need to reference base.css in (X)HTML to use the entire CSS framework. We then store the framework in a separate place so that every site imports this frame. Of course, each website also needs a unique style sheet, and the unique style makes necessary supplements to the framework.

advice

This method is good, but it also brings new problems: it increases the number of http links for each page. For websites with large and medium traffic, if more than 5 HTTP connections are added to each page, the system administrator may be in big trouble. Two possible solutions:

Put all styles into one file instead of splitting them into multiple modules. The problem here is that the flexibility of the framework to include only specific files is lost and maintenance becomes cumbersome.
There is a server-side program that dynamically processes multiple single files into a response. I haven't seen this done yet, but it should be very efficient if done well. Taking my above framework as an example, this dynamic processing process is triggered when base.css is requested, not when type.css, grids.css, etc. are requested. This way, individual files are still available and the entire framework is valid on the platform version.
In summary, it is important to note that our goal is not to be as abstract as possible. Instead, the goal is to provide a quick start and a more efficient design process that is definitely possible ever. If you go too abstract, things can get confusing and too many HTTP links can affect your site's performance. Remember: a good framework is not about making things harder and more complicated, but about starting from scratch.

Summarize

We web designers tend to repeat ourselves all the time, and like my friends in the programming world, we reset browser default styles, design layouts, and navigation menus over and over again—on nearly every project. Spending a little time sorting out the CSS framework will allow you to quickly start each website project, maintain the website more easily, and help other designers on the team understand your work. It should be noted that these benefits must be obtained without affecting the performance of the website.