Using Jeet’s Unit‑Based Grid System in a LESS Project

Quick answer

Jeet lets you define a base unit (e.g., 1/12 of the container) and then compute column widths with the .span() mixin, so a six‑column span becomes 50 % of the width minus the gutter. This eliminates hard‑coded pixel values and keeps the grid flexible.

How it works – a worked example

1. Set up the unit system

/* variables.less */
@unit: 1/12;          /* base unit = one twelfth of the parent */
@columns: 12;         /* total columns in the grid */
@gutter: 1/12;        /* gutter width expressed as a unit */

2. Import Jeet core and create a column class

/* styles.less */
@import "jeet/jeet";   /* Jeet’s LESS file */

.col-6 {
  .grid();             /* establishes a flex container */
  .gutter();           /* applies the gutter */
  .span(6);            /* six‑unit span */
}

3. Resulting CSS (what you should see)

After compiling, the .col-6 rule expands to something like:

.col-6 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8.33333%;   /* negative margin to offset gutter */
  margin-right: -8.33333%;
}
.col-6 > * {
  flex: 0 0 41.66667%;      /* 6/12 = 50 % minus one gutter (8.33 %) */
  max-width: 41.66667%;
  padding-left: 8.33333%;
  padding-right: 8.33333%;
}

The exact percentages depend on the @unit and @gutter values; the key point is that the width is calculated from the unit ratio, not hard‑coded pixels.

Why the unit approach helps

By expressing widths as fractions of a base unit, you avoid magic numbers and make it easier to change the grid’s granularity in one place. For example, switching from a 12‑column to a 16‑column layout only requires adjusting @columns and the .span() arguments; the math stays the same.

Limits and common mistakes

• No built‑in breakpoint helpers – you must write your own media queries to change @unit, @columns or @span values at different viewport widths.
• Jeet’s grid relies on CSS3 flexbox, so older browsers (IE10/11) may exhibit flexbox bugs; test those targets if you need to support them.
• Because the project is largely unmaintained (last release 4.x, 2017), newer LESS/Sass features or CSS variables may not work without manual tweaks.
• A frequent error is importing only the compiled Jeet CSS file; the mixins (.grid, .gutter, .span) are missing, leading to undefined mixin errors during compilation.
• Mixing Jeet with another grid system (e.g., Bootstrap) can cause duplicate class names and specificity conflicts; keep the scopes separate or prefix Jeet classes.

Practical verification steps

1. Compile a sample LESS file that includes the variable definitions, imports Jeet, and uses .span(6) as shown above.
2. Open the generated CSS in Chrome DevTools (or Firefox) and verify that the computed width of a span‑6 element equals approximately 41.66 % (for a 12‑column grid with 1/12 gutter).
3. Resize the viewport and confirm the flexbox layout wraps as expected; add a custom media query to change @unit to 1/8 (making each unit larger) and re‑compile to see the new column width.
4. Run a linter such as stylelint on the compiled CSS; it should report no unknown properties or syntax errors from Jeet’s mixin expansion.
5. If you need to adjust the gutter at a breakpoint, redefine @gutter inside the media query and re‑include the .gutter() mixin; check that the negative margins and padding update accordingly.