Comments (10)
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.
Related Issues (20)
- Simplify the font families HOT 1
- Have you successfully combined any baseline grid tools with Concise? HOT 9
- How can I remove these vertical scroll bars HOT 3
- grid="center" tag on small screens HOT 3
- Is v3.4 documentation available? HOT 2
- Overflow on `[container]` breaks `position: sticky` HOT 3
- Concise isn't compatible with postcss-input-range 3.0.1 HOT 2
- Rewrite the base styles
- Delete globals and everything that isn't CSS
- Move base styles to concise-core
- Any plans on form styling (input, select, checkbox, ...) HOT 3
- flex basis and IE11 HOT 1
- Custom unit lh invalid property value with node-sass HOT 1
- No exhaustive documentation
- How to use with rollup.js?
- How do I get Concise installed in a Rails 6 app?
- This is brilliant stuff. HOT 1
- What are the goals for this project?
- CDN is down HOT 3
- Codepens fail in doc HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from concise.css.