Better documentation on usage

[igorsantos07]

I randomly found the project through an issue about Semantic.gs being dead... And loved the solutions you got with this project (:

However, I got confused trying to understand how to use it. Would be nice to have a section in the readme indicating clearly which file to @import and what can be configured and stuff, without having to mess around with the example files.

[laughingwithu]

Thanks for the complement, and sorry for the lack of documentation. It does appear to be something I need to work on...

The good news is that I am about to push through some changes to make things easier. but in the meantime the only file which is required is the config.less file as this imports all the other necessary less files. It works on the same principles as the semantic.gs. The config file should explain the settings and there is a quick example in issue #20 on this.

If you are in a rush I highly recommend having a look at inuit.css by Harry Roberts which is a more mature and expansive project than this one and features a similar grid idea (It is slightly different though) albeit without the flexibility of allowing to create your grid classes (I am still conflicted on this as it is difficult to ensure that there is little css bloat when using a pre-processor).

Hope that helps and will be hopefully pushing an update through in the near future.

[igorsantos07]

Ok, so I guessed right (:

First, easy answers: I was kinda in a rush, as the idea was just having a grid system working when I need it - it was just for a pet project that ended up the first version in three days, and I'll be back working on it in some weeks. But I could figure out how to use FSG and I'm fine now. I was almost adding semantic.gs in my system but then I noticed how their development is stuck and found FGS in their issues, and liked it. I read something about inuit in their blog and readme, but it looks too much for me, at least now. I liked their grid system idea although it's quite different from what my mindset expects from a responsive-able grid system, but I'll give it a try in a future project. I have to read about OOCSS first as well.

And here my comments on FSG, hoping this can help you develop the project and docs as well (:

• the name is too big, but FSG works XD
• I included the config file but it was doing some behavior in my page that were unexpected from a grid system, at least in my mind. Here's what I did to make it fit my project:
• @show-rhythm: false; it was showing horizontal lines in the background and I didn't like that. Maybe this could come as false by default, or with a little explanation of what they are and why they are enabled by default? Additionally, I didn't had time to read about rhythmic yet, so I just disabled that hoping it would work.
• commented out typography.less, since I'm using bootstrap and they kinda override each other. Should this type of style be included in a Grid System?
• removed demo.less. If this is for demos, it shouldn't be included in the main, includable less file, right?

I did those things because I expect a grid system to not change anything in my page when I add it, but rather wait for my settings (defining grid sizes and what components should have what sizes) to alter stuff.

Igor Santos Programador PHP / Ruby igorsantos.com.br http://www.igorsantos.com.br || memelinks.com

On Sat, Jun 8, 2013 at 11:47 AM, laughingwithu notifications@github.comwrote:

Thanks for the complement, and sorry for the lack of documentation. It does appear to be something I need to work on...

The good news is that I am about to push through some changes to make things easier. but in the meantime the only file which is required is the config.less file as this imports all the other necessary less files. It works on the same principles as the semantic.gs. The config file should explain the settings and I am in the process of integrating vertical rhythm more as technically gutter widths and line heights should pretty much be identical to create nice white space.

If you are in a rush I highly recommend having a look at inuit.css by Harry Roberts which is a more mature and expansive project than this one and features a similar grid idea (It is slightly different though) albeit without the flexibility of allowing to create your grid classes (I am still conflicted on this as it is difficult to ensure that there is little css bloat when using a pre-processor).

Hope that helps and will be hopefully pushing an update through in the near future.

— Reply to this email directly or view it on GitHubhttps://github.com/laughingwithu/flawless-semantics-grid/issues/21#issuecomment-19149837 .

[laughingwithu]

Thanks for the time you have taken to write this, I will be taking on most of what you have said to improve the next version (especially separating the examples and providing the grid system as a blank slate).

Vertical rhythm is baked in as typographically your values tend to rely on each other to create good technical typography and white space. For instance, your line-height typically should be either equal to or close to your gutter-widths. If you were to follow the golden ratio the max width of the container for your text should be roughly 26.34 times your line height which should be roughly 1.625 times the size of your font (1.618 won't produce a whole number). Obviously this is only one guide and there are plenty of people that will say that 1.5 times is the better measure. I Think I will just provide a version without it, so that FSG can be used with other frameworks.

BTW In order to prevent css bloat, I am thinking of abstracting the grid system further to require a .grid class and usage of the code would be like:

<body>
   <div class="grid WhateverYouWant">
      <article>Main</article>
      <article>Secondary</article>
   </div>
</body>

body {
   .grid(12); // make this a grid
   .widths(12); // set its width to 12 columns wide
}

.WhateverYouWant {
   .row(12); // make a row
}

article {
   .column(6); //make all article elements 6 columns wide
}

and the .grid class is predefined by FSG (really like this abbreviation). Would be interested to hear what you think about this change.

[igorsantos07]

Oops! I think I answered this email mentally :( It may be too late now, but here it goes anyway: I like to think about grid systems being only composed of columns, as the rows are usually based on the content flow. Also, I like to keep my sass/less minimal, to avoid trouble when changing rules or creating altered rules for media queries. Thus, maybe .row() could be too much and .grid() + .width() looks repetitive to me, taking the same arg in the same element. Maybe I misunderstood their functions, though.

That being said, if it's way better in the end on cleaning the generated CSS, as long as it does not bloat too much the Less, it's cool (:

-- Igor Santos Desenvolvedor web [enviado do celular] On Jun 10, 2013 3:53 AM, "laughingwithu" notifications@github.com wrote:

Thanks for the time you have taken to write this, I will be taking on most of what you have said to improve the next version (especially separating the examples and providing the grid system as a blank slate).

Vertical rhythm is baked in as typographically your values tend to rely on each other to create good technical typography and white space. For instance, your line-height typically should be either equal to or close to your gutter-widths. If you were to follow the golden ration the max width of the container for your text should be roughly 26.34 times your lineheight which should be roughly 1.625 times the size of your font. Obviously this is only one guide and there are plenty of people that will say that 1.5 times is the better measure. I Think I will just provide a version without it, so that FSG can be used with other frameworks.

BTW In order to prevent css bloat, I am thinking of abstracting the grid system further to require a .grid class and usage of the code would be like:

Main

Secondary

body { .grid(12); // make this a grid .widths(12); // set its width to 12 columns wide} .WhateverYouWant { .row(12); // make a row} article { .column(6); //make all article elements 6 columns wide}

and the .grid class is predefined by FSG (really like this abbreviation). Would be interested to hear what you think about this change.

— Reply to this email directly or view it on GitHubhttps://github.com/laughingwithu/flawless-semantics-grid/issues/21#issuecomment-19183066 .

[laughingwithu]

Unfortunately to allow for the negative margin used to hide the extra gutter we have to create a row like class. and while the negative margin does not alter in a pixel layout, as soon as we introduce percentages this value can change depending on how many columns are specified in a particular row (only useful for nesting). The only way I can see around this would be to use padding to to give effect to the gutters (this would also simplify the maths). Having said this if you did not have any nesting in your project you would not need to use the .row() mixin at all as the .grid() mixin would set all the values up properly for you.

You are probably right about the .grid(), .row() mixins and .width() - I will take another look at why I set it up this way (to set widths and make an element a row in one) again).

The changes I have implemented have reduced the generated css by at least 40% (I realise when we are talking only 9kb this is not much but it does make maintaining css easier).

[igorsantos07]

Ok, I think it does make sense (: It would be great to have less mixins to worry about also.

Finally, 40% may not be much for a 9kb file, but when you think about huge traffic websites and notice how much they can save in the long run ;)

Keep going!

Igor Santos Programador PHP / Ruby igorsantos.com.br http://www.igorsantos.com.br || memelinks.com

On Sun, Jul 7, 2013 at 1:40 AM, laughingwithu notifications@github.comwrote:

Unfortunately to allow for the negative margin used to hide the extra gutter we have to create a row like class. and while the negative margin does not alter in a pixel layout, as soon as we introduce percentages this value can change depending on how many columns are specified in a particular row (only useful for nesting). The only way I can see around this would be to use padding to to give effect to the gutters (this would also simplify the maths). Having said this if you did not have any nesting in your project you would not need to use the .row() mixin at all as the .grid() mixin would set all the values up properly for you.

You are probably right about the .grid(), .row() mixins and .width() - I will take another look at why I set it up this way (to set widths and make an element a row in one) again.

The changes I have implemented have reduced the generated css by at least 40% (I realise when we are talking only 9kb this is not much but it does make maintaining css easier.

— Reply to this email directly or view it on GitHubhttps://github.com/laughingwithu/flawless-semantics-grid/issues/21#issuecomment-20565619 .