Download Full Package including 8-, 9- and column files. Buy me a coffee Donate via PayPal. Why should I work with a grid system? When designing a website or an app, your focus should be the optimal navigation path of your users. Now with the grid you can place all your elements into rows — perfectly aligned and with optimal and even spacing between all columns.
Even on widescreen layouts and drafts. The column grid is divided into portions that are 60 pixels wide. The column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment.
There are printable sketch sheets, design layouts, and a CSS file that have identical measurements. For those more comfortable designing on a column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case 'i' or 'l' might be easily missed. This Bootstrap Grid System is based on its px responsive grid and comes with 3, 4, 6 and 12 columns options.
Here is a set of templates, in both Photoshop and Illustrator formats, that are based on Bootstraps default responsive grids. You can use these grids to set out the guides before you start designing. Refresh Boston — 16 col. Right From the Heart — 16 col.
Black Estate Vineyard — 12 col. Simplified Safety — 16 col. A Better Office — 12 col. Brand Rich Media — 12 col. Pixel Dreams — 16 col. Formalize CSS — 12 col.
To the right is an example of how the code works. The container specifies how many total columns exist, either 12 or If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. This makes it a highly flexible base number to work with. Their work spurred me to create my own. In addition to design template files, there are app plugins for Photoshop and Fireworks included in the official download.
Additionally, DMXzone has created a Dreamweaver extension , which is available free to members of their site.
0コメント