Recently came across a "new" approach to create box in html. Honestly, it is not a new thing, but just not many people have used it or talk about it so far.
After doing a little research and testing on it, I can think of there are quite a number of practical use cases by using this "new" approach. Let me show you that and let's later discuss it a little bit.
Traditional Box Model
The traditional box model is created by defining the box width, margin, padding and border ... etc. Please read it again, "width, margin, padding and border", I'm not crazy, it is related.
If you give it a second thought, the box is created from the inside out.. First by drawing one or two line(s) (width / height ), you created a space. And then you use the padding, margin as "fillers" to expand the space.
Well, I'm not saying the box model is not good. Honestly, I think the current box model is the correct approach to your problems. However, what I'm mentioning here is a potential theoretical alternative.
New Approach to Box Model (CSS)
The new method I'm talking about is something very similar to coordinate system in your photoshop. A box is being drawn by providing 2 coordinates, for example,
pointA ( 100px, 200px )
pointB ( 150px, 250px )
With 2 points, you can define a rectangular shape. But how do you create 2 points in css? Well, it is easy, position attribute has 'top, left, right, bottom', and the 2 points is just (top, left) and (bottom, right).
But the points we are going to define, instead of exact coordinates, are offset. What does that mean?? Well, glad that you ask! Offset is the distance from your browser window.
It also means that your box do not need a width at all, because it is drawing from outside (or defined by the offset in other words ). Plus, you don't need to put IE hacks for this box, since the padding won't affect the box in this case. Yep, it works on even IE 5.5, cool, huh?
And for the Responsive UI part, you can mix and match the @media query, and I believe you can achieve certain degree of Responsive UI even without much help from javascript side, since this model is using offset to calculate the box. Try to view the demo from your smartphone and change the viewport. Imagine what you can do with @media query in the demo.
Well, I'm talking too much, let's do a demo then :)
Note: This demo is a simple demo for drawing box model using offset. There are so many use cases on that, and it is only limited by your imagination!!
Note: This new approach by no means is better, it is just a different approach to solve the same problem, used it as you will.
After doing a little research and testing on it, I can think of there are quite a number of practical use cases by using this "new" approach. Let me show you that and let's later discuss it a little bit.
Traditional Box Model
The traditional box model is created by defining the box width, margin, padding and border ... etc. Please read it again, "width, margin, padding and border", I'm not crazy, it is related.
If you give it a second thought, the box is created from the inside out.. First by drawing one or two line(s) (width / height ), you created a space. And then you use the padding, margin as "fillers" to expand the space.
Well, I'm not saying the box model is not good. Honestly, I think the current box model is the correct approach to your problems. However, what I'm mentioning here is a potential theoretical alternative.
New Approach to Box Model (CSS)
The new method I'm talking about is something very similar to coordinate system in your photoshop. A box is being drawn by providing 2 coordinates, for example,
pointA ( 100px, 200px )
pointB ( 150px, 250px )
With 2 points, you can define a rectangular shape. But how do you create 2 points in css? Well, it is easy, position attribute has 'top, left, right, bottom', and the 2 points is just (top, left) and (bottom, right).
But the points we are going to define, instead of exact coordinates, are offset. What does that mean?? Well, glad that you ask! Offset is the distance from your browser window.
It also means that your box do not need a width at all, because it is drawing from outside (or defined by the offset in other words ). Plus, you don't need to put IE hacks for this box, since the padding won't affect the box in this case. Yep, it works on even IE 5.5, cool, huh?
And for the Responsive UI part, you can mix and match the @media query, and I believe you can achieve certain degree of Responsive UI even without much help from javascript side, since this model is using offset to calculate the box. Try to view the demo from your smartphone and change the viewport. Imagine what you can do with @media query in the demo.
Well, I'm talking too much, let's do a demo then :)
Note: This demo is a simple demo for drawing box model using offset. There are so many use cases on that, and it is only limited by your imagination!!
Note: This new approach by no means is better, it is just a different approach to solve the same problem, used it as you will.
No comments:
Post a Comment