imanfakhar / bootstrap-3-grids Goto Github PK

#Bootstrap 3 Grids

Bootstrap 3 grids, devices, and downloads for designers and developers.

##Website

http://mspangenberg.github.io/Bootstrap-3-Grids/

##Bootstrap 3 Downloads

Default Bootstrap Downloads

1. Bootstrap 3 Bookmarklet
2. Core Bootstrap 3 Site Template
3. Bootstrap 3 Default Grid Design Assets
4. Bootstrap 3 Default Device Grid Templates

Customized Bootstrap Downloads Page must be using the custom Medium Small Grid CSS. An explaination about the use and need for a Medium Small Grid can be found HERE.

1. Custom Bootstrap 3 Bookmarklet with Medium Small Grid
2. Custom Bootstrap 3 Site Template
3. Custom Bootstrap 3 Design Assets

##About

As the world of devices and resolutions continue to vastly expand, it is becoming increasingly difficult to translate design into code quickly and efficiently. How can a designer start with a fixed document size in Photoshop when the medium of web is unbound by a fixed width? On the other end of the spectrum, how can a front-end developer accurately assemble a universal layout when it is created with an optimal single space in mind by a designer?

I work as a both a designer and front-end developer and this disconnect between creation and implementation literally made my brain ache. Being a huge advocate of efficiency, there had to be a better way than designing hundreds of layouts and sitting next to a developer while it is optimized for each viewport. Finally, I found a solution using a framework called Bootstrap. Bootstrap, version 3 at time of writing, "is a sleek, intuitive, and powerful front-end framework for faster and easier web development." Design is not inherently mentioned in their description as its primary objective is to provide a skeleton and resolve repetition for developers.

At this point, the developer side in me was sold on Bootstrap, but raised the question as to how this is beneficial to me as a designer. How do I even start the design? The framework introduces four 12 column grid sets that spanning the vast world of resolutions: extra small, small, medium, and large. Simply said, four designs using the grid sets (if you choose to do unique designs for each) are all you need to have a truly responsive experience. More than ever, there is need to move into a world where experiences are device-type-agnostic, and simply optimal for the resolution of the device. Death to user agent sniffing "m-dot" websites!

To me, Bootstrap addresses a team's need to rethink how they create a single experience using a mutual language that can be understood by designers and developers alike. I have created this site as a resource for teams to come together and have all the resources needed to understand how to use Bootstrap as an efficient tool. Explore the site! In the end, a framework in general is a great starting point to get the communication going to work more efficiently. It is a joint decision!

Matthew Spangenberg

• Website
• Twitter
• LinkedIn
• Email

Chris Abrams

• Website
• Twitter
• LinkedIn
• Email