I am playing around with designing my own grid system. I decided to go with something that splits columns on percentage i.e. 10% 20% 30% etc. So I have Col-10 for a column that is 10%.
However, instead of doing a lot of coding, I want instead to use some sort of additive method. Think of it like money.
You have 100 note, a 50 note, a 20 note, a 10 note a 5 note and a bunch of small coins usually of the same denomination 100p coin, 50p coin, 20p coin, 10p coin, 5p coin and of course the all important 2p and 1p.
There is no 77 note. That would be made of 50, 20, and 5 notes, and 2 x 100p coins.
I want to do likewise with CSS. Instead of defining and using a specific width, lets say I want a column of width 77%. I would like to be able to do a class like this:
<div class="Col-50 Col-20 Col-5 Col-2">Content</div>
and in my CSS I would have these classes defined according to their respective percentages.
My problem is. The last class here, would be all that is applied. giving me a 2% column instead of the 77% column I intended.
Is there any magic CSS trick that will allow me to do some sort of additive % like what I am thinking or is this a JavaScript the only option.
I could do this in JavaScript but I want to avoid using JavaScript / jQuery or other code apart from HTML5/CSS3 at all costs because I want to remove external dependencies. While rare, it is still possible to disable JavaScript in browsers and I want my system to work without it if possible.
I also know I could us SCSS / LESS etc but ultimately the end result would be a very large CSS file filled with almost every % between 0 and 100. This is not my goal.
I don't believe this is possible with CSS alone. CSS is a styling language, so (with the exception of calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc) it doesn't have math calculations. It really isn't designed to compound values in that matter. Even a preprocessor like SASS/Less, I don't believe, would be able to accomplish that since the preprocessing is on the CSS side, not the HTML side. Perhaps an HTML preprocessor?
Either way, I'm not sure I follow the benefit of the class; adding 4 classes just to specify a width seems superfluous.
Maybe if they come out with "Compounding Style Sheets"? :)
no it isn't possible, At some point you would have to have 100 classes for the width. If you are set on staying css only. I would write a CSS generator that basically loops through and creates the redundant code and saves it to a file for you. Then you could go in and add to the file as needed.
Related
I am a back-end developer and new to Foundation as well as to CSS. I have seen few of the front-end developers generally struggles in converting a design into CSS if the designer has not considered the grid structure while designing. This generally happens because the 12 grid (default) column structure doesn't provide the flexibility to place the elements exactly as desired.
Since, Foundation provides us to use custom grid count, is it wise to use it? Most of the grid structure uses 12 grid column because 12 is a good number. What if we use a 60 grid column structure with the same gutter as we would use it for 12 grid (say gutter is 20px)? I believe it should give us more flexibility to place the elements in place.
Let me explain. Suppose we need a three column structure for my webpage, with a ratio 3:3:4 and I do not want to leave any offsets. I am not sure how can we achieve this using 12 grid columns except for may be positioning the elements manually. But in 60 grid column, we can easily achieve this by using large-18, large-18, large-24, with gutter as required, say 20px.
Some may say that if we use gutter as 20px in a 60 grid column structure, the gutters between the columns would take most of the space of the webpage. But no, gutters are imaginary till we use the actual columns. So here space for only 3 gutters will be used and rest will be the columns with the ratio 3:3:4.
This is precisely my understanding about the grid structure. Can someone with more knowledge let me know, if whatever I am assuming actually makes sense or are there some other points which I am missing and may haunt me if I use a 60 grid structure?
Great questions.
I'm definitely no expert, but I have used Foundation quite a bit. I'll assume you're using Foundation 6. There are a couple ways you could go about accomplishing these tasks, and I've used both successfully in projects.
First way is to change the default grid to fit as many columns as you feel comfortable with maintaining. Personally, the most I've ever used is a 24 column layout. It's flexible enough to fit most layouts. Change this in your _settings.scss:
$grid-column-count: 24;
If that, generally, won't be flexible enough for you, you can use the regular grid, and also make a custom grid and call it with a class. That way, you've got the regular 12/24 column grid to use for most pages, but you can call on the custom grid for special cases. http://foundation.zurb.com/sites/docs/grid.html#grid-row
#include grid-row($columns, $behavior, $width, $cf, $gutter) { }
Lastly, if you don't want to use any of that special stuff, you can use percentages in your columns and omit the standard large-# column classes. So you custom scss would look something like this: http://foundation.zurb.com/sites/docs/grid.html#columns
.special-column{
#include grid-column(30%);
}
.slightly-larger-column{
#include grid-column(40%);
}
Not sure if this answers all your questions, but sounds like there's just some confusion as far as best practices? You can make you grid as large as you want, but you'll have to maintain it either way.
This is my code:
<table>...Some content...</table>
<table>...Another content...</table>
I want to put the second table on top of the first table. This is to be used as an email template (in some clients position and margin are not available).
Those are the only two options available (outside of transform, which definitely won't work if position isn't available) that will allow one element to invade another element's space. If you can't use position or margin, then you're out of luck, and you need to re-evaluate what you are trying to achieve and why. Any chance you could do this with images?
There are always ways...not always elegant, but when you have limited options, 'works' is often all you really need. IMO, creativity is as much about solving a problem with limited options as it is thinking 'outside the box'.
Most email clients allow you to set 'height', so simply wrap the first table (the background) in a div and give that div height:0px;. the table will overflow the div, but the next element won't respect it's space because it has 0 height, and will effectively be layered in front.
http://jsfiddle.net/L0d3tnzu/
If you want the size of the tables to match exactly, you'll probably have to explicitly set heights and widths, but the fiddle above illustrates the basic concept. Hope this helps!
EDIT:
Based on the additional info in the comment (the second table should only partly overlap the first table) here is an updated fiddle: https://jsfiddle.net/acq3ob6y/1/
EDIT #2:
Dang. Outlook switching to the Word/Office rendering engine for HTML/CSS might be the only way possible to get WORSE than the IE version. Sigh. (Thanks to #Gortonington for the comment/clarification, though!)
Ok, then, the idea of a background image is only a problem for retina displays (if you want them to be all crisp and beautiful and retina-ie), and retina devices are going to be handling CSS in a more modern way (hopefully!), so how about this as a solution: Media Query targeting device resolution loads CSS with the double-size img and uses css background-size to constrain it: http://jsfiddle.net/tcyjo7ok
Third try is a charm? At least the list of options is growing...
The only way to overlay two elements across email clients is through use of background images. Even this can be broken in some clients and requires a lot of conditional and reiterate code (backgrounds.cm is good resource for email bg images).
This is the only option that will display in MOST clients. Even this is still very restricted and not very agile to use (but that is true in ALL email coding). Most other techniques will only work for a couple clients and break completely in all others.
I have to implement this grid of divs. It won't change often, but it may at some point (meaning a box may be removed, and another resized). Each black box will eventually contain an image or a word, but that's not important.
How do I pull this off? Is there a more elegant way than by absolutely positioning every single box and manually entering every X/Y/width/height?
A grid based approach would be my recommendation.
Something like: http://960.gs/
EDIT (some more options)
http://developer.yahoo.com/yui/grids/
http://cssgrid.net/
I have a dynamically generated form that needs to gather several numerical values from a user that totals 100 (%). I thought about writing a script/algorithm that adjusts the remaining values of several text fields - so that when the user changes one value, the remaining values dynamically change (so that the values always total 100).
However, instead of text fields, I would really prefer something more user-friendly like sliders that move when one slider is adjusted or some other user-friendly widget (like an adjustable pie chart(?) that always totals 100%).
The script needs to work in late version of Firefox, Chrome and IE. I read somewhere that HTML5 sliders don't work in Firefox.
I am open to different solutions.
Am not getting your question clearly, assuming that you need a value slider which a person will slide and automatically the bar will increment every time by 1, so try using jQuery and Ajax, will suit your requirements, you can check out few over here.
Sliders work fine in FireFox - try http://www.colorpicker.com/
You can use the jQuery UI slider, if you like. You can register a custom function on change event which easily adjusts the other sliders.
So in the end you got something like this (some pseudo-code in it):
$( "#slider1" ).slider({
change: function(event, ui) {
var i = 100 - value_of_slider1 / number_of_sliders_remaining;
$("#slider2).setValue(i);
$("#slider3).setValue(i);
}
});
Of course this can be implemented a lot more sophisticated. Just to give you the basic idea. Depends on your markup.
I have not had problems with sliders in FireFox.
You can have the various sliders/input devices calculate on each other to get the output by division or whatever, then have the last/smallest number be subtracted rather than divided from the total. This way your other calculations will be accurate to the accuracy and the least significant value can make up the rest.
I want to add a variable to a css class. Is it possile? I mean I want to do something like the following:
#box[i]
{
padding: [i]px;
}
(for example: div which is name "box10" is supposed to get padding of 10px.)
I understand this may not be the right syntax, but I hope you can help me achieve the concept setting my class' properties up to a variable value.
It's currently not possible to use variables within CSS, however there are a number of other options available.
The simplest option would be to create a CSS style for each of your box IDs.
You could use JavaScript to add padding to the box, but it is not sensible to include presentation within logic. In jQuery, a loop to do this would look like (assuming your boxes are ):
$('div[id^=box]').each(function() {
$(this).css('padding',this.id.substr(3)+'px');
});
You could use a pre-processor tool, such as LESS to set variables in your CSS; but you would still need to specify each selector.
Setting padding based on different box ID values seems like an odd problem to have. It may be worth taking a look at whether your approach to building this page is correct. Don't forget every ID on the page should be unique. If you wish to use the same ID on multiple elements, you should use CSS classes.
If you are trying to create a box sized based on a number of results (such as poll results), then it would be easier to use the style attribute and set a width/padding on each element rather than create an ID for every possible outcome. For example:
<div style="width:10px"></div>
No, you can't do that with pure CSS, but you can use less for that.
CSS variables are introduced only in W3C draft at this point and didn't supported by browsers yet.
u could just use javascript, to detect the "name" and then get the substring so u have the number. then just make something like this:
var box = document.getElementByName("box10");
box.style.padding = box.name.substr(3) + "px";