I'm looking into css frameworks, mainly for resets, structuring my projects better, etc.
I found Html Boilerplate (which i'm using). I now see frameworks such as blueprint and 960gs, they claim a grid based layout. Could someone explain what a grid based layout is? How does it work?
I would recommend you reading Which CSS Grid Framework Should You Use for Web Design? over on NetTuts.
It goes into depth and answers the questions you have, as well as a comparison of some of the CSS frameworks out there.
They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.
Quoted from the link I attached with regards to print publishing layout grids. But in the context of the Web world (CSS) grid systems allow you to create complex CSS grid layouts instead of html table layouts.
A bunch of pre-defined CSS rule-sets, that you can use the class names from to organise elements into grids of various sizes.
The easiest way to grok the idea is to just try using something like blueprint of 960gs.
It makes it easier for you to place boxes in grids.
If you want to see how it works, I would recommend you to visit http://960.gs/ and click on the 'show grid' buttons above the images.
Related
I am a newbie in web design. Now I am frequently using float property to design my layouts. I also have learned a bit both about grid system and flexbox system. My question is which method should i use and why, is there any other method other than floats, grids and flexbox to design the layout of a website? If so please explain.
As others have stated, no single method is overarching. If there was one, we'd all be using it and nothing else.
However, it sounds like you might be asking if flex is better than grid, grid better than flex, floats better than grid, etc. I use a combination of all of these in most projects I work on. They each have strengths and weaknesses that need to be utilized or avoided in certain situations.
You will, however, need to be aware of browser support (or lack thereof) and will need to provide fallbacks for those cases (e.g., CSS grids and IE11).
The best method to design your site layout is to start with a piece of scratch paper and a pencil. Draw rough drafts of where you envision the different parts of the site, what page leads to another page, etc. Then figure out how to make it all functional.
There is no one method of coding, you develop your style through experience using a combination of any of several coding languages. Decide first what you want to see on your page, then look for a solution. It is a process.
Introduction
HTML5 tools such as deck.js or reveal.js seem great for presentations, including scientific presentations where good-looking mathematics can easily be added with MathJax.
Closely related to scientific presentations are printed posters (examples), and I am wondering if it would be possible to use HTML & CSS to produce them. This seems to me to be a good idea because:
Images, tables, mathematics etc can all be easily included
Typical grid-based layouts are commonly in both posters and HTML/CSS
The content would be well-separated from the presentation, making re-use easier (e.g. between presentations and posters)
A copy of the poster could be shared on the web with little modification
The problem is that most CSS frameworks (e.g. Bootstrap) allow for fixed-width layouts but assume that the page will scroll down as far as necessary to fit all the content. On the other hand, for a poster the layout needs to behave similarly in the horizontal and vertical directions, with a grid which fills the exact dimensions of the paper.
Questions
Are there any CSS frameworks that allow easy layout of content on a fixed-width & fixed-height 2D grid?
Are any special techniques needed to get from the HTML page to, say, an A1 size PDF?
Edit:
I know about LaTeX and have used it to make presentations and reports. It's possible to use it for posters too, but my experience has been that it very quickly requires a lot more tweaking and knowledge if you need to alter the most basic poster layouts.
It is surprisingly straightforward to roll out your own CSS/HTML template for a printer poster. It is much easier than LaTeX with its weird defaults and obtuse treatment of graphics, layout, and color. And it is much neater than PowerPoint as it provides a lot more consistency and "reuse/programmability" in the creation of the layout.
First of all, you need to set the size of your paper:
body {
width: 48in;
height: 36in;
}
Then you need some generic layout:
<body>
<div class="poster">
<h1 class="poster-title">...</h1>
<h2 class="poster-authors">...</h2>
<h3 class="poster-affiliations">...</h3>
<hr class="fancy-line">
<div class="container">
<div class="row">
<!-- A bunch of Bootstrap columns (but here it would be a good place to
use CCS Grids too) -->
</div>
</div>
</div>
</body>
And if you like the defaults of a CSS library like Bootstrap, you can use it for most of the components (I particularly like the panels).
You can also use some newer flexbox styling for a neater layout
I have template based on those ideas that I would be happy to share (and a somewhat longer description of the tools I used)
And here is an example of a poster built with it
It is not a ready to use CSS framework, but importantly, it is just 20ish lines of custom CSS you can put on top of any CSS framework.
Why don't you try LaTeX. Its not html or css, but its code based and you can create the kind of example posters you shared and some really awesome presentations.
All you have to do is download LaTeXilla (Linux).
There are plenty of LaTeX poster templates available.
I'm a coder coming from the pre-CSS era and trying to find a powerful but simple CSS framework, that would let me create any kind of layout with boxes I want.
I already have a wordpress theme so I'm looking for something to include into the theme.
I looked at ez-css which looks nice, but it just seems to do the box layouts, and I was wondering if there exists a framework that comes with many different snippets for typical layout tasks, like a box with a small image + paragraph text, etc.
I've looked at wordpress themes like pagelines, builder and headway but don't like them very much because they lock me into their themes, and they seem quite fiddly after playing with them.
Thanks
B
http://twitter.github.com/bootstrap/
You could have a look at -
blueprint - http://www.blueprintcss.org/
or
960 Grid System - http://960.gs/
Have you taken a look at http://960.gs/?
It would be easier for you if you search separately for a CSS Framework and after for a blank WordPress Theme.
Most of these "CSS frameworks" are not really frameworks because CSS is not like JavaScript or PHP, so don't bother spending time with them.
What I will suggest is to get a premium html/css theme and modify it yourself and turn it to your own custom framework.
I want to design my webpage layouts only using div tags. But i'm not good at it. I need to understand the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.
Is there an existing framework that satisfies the needs of your projects with minor modifications, or have you developed your own along the way? What do you recommend for someone trying to make that decision with these priorities:
CSS reset
Attention to typography; baseline grid
Semantic classes
Accessibility
Lots of "Helper" classes: e.g. .demphasized, .errormsg, .readmore etc.
Grid system, unless it conflicts with #3
Not a priority:
- Fluid/Elastic layout support
- Type in ems/%s
Thanks in advance.
No framework out there is going to do everything you want.
But Blueprint should have enough to get you started.
I have managed to get pretty far with these:
960 Grid for layouts
Blueprint
The jQuery UI CSS Framework
YAML
Elastic css framework can do it almost all you want, except baseline (yet) but you can integrate it including your baseline.css, got to elasticss.com.
No cryptic classnames, support for combinig classes, centering x and y, same height, seo friendly (support for templates and adaptive layouts)
lots of helper classes, and definetely non intrusive with your classes, or absolute positioning. all for free and for all browsers :) hope you like it.
and yes it supports fixed, fluid, elastic layouts, and you just can combine them to get advanced stuff, you also get unlimited nesting, so elastic wont let you down after first level
I recommend you Siimpler it's a simple html framework with ready made file/folder structure but your can configure it for you needs. For exp. you can choose between CSS reset and Normalize.css.