Is it easy to simplify grid about concise.css HOT 10 CLOSED

Hi @juanpastas
Thanks for the suggestion but I have tried ungrid.css before, that kind of grid only works for simple layouts, it fails when you add more complexity; You can't handle irregular columns with ungrid.css without making some changes.
I agree that the current grid system is a little complex, but don't worry, currently we are working in the next version and it will include atGrid.css by default. atGrid.css is a grid system I wrote after I tried ungrid.css, it has the minimum code necessary for a full featured grid system and also you can make a layout using custom attributes. https://github.com/jameskolce/atgrid.css

from concise.css.

Will atGrid.css still allow the very nice mix-ins for grids as currently allowed? Those mix-ins make it easy to separate the layout (grid classes) from the content (HTML). I would hate for Concise to lose that.

from concise.css.

Yes, you will be able to use mixins to create grids.
Here you can check the features: https://github.com/jameskolce/atgrid.css the project is in Stylus but Concise will include a Sass port.

from concise.css.

Don't change the grid, a little complexity makes it future proof! Being ready for any layout is the major downfall of small grid systems. Keep up the good work James.

from concise.css.

@abacaj We are going to change the grid but don't worry! We aren't going to use ungrid.css but atgrid.css. I wrote atgrid.css to be as powerful as other standard grid systems with the minimum amount of code (you also will get a nice HTML syntax using custom attributes, or even better with the Sass mixins :) )

from concise.css.

@jameskolce I took a look at atgrid.css and I would highly advise against the usage of custom selectors such as [column~="+2"]

• When not using an element, id or class selector you are using the * selector, you're essentially using * [column~="6"]... the * selector is the worst performant of all in CSS.
• A large application with 1000+ lines of CSS constantly reusing the grid system could perform slower.
• The selector [column] is neither an element, id or class, it is not a compliant CSS selector.
• For atgrid.css to be performant and compliant you will need to include a regular selector before using [column] for example: div[column] { } which is valid css.

Please see: http://www.impressivewebs.com/attribute-selectors/#comment-7467
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors -- Note: Use the universal selector very carefully, as it is the most expensive CSS selector in terms of webpage performance.

from concise.css.

Yes, you're right about the performance of those selectors and I was fully aware of that since the beginning when I started building atGrid.css, but I don't think that's a serious problem. I think the cases where you will notice a bad performance are pretty rare, you would need a HUGE website and in such cases you could consider to use another grid system; v3 is being built with easily replaceable functionality.
The * selector is pretty slow, but it's slow compared with the other selectors, I think nobody could notice the difference of performance only by seeing a website.
With this grid system you will get a beautiful and easy to use syntax for normal websites, if somebody needs extreme performance where every ms counts, he could replace it with another grid system or just change the selectors.

As a side note: I haven't made any benchmark but with atGrid.css you are saving some bytes of data, in the CSS file itself and in the HTML files; So it's possible that you will spend more time rendering the page, but you will get the page faster. So, I think that in a extremely huge website the time to download those extra bytes or kb of the CSS and HTML files is bigger than the time you will spend rendering the page, because I think in most cases the download speed is slower than the rendering speed. But like I said, I haven't made any benchmark this is just a hypothesis, although it seems pretty logical for me.

from concise.css.

@abacaj I just saw the edited part of your comment after posting mine, so give me some minutes to check that.

from concise.css.

The selector [column] is neither an element, id or class, it is not a compliant CSS selector.

I'm not sure about that, you can find selectors like that here and here and if you put:

[column] {
    width : 10px;
} 

In the W3C CSS Validation Service the result will be Congratulations! No Error Found.

Also [column] is the same as *[column] and *[column=""] like .myClass is the same as *.myClass and *[class="MyClass"] (Reference here )

atGrid.css is valid CSS and is not valid HTML by default, BUT... you can set prefix = 'data-' in Stylus (Concise will include a Sass version, don't worry) and now you have valid HTML too. But even invalid HTML for that reason isn't a big deal, AngularJS does the same for example.

from concise.css.

I shouldn't have said its not valid CSS but like you said isn't valid HTML. Either way, none of those are big issues I was just thinking more in performance long term.

from concise.css.