offset columns in a skel grid

Question

I use the dopetrope layout from HTML5up template. Which uses a grid system like Bootstrap.

For example this bootstrap code :

`"class="col-md-6 col-xs-12"`

would be equivalent to :

`class="6u 12u(mobile)"`

in HTML5up. The "u" is the unit of the grid.

I tried to add a column after Xu. With bootstrap we use offset attribute :

`class="col-md-offset-2"`.

EDIT : I just found out it's based on skel.io. I look forward in this direction.

HTML5up is not a framework. It's a site that offers HTML templates. — Carol Skelly, Jan 30 '17 at 15:51
@ZimSystem Thank's for your constructiv remark, even if it didn't help me at all — Arcelli Annabelle, Jan 31 '17 at 08:43

score 1 · Accepted Answer · answered Jan 31 '17 at 09:09

1

I found the solution in the skel doc.

https://github.com/ajlkn/skel/blob/master/docs/skel-layout.md#offsetting

The solution is -2u for offset columns.

answered Jan 31 '17 at 09:09

Arcelli Annabelle

21
3

score 0 · Answer 2 · answered May 18 '17 at 18:14

to give the Element offset on skel.js just write the number of negative column like : class="-2u" = col-offset-2 . to determine screen of the offset write class = "-nubmer(screen)" ==>> class=" -3u(small) "

skel.breakpoints({
 xlarge: "(max-width: 1680px)",
 large:  "(max-width: 1280px)",
 medium: "(max-width: 980px)",
 small:  "(max-width: 736px)",
 xsmall: "(max-width: 480px)"
});

skel.layout({
 reset: "normalize",
 containers: true,
 grid: true,
 breakpoints: {
  medium: {
   containers: "90%"
  },
  small: {
   containers: "95%",
   grid: { gutters: 20 }
  },
  xsmall: {
   grid: { gutters: 10 }
  }
 }
});

.row div{
  background-color:#3498db;
  color:#fff;
  text-align:center;
  padding:5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel-layout.min.js"></script>

<div class="container">
  <div class="row">
    <div class="5u">
      Five
    </div>
    <div class="5u -2u(medium)">
      Five  
    </div>
  </div>
  <div style=" 
  color:#666;
  text-align:center;
  padding:5px"> - Click Run Code Snippte  then make full Page and  Resize the window to show the offset </div>

</div>

offset columns in a skel grid

2 Answers2