WebDesign – The Grid

When I begin a new project, half the battle is starting on the right foot. I imagine others feel the same, as they navigate countless tools and blogs trying to work out what is new and recommended. However, no matter what problem we’re trying to solve, a few elements are always necessary, and one of them is a grid system.

Responsive behavior

The grid supports mobile devices and has the following four break points:

In most cases, a home page will consist of several “sections” (eg. Blog, News, Images …) and a sub from a content block with or without a sidebar on the right.

As the screen is smaller, the blocks positioned on the homepage under another. On a sub-block of the content remains the top stand. The elements of the sidebar will abide by under the block content.

With these basics in mind lets do some coding.

HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

CSS3

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.

Now you can upload you files to your web server and see what happens when you resize your windows size.

Do you have any questions? Leave a comment down below!

Donate

Since October 2015, StudioPieters® has been writing this blog. Help accelerate its development with a small contribution! StudioPieters® is open source, and 100% free . Please consider donating to StudioPieters® before starting the fun of building and learning. StudioPieters® is a non-profit organisation devoted to making creative use of electronics accessible to everyone.