Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS Frameworks: Use or not use?

In this article we will see some tips about using CSS frameworks and also see some project management tools.

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.

Example of one CSS Framework

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

Advantages

  • 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
  • elements.

Disadvantages

  • 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

There was a time that our web applications and websites were comprised only of HTML files and one or another CSS and JS. Today we have preprocessors CSS, JavaScript validation tools, grids, boilerplates, and bootstraps even JavaScript on the server.

There is also an increased amount of external libraries and files. The CSS files were modularized and JavaScript has to be (much) more accepted, even gaining a more "friendly" language CoffeeScript.

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.

Brunch

brunch.io

Brunch

Figure 2: Brunch

The guidelines of the project Brunch revolve around two main concepts: plugins and skeletons.

The plugins involve languages ​​(JavaScript, CoffeeScript, LiveScript etc.), Templates (Handlebars.js, Jade, Mustache etc.), CSS preprocessors (Sass, Stylus, LESS) and validators (JSLint and CoffeeLint).

Skeletons define the JavaScript framework and the set of standard tools. The skeleton pattern creates a project using the HTML5 Boilerplate, Chaplin with Backbone.js, CoffeeScript, Stylus and Handlebars. Other skeletons include a set with pure JavaScript, Sass and Twitter Bootstrap, one with Backbone and CoffeeScript, and even one with AngularJS.

The Brunch uses the Grunt tool to manage and execute their tasks.

Yeoman

yeoman.io

Yeoman

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.

A project created with Yeoman, using the command yeoman init, comes with some special skills. You can, for example, writing code in CoffeeScript and Yeoman is responsible, in the background, to turn it into JavaScript. The same goes for writing CSS with Sass / Compass.

The command yeoman server raises a local server and monitors any changes to project files, updating the page in the browser automatically.

Another important command is the yeoman build, which creates a version ready for production, with all the scripts and styles validated. The Yeoman also optimizes all images using special libraries. The command also build demand for bundles and concatenates JavaScript and CSS files.

Roots

roots.cx

Roots

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.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login