John Louie Binas johnlouie04

johnlouie04 / scss, sass

Created July 26, 2017 11:57

Experimental Font Relativity in Different Unit Conversion ( px, em, per, pt, rem)

	$unitless: 16; // resize to your desire need
	$font-size-unit: $unitless + 0px;
	@function rem($valuePixels, $context: $font-size-unit, $em: false, $per: false, $pt: false) {

	@if (unitless($valuePixels)) {
	$valuePixels: $valuePixels * 1px;
	}

	@if (unitless($context)) {
	$context: $context * 1px;

johnlouie04 / index.html

Created July 18, 2013 05:22

A CodePen by John Louie Biñas. Simple html5 psuedo element content

	<div class="box" data-message="hello there want to try me..??">

	</div>

johnlouie04 / dynamic-attr-content

Created July 16, 2013 01:37

Using content attr of psuedo elements dynamically

	<!-- first create a div element -->
	<div class="myClass" data-text="put the message here"><!-- You can call the data attr using content attr in css -->
	</div>

johnlouie04 / ScrollingUp.js

Created February 1, 2013 02:43

Simple Scrolling Up and Down

	function MyUpDownFunction(){

	var top-height= $('header-div-element').position().top + <any-other-custom-height>;


	if( $(window).scrollTop() > top-height ){
	$('#your-div').slideDown();
	}else{
	$('#your-div').slideUp();
	}

johnlouie04 / button.css

Last active October 12, 2015 17:07

Simple button and easy to implement

	/**
	* The first commented line is your dabblet’s title
	*/

	[class^="button"],
	[class*=" button"]
	{
	padding: 5px;
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.3);