Code Snippets Haml

Short texts Haml 🧑‍💻 Code snippets Haml ✍️ Reading lists Haml 👀

Kill The King – Vue / HTML game

#app{“:class” => “{‘pressed’: pressed}”} %audio{:controls => “”, :crossorigin => “anonymous”, :style => “display: none;”} %source{:src => “https://assets.codepen.io/217233/ktkBgAudio.mp3”, :type => “audio/mp3”} .game .game_lose{“:class” => “{‘show’: gameover}”} .inner %h1 YOU RAN OUT OF TIME! %p King Trost was victorious. Refresh to try again. %p Be sure to %a{:href => ‘https://www.codepen.io/jcoulterdesign’} follow me on Codepen for more pointless […]

Easy Animation

Easy Animation ————– A [Pen](https://codepen.io/markmead/pen/rNOqRNw) by [Mark Mead](https://codepen.io/markmead) on [CodePen](https://codepen.io). [License](https://codepen.io/markmead/pen/rNOqRNw/license). – colors = [‘#7c4dff’, ‘#0091ea’, ‘#ff9100’, ‘#ff1744’] – colors.each do |color| .hello{style: “color: #{color}”} easy

Halloween Animation in Pure CSS

Halloween Animation in Pure CSS ——————————- Halloween spiders and creepy font animated using keyframes and random variables. If you refresh you would have different animation times/positions everytime. All made using pure css. A [Pen](https://codepen.io/nguyentuanlo/pen/yLXdjLO) by [tulokun](https://codepen.io/nguyentuanlo) on [CodePen](https://codepen.io). [License](https://codepen.io/nguyentuanlo/pen/yLXdjLO/license). – 6.times do |i| %div{:class => “spider_#{i}”} .eye.left .eye.right – 4.times do %span.leg.left – 4.times do […]

Semantic UI HAML Paginator

– if total == 1 %div – else .ui.compact.menu – if total i + 1})), class: ‘item’ – else – if page == 1 = link_to ”, url_for(request.parameters.merge({:page => page + 1})), class: ‘item disabled’ – else = link_to ‘>’, url_for(request.parameters.merge({:page => page + 1})), class: ‘item’