I'm trying to create a couple of static HTML pages for demo purpose. I decided Less 4 CSS framework
For now, I have two pages to demo:
Login page: contains a header and a login form at the center of the page.
Usual suspect page: header, footer, main content.
I don't know how to partition Less grid to fit my requirements. How to divide and partition Less 4 grid?
I'm learning it too. As far as I know, LESS framework and its successor http://framelessgrid.com/ require you to manually write the CSS and HTML first. Then you use Joni Korpi's LESS to adapt it for mobile devices. Will update you as I progress myself.
Check out this answer. Basically, every element is set to certain column widths using .col1, .col2, etc
How to effectively use the Frameless grid?
And I asked this question to understand LESS css.
How to read this LESS css?
Related
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
As monitor resolutions go up we are left with more and more of horizontal space (width) and less vertical space (most monitory nowadays are 16:9 or 16:10, some even 21:9). As such we require the ability to make long texts more suited for greater width. Newspaper like columns are a growing trend.
How to support those in CMS? I currently have an implementation where text is being put inside s and those divs are then decorated with certain classes for instance the Blueprint CSS system ones (span-5, span-8, etc.)
This works but doesn't offer great user experience. Most RTEs can't display those or required that site CSS is linked in. This brings in all other classes and CSS settings which is not optimal.
I've also implemented the option for the user to create a TEXT content item, which typically holds only one piece of text (one column for instance) and user can add those dynamically to the page (just like adding/removing widgets). The problem with this solution is that almost every paragraph becomes its own text content item the result being that the number of those texts grows and becomes unmanagable.
Please post your options as answers. I am actually looking for quite a comprehensive and innovative way of doing this because neither of the CMSs I tried had this solved (DotNetNuke, BlogEngine.net, Ruby's Refinery CMS, ...)
You have some options available to you without resorting to server-side implementations. Some browsers support a CSS3 directive to provide multiple columns.
#div {
column-count: 2;
}
Properties available via CSS are:
‘column-count’, to determine the number of columns into which the content of the element will flow.
‘column-width’, to describe the optimal width of each column.
‘column-gap’, to set the padding between columns.
‘column-rule’, to define a border between columns.
That's the easiest approach, but does not guarantee the same experience everywhere. There are also JavaScript solutions which can create columns based on text.
Here as an example of one: http://www.csscripting.com/css-multi-column/
So, my recommendation would be for a progressive enhancement approach. Use CSS3 options if availble, JavaScript if not, and fall back to a single wide column otherwise.
More information: http://www.alistapart.com/articles/css3multicolumn
This is definitely something that DotNetNuke can handle, especially with the changes coming in DNN 6.1. The changes are targeted a mobile devices, but that doesn't mean that you can't simply use that functionality to provide different views of content based on the width of the screen available.
In personal and small business websites it's not so difficult but when we comes to New sites,Portals and E-commerce sites, where so many content comes on each pages, it's little hard.
How do you keep **HTML semantically correct and and handle big CSS of complex designs like Big portals or News sites?**
How to keep the HTML code semantically correct and Semantic naming convention for css classes and ID?
Is to use CSS grid Framework the best way to handle CSS in this scenario?
While in general you'll want to avoid "div soup", div and span have no meaning, and there's no reason you can't use them liberally in addition to "semantically correct" HTML if they help you organize.
The best thing to do here is to create and then float them right or left . Specify their width . Hence when you try to open them in different browsers they will be aligned properly or if you try to access them in very low or high resolution still they are perfectly aligned . Basically you need to create a nested structure so that all your corresponding elements are aligned respectively .
For scaling and flexibility I would recommend using Twitter bootstrap, its scaffolding feature will give your news site 4 responsive variations which is excellent for phone iPad etc. May take a while to learn and implement but you'll be glad you did it when you see the final results ;)
I'm working on a web app that currently has a table-based layout. Ideally I'd like to go to pure css, or failing that, a hybrid tables-and-css layout* .
I've banged my head against the wall trying to understand css layouts and positioning. The main problem I'm encountering is that, depending on the state of the app, I have different things appearing in a 'section' of the layout -- what might be contained in a div or table. For instance, I might have some text and links, and then after user interaction, there might be a form, a table, some images, different text, etc. Anytime I find a css solution, it is for a fixed-element layout, or works in a specific case, etc. They're not robust solutions, in other words.
From this In Search of the One True Layout, the author about "Vertical placement of elements across grids/columns": "Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering." Is this true? In my app, I can't rely on elements being a particular height.
Do I fall back on tables when I have elements of various hieghts ( which is quite a bit of the site, actually). I noticed that quite a bit of sites done by well-respected people and organizations use tables for layout in certain places, and not just for tabular data! This site included.
The chances are that there are CSS techniques to achieve what you want, but they may not be obvious if using CSS for complex layouts is new to you.
In your case, to 'get it done', I would recommend a hybrid type layout, and not feel bad about using a table to layout the pieces of the application that require those particular behaviours.
If it is particularly complex and difficult than a table might be the best and simplest approach even for the CSS expert.
Dynamic heights are only a problem if you need to implement a special effect of soem sort or a background image and oftent there are ways around that. It really depends on the Visual Design and what needs to be done to make each "block" flexible to use. Sometimes things arent possible but most of the time they are - they jsut tend to add complexity to the markup. But even that added complexity is easier for me to understand than nested tables :-)
My advice if you want to get things done and spend a ridiculous amount of time on css layout, browser compatibility, CSS reset, fonts:
write simple, valid, semantic HTML
use a simple CSS framework (like blueprint). You will rely on a simple grid system for positioning and layout.
add CSS classes to your HTML
add your custom CSS for colors, backgrounds...
Please reconsider using a table layout 'to get it done'; you will be disappointed, especially if you want to add some JS magic later.
I use CSS layouts for my web apps. But, my apps don't have wildly varying information, so I can set the content area and not have to worry about the layout looking "off" because a column is way out of balance with the rest of the content.
If you're having trouble with CSS layout and positioning, I'd suggest tables first, learn more about CSS/HTML positioning, and then convert your layout LATER. I'm sure that it's made for a frustrating experience learning CSS on a "real" project.
In the meantime, get some really good sources for CSS: books by Andy Budd, Simon Collison, Eric Meyer, et. al. Also, go to their blogs and dig into the archives. A really good book for CSS layout, positioning and general use is Beginning CSS Web Development by Simon Collison from APress. All the ins and outs with great working examples.
This question already has answers here:
Closed 14 years ago.
Duplicate: Tables instead of DIVs and
Why not use tables for layout in HTML?
I am working on building a web app using ASP .NET MVC (needs to run on IE 7, FF 3.0), does it matter if I were to use tables rather than css for positioning and design?
As a developer I haven't had a chance to work with css.
Yes, it matters. The most convincing argument that I've used in favor of CSS over tables is that screen readers (for the visually impaired) trip over tabular layout. That's a good argument by itself, but it gets a whole lot better when you take into account the fact that Google reads your web site just like a screen reader would. If you want Google to have an easier time indexing your site, use CSS for layout. Tables are for tabular data.
Apart from all the "tables are evil" school of thought, you'll find it much easier to change the design in the future if you use pure css layout.
In addition, your mark up will a whole lot simpler and easier to "read".
Take a look at css. It shouldn't take more than a day to get up to speed.
Use tables when you really do want to show tabular data.
Otherwise you really ought to be using CSS for your layout.
The main reason is that CSS works better for "unusual" browsers like the following:
Mobile browsers/smart-phones
Search engines
Screen readers for the visually impaired
If you work for the US Government that last one is a legal requirement.
Also see these questions:
Tables instead of DIVs
Why not use tables for layout in HTML?
Yes if your application UI needs to be of high standards. No, if you are just learning to master some adhoc concept or coming up with a quick prototype. Benefits of CSS vs. Tables are well discussed. With CSS, a web site become more agile and accessible, have a look at CSSZen garden.
On a side note, HTML DOCTYPE declaration and validation are equally important. Lest you would spend time fixing styles for every browser