A Pen by Jorge Epuñan.

index.haml

.container
    - (1..10).each do |i|
        %span #{i}

Items-in-circle,-LESS-mixin.markdown

Items in circle, LESS mixin

LESS mixin to position items in circle

A Pen by Jorge Epuñan on CodePen.

License.

style.less

// init mixin
.putOnCircle( 
          @nb-items,
          @circle-size,
          @item-size
       ) {
  @half-item:    @item-size / 2;
  @half-parent:  @circle-size / 2;
  
  position:      relative;
  width:         @circle-size;
  height:        @circle-size;
  padding:       0;
  border-radius: 50%; 
  list-style:    none;
  box-sizing:    content-box;
  
  > * {
    display:   block;
    position:  absolute;
    top:       50%;
    left:      50%;
    width:     @item-size;
    height:    @item-size;
    margin:    -@half-item;
  
    @angle:    360/@nb-items;
    @rot:      0;
    
    .loop (@index) when (@index > 0){
      &:nth-of-type(@{index}){
        @rotN: (@rot+@angle)*@index;
        -webkit-transform: 
          rotate(@rotN*1deg) 
          translate(@half-parent) 
          rotate(@rotN*-1deg);
      }
      .loop (@index - 1);
    }
    .loop(0){}
    .loop(@nb-items);
  }
}
// end mixin, translated from SASS: 
// http://codepen.io/HugoGiraudel/pen/Bigqr

// use
@bgcolor: #16a085;

.container {
  .putOnCircle(10, 200px, 40px);
  border: solid 4px @bgcolor;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  
  span {
    display: block;
    border-radius: 50%;
    background-color: @bgcolor;
    text-align: center;
    color: lighten(@bgcolor,80%);
    text-shadow: darken(@bgcolor,20%) 1px 1px 1px;
    line-height: 40px;
    border: lighten(@bgcolor,30%) solid 2px;
  }
}

// the rest
html,body {height:100%;}
body {
  
  background: @bgcolor;
  background: radial-gradient(ellipse at center, lighten(@bgcolor,10%) 0%,@bgcolor 70%);
}