Framework is a set of components that provide a basic framework of reusable components, with a consistent architecture of generic functionality under which the application will be built.
Figure 1: Example of one CSS Framework
In the case of CSS, frameworks are libraries that are designed to enable the CSS coding more easily and compatible with standards of styles, adding a number of options that are ready to design a web page, like a skeleton, reducing time spent with development.
The CSS frameworks usually have formatting settings the most common elements of a page: forms, headears, styles of text and images. Some present options for structuring the content based on grids.
The use of HTML and/or CSS frameworks is still a subject that divides opinion of developers because many consider the framework as a ready solution and believe that it takes the work of the hands of the designer / developer and makes him not Improve the his knowledge.
Would you, without realizing it, never created its own framework? Think of a default CSS file (besides the reset) you created to improve the productivity of their projects and this is the main function of the frameworks.
It is important to clarify that the use of frameworks does not replace the need for the designer / developer to develop the CSS from website. It only provides a basis for common formatting elements and optimizes the repetitive work.
For those frameworks are recommended
Using a CSS framework is not a recommended practice for those just starting out, especially by depriving the person of practice and knowledge of the workings of CSS. Also, if that person does not understand CSS as well, you may have problems to solve layout problems caused by incompatibility between the framework and a specific CSS code that you inserted.
Therefore, it is recommended that frameworks are used by those who have a reasonable level of knowledge and understanding of the code, but intends to optimize some of the work using a framework. And this goes not only for those who want to use a CSS framework, but also any kind of framework.
When is interesting to use a Framework?
- Quickly prototyping in HTML
- Websites of large scale and with similar structures (such as portals, blog / magazine style websites)
- Websites built using CMS platforms
- Projects that have short deadlines
- Projects undertaken in teams where there are several people working on the same CSS, and can have a consistent set of coding standards
- Standardization of code between the development team;
- Files modularized;
- Flexible types, generic classes that can be combined in different ways in the page elements;
- Generally have their documentation, which can be consulted by the team in doubt or need to solve a problem;
- Compatibility cross-browser (in most cases);
- You can improve your skills by studying the framework;
- Reduction of time: the developer / designer can focus more on particular aspects of the site developed, because the base is secure and does not need to develop it from scratch;
- Reduces future maintenance efforts if necessary change elements position or change rendering features (font, margins, etc.) on various
- Excessive amount of modifications that must be made to adapt the framework;
- The framework may contain irrelevant codes that will never be used in the project and will be loaded unnecessarily, may decrease the performance of the page;
- Not always the code is well-organized;
- Many frameworks have little semantic classes (eg, span-5).
Some tips to improve the use of the framework
Because classes do not usually show a lot of semantics, try to put significant IDs in the elements position in the page when possible.
You can also choose to use only part of the framework, sometimes using only a few sheets of styles that suit that you needs.
Note: Avoid using multiple CSS frameworks in the same project. This breaks the idea of consistency, because each framework has its standard structure.
How to choose the framework?
- Check if it is really necessary to use a CSS framework in the project;
- Check if the chosen framework code has a structure and organization;
- Check for excessive code which will never be used;
- Check if there is good documentation;
- Check if resources of the framework are appropriate to what you need for the project. There's no point using a CSS framework focused on rendering when it would be more useful a grid framework.
- CSS Frameworks, if well used, can bring many benefits to your projects, just knowing how to explore the potential that they possess.
Bonus - Project Management Tools
Now let's check out some options to quickly create an initial application already with a predefined structure and major libraries and tools on the market.
Figure 2: Brunch
The guidelines of the project Brunch revolve around two main concepts: plugins and skeletons.
The Brunch uses the Grunt tool to manage and execute their tasks.
Figure 3: Yeoman
Developed with the help of pop stars like Paul Irish and Addy Osmani, the Yeoman framework consists of a set of tools geared to quickly create a new web project and manage it during the process. His commands are based on utility Grunt and perform tasks such as minification, lint and image optimization.
The command yeoman server raises a local server and monitors any changes to project files, updating the page in the browser automatically.
Figure 4: Roots
A good alternative to Yeoman is the Roots, which also concentrates a framework set of tools and good practice to streamline the creation and maintenance of web projects.
The standard Roots set accompanies a Jade template engine, the CSS preprocessor Stylus and CoffeeScript language.
The projects are created through the roots command called new. The Roots also offers a live reload command, roots watch, monitoring any changes and updating the site in the browser via a local server.
You can also use different plugins for different libraries and utilities (Sass, ejs etc.).
Packages can be installed via the command roots install. Roots and Yeoman uses the package manager Bower, so you can install any of the packages listed in the repository sindresorhus.com / bower-components.
Hope you liked the article, see you next time.