Skip to content

Instantly share code, notes, and snippets.

View JuanMaRuiz's full-sized avatar
💭
📚Learning

JuanMa Ruiz JuanMaRuiz

💭
📚Learning
9 followers · 21 following
View GitHub Profile
@JuanMaRuiz
JuanMaRuiz / media-query-dpi.css
Last active May 1, 2021 14:17
Retina Display Media Query for high DPI aware devices. (1.3dpr, 1.5dpr, 2dpr, 3dpr)
/* Device pixel densities based on: */
/* - Test for CSS by @marcedwards from @bjango */
/* (http://bjango.com/articles/min-device-pixel-ratio/) */
/* - Retina Display Media Query */
/* (https://css-tricks.com/snippets/css/retina-display-media-query/)*/
/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
@JuanMaRuiz
JuanMaRuiz / Scrollbar.css
Last active August 31, 2019 02:20
Customize the scrollbar of the web like Gmail with only css. [Chrome and Safari]
::-webkit-scrollbar {
background: transparent;
overflow: visible;
width: 17px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border: solid #fff;
}
@JuanMaRuiz
JuanMaRuiz / comandos-git.md
Last active August 20, 2019 22:21
Comandos de git
@JuanMaRuiz
JuanMaRuiz / learning_resources.md
Last active May 9, 2018 19:15 — forked from nathansmith/web-design-development-learning-resources.md
Resources for learning web design & front-end development
@JuanMaRuiz
JuanMaRuiz / server.js
Last active June 6, 2016 21:54
How to initialize a simple node server with express.
/* First all you need too install express as a dependency
* $ npm i express --save
* For more information about express visit http://expressjs.com/
*/
var express = require('express');
var app = express();
// __dirname + '/' refers to the folder you have created index.html
app.use('/', express.static(__dirname + '/'));
@JuanMaRuiz
JuanMaRuiz / path variable with sass
Created February 11, 2016 15:01
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
@JuanMaRuiz
JuanMaRuiz / front-end-curriculum.md
Created January 22, 2016 20:06 — forked from stevekinney/front-end-curriculum.md
Front-end Curriculum Draft

Module 1

  • Semantic markup
  • HTML standards mode and quirks mode
  • HTML fundamentals
    • Classes and IDs
  • CSS fundamentals
    • Selectors
    • Resets and normalizers
    • The box model
@JuanMaRuiz
JuanMaRuiz / custom-input-file.css
Last active January 3, 2016 02:39
Without Javascript or jQuery it's possible customize the style for <input type="file" />. It's only available in -webkit. For more information and examples checkout: http://kcy.me/xfjd // http://kcy.me/xfje
.myClass::-webkit-file-upload-button {
visibility: hidden;
}
.myClass::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
@JuanMaRuiz
JuanMaRuiz / mobile-elements.md
Last active December 31, 2015 15:59
Several tips for a better mobile styling
@JuanMaRuiz
JuanMaRuiz / bookmarklet.js
Last active December 27, 2015 00:18 — forked from LaboratorioEfe5/Access WP admin bookmarklet
javascript:(function(){host=window.location.hostname;window.open("http://"+host+"/wp-admin");})()