Responsive Web Design Tutorial – 4 – Flexible Grid Layouts Dont Suck

Visit my website at https://www.thenewboston.com/ for all of my videos and tutorials! Have questions or looking for source code? Check out the forum at https… Related posts: Responsive Web Design Tutorial – 6 – Media Queries Responsive Web Design Tutorial – 2 – Why Pixels Suck Responsive Web Design Tutorial – 9 – Bottom Menu […]


Visit my website at https://www.thenewboston.com/ for all of my videos and tutorials! Have questions or looking for source code? Check out the forum at https…

Related posts:

  1. Responsive Web Design Tutorial – 6 – Media Queries
  2. Responsive Web Design Tutorial – 2 – Why Pixels Suck
  3. Responsive Web Design Tutorial – 9 – Bottom Menu CSS
  4. Responsive Web Design Tutorial – 8 – Creating a Core Template
  5. Responsive Web Design Tutorial – 10 – Bottom Menu HTML

Popular Posts


24 Responses

12.11.14

Keep up the good work! I imagine these tutorials will help me massive
amount! 

12.11.14

Wow, I’m not sure why I never though to use percentages with margins. This
will be super useful. :D 

12.11.14

I’m just here to say that I saw these 4 videos in my sub box and love the
titles

12.11.14

Please do BackboneJS and RequireJS tutorials plzzzzz

12.11.14

How do u add a moving background to a webpage and have it repeat?

12.11.14

Do another survival series you got way more views on it.

12.11.14

I’m liking this series!

12.11.14

Bucki tutorials: sucks or not

12.11.14

Using CSS flexbox is a far better technique to achieve this.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

12.11.14

Love this series so far, definitely going to come in handy when designing
sites. Can’t wait to see more.

12.11.14

sublime costs a lot of money, notepad++ is good. why would he use sublime
then?

12.11.14

are u serious notepad++ ? plz use sublime text

12.11.14

Thanks for this series man! I tried using Bootstrap some time back, but
didn’t like the whole chopping and changing of the default classes to suit
my custom design.

Have you taken a look at web components and Polymer, yet? A nice thing is
that, once you import “polymer.html”, you can just use attributes to
configure your page’s flex layout :) 

12.11.14

I hope bucky is going to use sublime text editor sometime.

12.11.14

hey i would be interested in a responsive web design tutorial on bootstrap
grid :) as always, good show bucky!

12.11.14

when will u going to upload tutorial 5 ???

12.11.14

great tuts, been looking for something like this for a while…

12.11.14

really nice, just in time (building my first site !)

Why not to use flex box nowadays? The latest browsers support it:
http://caniuse.com/#feat=flexbox

And it’s much better ;-) )

12.11.14

publish on yesterday~!

12.11.14

Please also teach people to use proper syntaxes! instead of having a
div#menuBar you have nav#menuBar. 

12.11.14

Voip tutorial?

12.11.14

This is decent for a beginner’s tutorial on responsive pages, but while
this video teaches how to make responsive button bar, it’s not very
scalable. If the user adds more buttons later on then additional
calculations and css changes are required every time a change in the number
of buttons is made.

One solution is to make the container element with a display of ‘table’, a
‘table-layout’ of ‘fixed’, and set the display of the buttons to
‘table-cell’.

This way you can add and subtract the number of buttons at will without
having to calculate and change the css every time a change in the number of
buttons is made.

Hope this helps someone. Thanks.

Leave Your Response

* Name, Email, Comment are Required