I've been working with jQuery and HTML for a long while but don't have a ton of CSS experience. I have been searching around and have found that with CSS you can make a lot better layouts than with the old school Table layout methods.
However, everything i've been finding appears to be a lot more work and sometimes doesn't seem to be as compatible.
I want to make a layout with a
header/sidebar/ and main detail area.
I have to agree with you, creating a layout using CSS is very difficult. However, there is a library similar to jQuery is to JavaScript call Twitter Bootstrap that makes your goal extremely easy. I highly recommend looking into it.
Twitter Bootstrap - Scaffolding
<div class="row-fluid">
Header
</div>
<div class="row-fluid">
<div class="span2">Side Bar</div>
<div class="span10">Detail Area</div>
</div>
Related
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
I am new to jquery mobile. Now I want to implement table with multiple columns for tablet UI. How can I implement this multiple columns table concept by using jquery mobile framework. Please guide me if any one did this concept.
Thanks in advance.
Try adding something like this:
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
This is a grid layout. There is not something like table in JQM, but it may imitate it.
Try this link: jQM Grids
Try out the popular plugin - 960 Grid http://jeromeetienne.github.com/jquery-mobile-960/
It allows for a lot more flexibility in the way you arrange your grids with flexible widths, etc.
By the way, I am not advertising :)
I'm an engineer. All my designer friends keep telling me to use a grid whatever that means.
I want to create a layout similar to facebook (3 column, with a fat center column. How do I do that while using a grid? Where to even start? Thanks
960.gs is a good system to use.
And, SmashingMagazine has a good round-up of examples, articles, tutorials, tools, etc., about grids.
You can use a CSS framework (I use http://960.gs ) to create a grid. If you were using 960, you would do something like the following:
<div class="container_12">
<div class="grid_3>
Leftmost
</div>
<div class="grid_6>
Middle
</div>
<div class="grid_3>
Rightmost
</div>
</div>
There are other grid systems, this is just one I like the best due to it's lack of learning curve.
I'm thinking of using Nathan Smith's 960 Grid System for layout in the ASP.NET MVC site that I'm writing.
I've noticed that all examples of 960.gs usage show HTML that looks like this:
<div class="container_12">
<div class="grid_12">
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1">
</div>
<!-- ... -->
</div>
I don't particularly like putting all those grid values inside the HTML itself - it creates clutter and with a lot of content, that can become hard to manage.
Is it possible to somehow put those container and grid values inside an external file that applies grid values based on the id or class attributes of certain tags?
You can't externalize those values. While it would be possible to merge the names into the file such that the names that you designate to the divs are multiple CSS selectors with the grid (i.e.: .sidebar, .grid_3 {...}), this is impractical and makes it nearly impossible to manage and maintain the code. The readability and maintainability that you'd be sacrificing is much more valuable than the semantic goodness that you'd be gaining.
The 960 grid system is pretty ugly on the back end. What you give up in niceness, you gain in simplicity and efficiency of development. Perhaps a different column-based gird system would be better. Consider something like Frame: http://frame.serverboy.net/ (</shameless_plug>) or Blueprint CSS.
Hope this helps.