Framework'i only for developers? ...
Today, the word "framework" has become commonplace in the web dev. As soon as jQuery and Prototype, Rails and Django became widespread, it seems that now everyone uses some kind of framework to create their site.
But what is a framework? They are useful to programmers, or even web designers can take advantage of them? ..
So let's agree - at least throughout this article - to assume that the “framework” is a set of tools, libraries, good code that will help turn routine tasks into modules that can be used repeatedly. The task of the framework is to allow the designer or developer to focus on tasks that are unique in this project. In other words, do not reinvent the wheel time after time. In general, this is the approach chosen by the above web and javascript frameworks.
Perhaps you can benefit from a similar abstraction of CSS code during the design of your site. Those who can appreciate the data approach are designers working on several similar sites. In addition, teamwork designers can work using the same framework. For example, I work in a newspaper, and all of our 20 sites have a lot in common. Due to the fact that these are mainly news sites, they are by definition more similar than different. But even a lone designer, who is working on completely different projects, can find elements that can be added to his main framework.
')
At Lawrence Journal-World, where I work, we recently created a CSS framework and found that it significantly increased our productivity. Of course, it took several days to create, but as soon as it was ready, the speed with which we could create quality pages increased dramatically. Moreover, since we started using our framework, each designer could fix something in someone else’s work, and they no longer needed 20 minutes to understand why something was written that way. They just plunged into work.
As you begin to create your CSS framework, you need to find the things that you use in every project. The whole point is to collect all this in one place, following the method of "Do not repeat yourself." This makes support much easier, and you can save a little on traffic.
A few things that I take into account in each of my projects are:
There are also several other interesting features. Many designers often use the same markup and styles to create a page. Why not transfer it to a CSS file and put it together so that it is convenient to use it on several sites at the same time. Yahoo did something similar in the Yahoo User Interface grids component. When we created our framework for Journal-World, we first looked at the implementation of this component in YUI. We later decided that this was not what we needed, but it served as a good example for us and inspired us to create our own realization. We stopped at a 16-block design, which is so flexible that we were able to use it on each of our sites, even considering that each of our site looks a little different from the other.
In addition, many sites use the same widgets, such as drop-down menus, navigation tabs, buttons, etc. These things are well suited for abstraction. In addition, you can work out some of your idioms, like, say, a list of photos, shown in the form of thumbnails. You can standardize the CSS class “thumbnail-list”, and the next time you just need to insert this class to get a working version.
Having such a framework, you can quickly plunge into the creation of a new page. You are creating a new (X) HMTL document, plugging in the framework, and you do not need time to get rid of unnecessary indentation, you will already have the typography you need, clean forms, working widgets and much more!
It is likely that you will want to somehow change the appearance of a particular site. To accomplish this, all you need is to add or change an existing style. For example, if your framework sets a standard navigation bar for each “ul” with the class “tabs”, which has a gray background and black borders. To change this, you just need to add (or change the existing) style. For example:
There are several possible ways to create a framework, but the most common and, undoubtedly, the most convenient, is an abstraction of your main CSS file into several separate files, each of which will play its own role. For example, you can create a style page that manages typography, and another with resetting standard styles. The beauty of this approach is the ability to connect exactly those styles that you need. You can stop at 6-7 different style pages in your framework, but a specific project may not need one or two of them, which means that you don’t have to connect them at all. The framework that we have created in ourselves consists of 5 styles:
Then we saved the whole framework in a separate place and we are already calling it from the sites from there. Of course, we have several specific style pages for each site, where we rewrite or add the necessary styles.
In practice, we, web designers, as well as our colleagues from the world of programming, have a habit of often repeating. We disable standard styles every time, write new styles for tabs, and this is repeated from project to project. Spend some time writing your framework and abstract what you can use several times. This will help you quickly start creating a new page, or maintain an existing one. Take care of this, because it does not require special knowledge and will not harm your projects, and most importantly, it will save time on creating the next design.
Published with permission from A List Apart and Jeff Croft.
But what is a framework? They are useful to programmers, or even web designers can take advantage of them? ..
What is a “framework”?
So let's agree - at least throughout this article - to assume that the “framework” is a set of tools, libraries, good code that will help turn routine tasks into modules that can be used repeatedly. The task of the framework is to allow the designer or developer to focus on tasks that are unique in this project. In other words, do not reinvent the wheel time after time. In general, this is the approach chosen by the above web and javascript frameworks.
Framework for designers
Perhaps you can benefit from a similar abstraction of CSS code during the design of your site. Those who can appreciate the data approach are designers working on several similar sites. In addition, teamwork designers can work using the same framework. For example, I work in a newspaper, and all of our 20 sites have a lot in common. Due to the fact that these are mainly news sites, they are by definition more similar than different. But even a lone designer, who is working on completely different projects, can find elements that can be added to his main framework.
')
At Lawrence Journal-World, where I work, we recently created a CSS framework and found that it significantly increased our productivity. Of course, it took several days to create, but as soon as it was ready, the speed with which we could create quality pages increased dramatically. Moreover, since we started using our framework, each designer could fix something in someone else’s work, and they no longer needed 20 minutes to understand why something was written that way. They just plunged into work.
What exactly can be abstracted?
As you begin to create your CSS framework, you need to find the things that you use in every project. The whole point is to collect all this in one place, following the method of "Do not repeat yourself." This makes support much easier, and you can save a little on traffic.
A few things that I take into account in each of my projects are:
- Bulk reset standard browser styles. For example, setting the margin and padding to 0 for all elements, turning off the borders of framesets and images, etc.
- Creating an approximate design type: margins for block elements such as paragraphs, headings, lists, etc.
- Creating simple styles for forms.
- Creating several CSS classes that I constantly use, for example, .hide (where I set display: none) and .mute (where I set a smaller font size and, sometimes, a lighter color).
There are also several other interesting features. Many designers often use the same markup and styles to create a page. Why not transfer it to a CSS file and put it together so that it is convenient to use it on several sites at the same time. Yahoo did something similar in the Yahoo User Interface grids component. When we created our framework for Journal-World, we first looked at the implementation of this component in YUI. We later decided that this was not what we needed, but it served as a good example for us and inspired us to create our own realization. We stopped at a 16-block design, which is so flexible that we were able to use it on each of our sites, even considering that each of our site looks a little different from the other.
In addition, many sites use the same widgets, such as drop-down menus, navigation tabs, buttons, etc. These things are well suited for abstraction. In addition, you can work out some of your idioms, like, say, a list of photos, shown in the form of thumbnails. You can standardize the CSS class “thumbnail-list”, and the next time you just need to insert this class to get a working version.
Will it really benefit me?
Having such a framework, you can quickly plunge into the creation of a new page. You are creating a new (X) HMTL document, plugging in the framework, and you do not need time to get rid of unnecessary indentation, you will already have the typography you need, clean forms, working widgets and much more!
It is likely that you will want to somehow change the appearance of a particular site. To accomplish this, all you need is to add or change an existing style. For example, if your framework sets a standard navigation bar for each “ul” with the class “tabs”, which has a gray background and black borders. To change this, you just need to add (or change the existing) style. For example:
ul.tabs li {
border: none;
background-image: url ('/ images / tabs / site-specific-tab-look.jpg');
}
How should the CSS framework be designed?
There are several possible ways to create a framework, but the most common and, undoubtedly, the most convenient, is an abstraction of your main CSS file into several separate files, each of which will play its own role. For example, you can create a style page that manages typography, and another with resetting standard styles. The beauty of this approach is the ability to connect exactly those styles that you need. You can stop at 6-7 different style pages in your framework, but a specific project may not need one or two of them, which means that you don’t have to connect them at all. The framework that we have created in ourselves consists of 5 styles:
- reset.css — responsible for resetting standard styles.
- type.css — responsible for typography.
- grid.css — responsible for the layout.
- widgets.css — responsible for widgets: tabs, drop-down menus, and read more buttons.
- base.css — connects all other style pages, so we can only access base.css from our (X) HTML document to use the whole framework.
Then we saved the whole framework in a separate place and we are already calling it from the sites from there. Of course, we have several specific style pages for each site, where we rewrite or add the necessary styles.
Conclusion
In practice, we, web designers, as well as our colleagues from the world of programming, have a habit of often repeating. We disable standard styles every time, write new styles for tabs, and this is repeated from project to project. Spend some time writing your framework and abstract what you can use several times. This will help you quickly start creating a new page, or maintain an existing one. Take care of this, because it does not require special knowledge and will not harm your projects, and most importantly, it will save time on creating the next design.
Published with permission from A List Apart and Jeff Croft.
Source: https://habr.com/ru/post/31107/
All Articles