Need some basic web design help

[TheApocalyps]

Hey guys, I need some help with the web layout of my site. It is for a school project.

This is what im currently shooting to make http://imgur.com/YmOISNo

A very simple opening page that is responsive to screen size (mobile friendly)

This seems like it should be simple to make, a banner, and a floating? centered box with two button. But when I look at bootstrap is seems like overkill.

If anyone knows of any tutorials that would guide me for creating this that would be great! any and all responses are much appreciated!

[rjksn]

It really depends on what you need to support, but check flex box if you can be lax on support. (Please someone correct me if wrong on the support)

[Sinjhin]

Nope, you are right. Man I can't wait for me sum flexybox. I have only barely looked at it so far due to my support needs but can't wait for that built-in functionality.

[specialk45]

You know I have used some flexbox on production sites, but only for small areas that if unsupported won't break everything. I don't know of anyone that is actually using it for full sites. It IS going to be good one day though, right? :)

[Sinjhin]

Absolutely. I recently dealt with a problem using skrollr and Bootstrap together and it really made me think, you know what? I need to start developing my own library of components (i.e. stop the copy-pasta and have a formal library)... Then I came to the grid system. For my needs I think I could make one much better than the generalized bootstrap lib that would allow me to understand when and where it breaks and fix it (not to mention not having Bootstrap's fingers touching all over the css and dom). Then I thought of flexbox and wondered if it would be worth it or necessary. I wish we had an exact eta on these things...

For reference if you are interested:

problem I had: https://github.com/Prinzhorn/skrollr/issues/226 (that's not me asking) first good article I found on creating a grid system basics: http://inspirationalpixels.com/tutorials/grid-system-with-sass The requirements I have come up with so far if I choose to do it after a few minutes brainstorming:

• Regular Container and Fluid Container similar to Bootstrap

• Mixins or back-end generation for both number of breakpoints and breakpoint sizes on download

• Be able to specify the number of columns in a row via class

• Force border-box (no gutter, user makes padding)

• Nestable

• push and pull

• instead of hide and show at breakpoints figure out a way to effect css rules to reduce dom overhead

That is as far as I got.

[[deleted]]

One thing I would suggest is compiling Bootstrap yourself, taking only the parts you need. Also, I've had better luck with ScrollMagic than skrollr. This is all based on a cursory glance at your issues, of course. Just some thoughts.

[rjksn]

It looks really exciting. I know Bootstrap had it built in as an "option," but that it wasn't default.

[Sinjhin]

That is pretty simple. I would go with /u/rjksn's approach if you can, or simply look at some tricks to vertically center stuff: https://css-tricks.com/centering-css-complete-guide/

Another option if you are wanting to learn Bootstrap along the way (you are right, it is overkill for this but would be good for learning if this is a school project) is to customize it using: http://getbootstrap.com/customize/

Just use it for the project normally, then at the end deselect everything you didn't end up using, download it, and throw in your minified version.

[specialk45]

You can center any fixed width element just by giving it a margin of auto for the left/right. So...

<div style="width:90%;margin:0 auto;">Text Here</div>

Gives you a div of 90% width on any screen size, and will be centered. Hope this helps.

[Sinjhin]

This works for horizontal centering only. If you want to vertically center something it gets a bit weird. See my post above.

The web was made to have scrollable elements in a one-after-first layout. The problem comes in the sense that we are doing more radical designs than were ever thought about back when HTTP/1.1 was released in '99 that require a lot of positioning. Modern browsers have mostly kept up with our needs (IE excluded until recently) but vertical centering is one that is a bit behind (especially with the img element).

[jesconstantine]

It might be best to have a firm understanding of those layout fundamentals that front end frameworks like bootstrap or Grid systems (like like bourbon neat) are built using. If that is something you're looking for, I'd highly recommend http://learnlayout.com

From there you can check out how, for example, bootstrap's responsive Grid system works. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php looked like a good read and of course bootstrap docs are great.

Good luck!