search

laughingwithu / flawless-semantics-grid

A grid system based on semantic.gs but with a few more options...
http://laughingwithu.github.com/flawless-semantics-grid/index.html
Apache License 2.0
28 stars 4 forks source link

[FIXED] Improve docs #20

Closed sergeevabc closed 11 years ago

sergeevabc commented 11 years ago

Current documentation is very poor, unfortunately. And kindly provided examples are not eloquent enough.

That is to say semantic.gs illustrates how to style both in HTML and CSS:

<body>
   <article>Main</article>
</body>

article {
   .column(6);
}

Clear and simple, hooray!

However flawless-semantics confuses with inclusions

<section id="Basic">
    <div class="first-row">
        <div class="intro">
            <h3 class="show">Basic</h3>
            <code>.row(12);</code>
        </div>
        <div class="first">
            <code>.column(6);</code>
        </div>
        <div class="second">
            <code>.column(6);<br></code>
        </div>
    </div>
</section>

Instant questions with no obvious answers:

Common, it's not that basic!

laughingwithu commented 11 years ago

Will clean up the documentation in 1.1.4 which is slowly being put together given the fact that I am implementing the grid in stylus and sass (and having to learn them at the same time).

As for your questions;

Note you only need to declare a grid once and then it is always the .row(); mixin and then the .column(); mixin like this:

  1. .grid();
  2. .row();
    • .column();
    • .column();
    • .column();
    • .column();
  3. .row();
    • .column();
    • .column();
    • .column();

etc..

Using the semantic.gs example the folllowing may help. 

<body>
   <div class="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
}