Skip to content

Instantly share code, notes, and snippets.

@juanrules
juanrules / usefulRegexPatterns.js
Last active September 26, 2019 13:30
Useful Regex patterns
const fragment = 'hello:222';
const fragment = 'hello:222]';
// Get any number at the end of a string
const anyDigitsFromEndOFString = /\d+$/g;
console.log(fragment.match(anyDigitsFromEndOFString)); // ["222"]
console.log(fragment2.match(anyDigitsFromEndOFString)); // null
<?php
/**
* Created by PhpStorm.
* User: SuperMan
* Date: 02/03/2018
* Time: 15:57
*/
namespace BOI\jaja\Controller;
@mixin o-2cols-calc() {
@extend %row-flex;
justify-content: space-between;
@media #{ $medium-up } {
@include rem-fallback(margin-bottom, 1.6);
}
&__form-wrapper,
&__results,
@juanrules
juanrules / BOI-Typography-only-kitchen-sink.html
Created August 8, 2016 09:38
BOI - Typography kitchen sink
<h1>Headings</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>
<h1>h1. This is 1st level heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h2>h2. This is 2nd level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h3>h3. This is 3rd level heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h4>h4. This is 4th level heading</h4>
<p>
@juanrules
juanrules / Retirement-Planning-calculator.html
Last active August 4, 2016 13:35
Mini - Retirement Planning calculator
<div class="c-mini-pension-calc">
<h2>Retirement Planning Calculator</h2>
<form action="">
<label for="dob">Date of Birth</label>
<input class="radius" id="dob" type="date" placeholder="dd/mm/yyyy">
<label for="save">How much do you want to save per month?</label>
<input class="radius" id="save" type="number">
<label for="pension">Value of current pension</label>
<input class="radius" id="pension" type="number">
<button class="c-mini-pension-calc__cta button tertiary expand" type="submit">Calculate <i class="c-mini-pension-calc__cta-icon fa fa-chevron-right"></i> </button>
@juanrules
juanrules / BOI-Kitchen-sink.html
Created July 25, 2016 13:56
This file contains several UI components for testing styles within a Wordpress page content. To use it, create a page in Wordpress and then copy the content of this gist and paste it in the wysiwyg of the page you just created
<h1>Headings</h1>
<span style="display:block; margin:10px 0; border-bottom: 3px solid #ddd"></span>
<h1>h1. This is 1st level heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h2>h2. This is 2nd level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h3>h3. This is 3rd level heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, numquam, quam porro sint repellendus voluptate consequuntur necessitatibus quidem! Ullam quis rerum excepturi odio similique facilis. Recusandae accusantium, dolorem maxime ipsum.</p>
<h4>h4. This is 4th level heading</h4>
<p>
@juanrules
juanrules / events-feed.php
Created May 30, 2016 15:54
Events feed html
<div class="c-events-feed">
<h3 class="c-events-feed__title">Upcoming Business banking events</h3>
<!-- Every 2 events, add a new <div class="c-events-feed__list"> -->
<div class="c-events-feed__list">
<!-- Every item add a new <div class="c-events-feed-item"> -->
<div class="c-events-feed-item">
<div class="c-events-feed-item__header">
<a href="#" class="c-events-feed-item__link-layer">Title of the event</a>
<img src="http://placehold.it/80" width="100%" height="auto" alt="">
</div>
@juanrules
juanrules / dabblet.css
Created August 6, 2012 01:24 — forked from alexmwalker/dabblet.css
CSS3 Animated Flame *
/**
* CSS3 Animated Flame *
*/
body {background-color:#000}
#logfire {
position:relative;
height:400px;
margin-top:100px
}