hyx.less v2.1.0

readme.md

Hyx.less

Hyx is a very powerfull and easy to use grid system for less. Think of it like the missing half brother of Jeet.

Features

• Flexible gutter size, you can change it whenever you want and your grid won't break.
• If you prefer it doesn't full your HTML with a bunch of classes.
• Powerful and semantic syntax, .cols(1/3); means one column of three.
• Use only what you need when you need it, this is tool is to build a grid ad-hoc to your needs, you are no sticked to a rigid API or only one way to do stuff.
• Jeet like syntax, adding the hyx_extras.less you will have access to span(); and other fancy stuff.

Qick start

Installation

1. Download the latest stable release from http://thinkxl.github.io/hyx.less/ or clone the git repo - git clone https://github.com/thinkxl/hyx.less.git
2. Copy hyx.less file from the repo or unzipped folder
3. Paste it in your less folder
4. Import it on your main style.less

// style.less

@import `hyx`;

How to use

In the top of style.less we need to specify some settings to make it work:

// ## Grid setup

@gutter: 4%; // global gutter, required

Lets build our first grid

Hyx has been made thinking in that you can build an entire grid only with one function, and it can take a parameter in two ways.

The function is .cols(@size); and the two ways that you can input the size of your grid is separated by two syntax styles:

• Same size grid
• Different size grid

Same size

This means that all your columns will have the same size, and they need to be separated in the same distance one from each other.

The syntax used to build a grid of three columns could be:

.cols(1/3); // one of three;

// example using it with a class in a semantic named way
.col-1-3 { .cols(1/3); }

This means one column of three, the function will the width of each element in % needed and automatically assign a margin-right: 0; to the last element, this way we can avoid to use a .last extra class.

Different size

With this syntax we are targeting columns of different size, one common scenario is the main content column plus the sidebar one:

.cols(8); // size of eight columns
.cols(4, 0); // size of four columns, plus a `margin-right: 0;`

// example using them with a class well named

.main-content { .cols(8); }
.sidebar { .cols(4, 0); }

Just seeing the code it can tell us what is happening, for same size grids we can use 1/3 for one of three, and for one column with the size of eight we can use just 8 as a parameter, let see those in action.

This is better explained in the API section.

Building an real example

You can preview it here

style.less

.col-1-3 {
	// # Same size syntax
	//
	// Means one of three elements with the same size.
	.cols(1/3);
}

.main { 
	// # Different size syntax
	//
	// Means element with the size of eight columns.
	.cols(8); 
}

.sidebar { 
	// # Different size last element syntax
	//
	// Means element with the size of eight columns without gutter. 
	// The second parameter refers to `margin-right: 0;`.
	.cols(4, 0); 
}

compiled to style.css

.col-1-3 {
  float: left;
  width: 30.666666666666668%;
  margin-right: 4%;
}
.col-1-3:last-child {
  margin-right: 0;
}

.main {
  float: left;
  width: 65.33333333333333%;
  margin-right: 4%;
}

.sidebar {
  float: left;
  width: 30.666666666666668%;
  margin-right: 0;
}
	

index.html

<section>
  <div class="row"> <!-- necessary class to wrap the columns -->
    <div class="main">
      <p>Main content here!</p>
      <code>.cols(8);</code>
    </div> <!-- .main -->

    <aside class="sidebar">
      <p>Sidebar</p>
      <code>.cols(4);</code>
    </aside> <!-- .sidebar -->
  </div> <!-- .row -->

  <hr />

  <div class="row"> 
    <div class="col-1-3">
      <p> First column </p>
      <code>.cols(1/3);</code>
    </div> <!-- .col-1-3 -->

    <div class="col-1-3">
      <p> Second column </p>
      <code>.cols(1/3);</code>
    </div> <!-- .col-1-3 -->

    <div class="col-1-3">
      <p> Third column </p>
      <code>.cols(1/3);</code>
    </div> <!-- .col-1-3 -->
  </div> <!-- .row -->
</section>

Live example here

More examples

API

Notice that the syntax is very similar to Jeet because is its main inspiration for this new version.

COLS

(@num, @in-gutter, @global-gutter)

• @num: Number of columns that we want.
• @in-gutter: We use this to set the last element to margin-right: 0; without loose the precision of the grid size that the @global-gutter; gave us.
• @global-gutter: By default this is taken from @gutter at the // settings we define in the beginning, if we want an element without gutter at all, we set this to 0.

.cols(); Is the core and main function of Hyx, it can create any combination of columns you want in two different syntax's: same size & different size.

Same size syntax

.cols(1/3); Meaning one of three, we can use any combination based on a grid of twelve columns, example:

• .cols(1/3); one of three
• .cols(1/4); one of four
• .cols(1/2); one of two

This function includes &:last-child { margin-right: 0; } inside the class, so we don't have to worry to set margin-right: 0; in the last element.

Different size syntax

.cols(4); This create an element with the size of the columns defined, in this example means that we want an element with the size of four columns.

It takes the gutter from the @gutter we define in the // settings to make the correct calculation. For avoid breaking the grid we need to add a second parameter in the last element as I explain below.

Different size last element

.cols(4, 0); This function is to use only for the last element using the different size syntax, the second parameter applies a margin-right: 0; to this element, example:

	.main {
		.cols(8);
	}
	
	.sidebar {
		// last element
		.cols(4, 0);
	}

or

	.first-of-three { 
		.cols(4); 
	}
	
	.second-of-three { 
		.cols(4); 
	}
	
	.last-of-three { 
		// last element
		.cols(4, 0); 
	}

No gutter syntax

So you want a grid without gutter? you got it, you can set the setting @gutter: 0;, but then why I need this ugly function with three parameters?

Because sometimes you need the main @gutter: 4%; as a general setting, but maybe you want a grid inside the website without gutter that won't affect the other grids, right?

.cols(4, 0, 0); Sets @in-gutter: 0; and @global-gutter: 0; so only this element won't have any gutter, and will be so cool.

If you include the hyx_extras.less file, you can use this same function as .span();

SPAN

.span(4); As explained above, this is a shortcut for .cols(4, 0, 0); to make a grid without gutter.

extras.less

// ## box sizing reset
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
.box-sizing() {
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
}

// ## Span
.span (@num) { 
    .cols(@num, @in-gutter: 0, @out-gutter: 0); 
}

// ## Edit
.edit() {
	* {
		background: rgba(0,0,0,0.1);
	}
}
 

// ## Center
//
// Center elements
//
// **Note:** his method can cause elements to be blurry due to the element being placed on a “half pixel”. 
// A solution for this is to set its parent element to preserve-3d. Like following:
//
//  .parent-element {
//    -webkit-transform-style: preserve-3d;
//    -moz-transform-style: preserve-3d;
//    transform-style: preserve-3d;
//  }
.center(@dir) { position: absolute; }
 
.center(@dir) when (@dir = v) {
	top: 50%;
	transform: translateY(-50%);
}
 
.center(@dir) when (@dir = h) {
	left: 50%;
	transform: translateX(-50%);
}
 
.center(@dir) when (@dir = both) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

hyx.less

/*! Hyx.less v2.1.0 | MIT License | http://github.com/thinkxl/hyx.less */
 
// apply a natural box layout model to all elements, http://www.paulirish.com/2012/box-sizing-border-box-ftw 
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 
// Settings 
@gutter: 1%;    // - distance between columns
@grid-size: 12; // - num of columns
@width: 100%;   // - space that we want to use for the grid
 
// same size columns
.syntax() when (@num < 1) { 
    @num-of-cols: @num * @grid-size; 

    &:last-child { 
        margin-right: 0; 
    }
}
 
// different size columns
.syntax() when (@num > 1) { 
    @num-of-cols: @num; 
}
 
.cols ( @num , @in-gutter: @gutter, @global-gutter: @gutter ) {
    .syntax();
    @col-size: ( @width / @grid-size ); 
    @cols: ( @width / ( @col-size * @num-of-cols ) );
    float: left;
    width: ( @width - ( @global-gutter * ( @cols - 1 ) ) ) / @cols;
    margin-right: @in-gutter; 
}
 
// grid Container
.row { 
    width: 100%; 
 
    &:before,
    &:after {
        content: " "; 
        display: table; 
    }
 
    &:after {
        clear: both;
    }
}

inspiration.md

Inspiration

http://lokeshdhakar.com/projects/lightbox2/ http://daneden.github.io/Toast/ http://neat.bourbon.io/ http://jeet.gs/

Tips about open sourcing

http://zachholman.com/posts/documentation/ http://robots.thoughtbot.com/how-to-write-a-great-readme https://hacks.mozilla.org/2013/05/how-to-spread-the-word-about-your-code/?utm_source=statuscode&utm_medium=email http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/ http://blog.smartbear.com/open-source/how-to-turn-your-pile-of-code-into-an-open-source-project/ http://blog.arvidandersson.se/2014/06/17/best-practices-in-modern-web-projects

todo.md

Create some cool description

A grid that only do one thing, and it does it well, with no magic.

Notes:

• It is fluid, not repsonsive.
• Very small and powerfull Jeet like syntax.

Create a sandbox where people can play with it - (Maybe)

Perserve syntax from the past versions

Maybe I need to check if @num is less than 1, then if does, use it as it was before, entering numbers like 12/6 for col-1-2 or 4 for .col-1-3.

Try to mimic Jeet Syntax

I don't want to make hyx.less bigger, but I want to users be able to use some of the Jeet syntax if they want, so I will include an hyx_extras.less file, that will include all of this below.

Stuff from Jeet that I need to add in the hyx_extras.less file

.column() & .span()

Are already covered by .cols(@num, @gutter-size: @gutter).

--

.center(@align: {hor, ver, both});

Use the .centered class in my modules file.

--

.stack();

I don't think this is necessary, Jeet describes it as: A helper mixin to "stack" elements on top of each other. Useful for mobile views. Accepts padding and/or text alignment. (resize your browser when viewing the example to see this in action)

--

.edit();

Jeet describes it as: Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial.

Maybe, don't know yet.