Skip to content

Instantly share code, notes, and snippets.

View orioltf's full-sized avatar

Oriol Torrent Florensa orioltf

18 followers · 22 following
  • Unic AG
View GitHub Profile
@orioltf
orioltf / dabblet.css
Created December 17, 2011 13:48
#CSS: CSS only visual rich section division
/**
* CSS only visual rich section division
*/
body {
background-color: #264e86;
color: #fff;
font-size: 2em;
}
#main {
width: 90%;
@orioltf
orioltf / dabblet.css
Last active September 29, 2015 11:28
#CSS #CSS3: Styling Button Links With CSS3
/**
* Styling Button Links With CSS3
* Credit: http://www.usabilitypost.com/2012/01/10/pressed-button-state-with-css3/
*/
/* Step 1: the button */
.button-link {
padding: 10px 15px;
background: #4479BA;
color: #FFF;
text-decoration: none;
@orioltf
orioltf / dabblet.css
Last active October 4, 2015 02:58
#CSS #GRADIENTS: Chess pattern
/**
* Chess pattern
*/
background: #252137;
background:
linear-gradient(135deg, transparent 75%, rgba(255, 255, 255, .4) 0%) 0 0,
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .4) 0%) 15px 15px,
linear-gradient(135deg, transparent 75%, rgba(255, 255, 255, .4) 0%) 15px 15px,
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .4) 0%) 0 0,
@orioltf
orioltf / index.html
Last active May 17, 2018 07:56
#RESPONSIVE #HTML5 #JQUERY: Simple jQuery responsive cross-fade slider
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The simplest responsive slider</title>
<meta name="description" content="">
@orioltf
orioltf / dabblet.css
Created May 18, 2012 09:47
#CSS: Illustrating correct & wrong inner border-radius. http://dabblet.com/gist/2724344
/**
* Illustrating correct & wrong inner border-radius
*/
.outer {
padding: 10px;
margin: 50px;
border: 1px solid silver;
box-shadow: 0 0 10px gray;
border-radius: 20px;
@orioltf
orioltf / dabblet.css
Last active October 5, 2015 00:37
List with incremental numbering
/**
* List with incremental numbering
*/
nav ol {
list-style: none;
counter-reset: olfirst; /* our father OL must have olfirst item reseted */
}
nav ol ol {
counter-reset: olsecond; /* our sub OL's reset the olsecond, third must to be olthird and so on */
@orioltf
orioltf / Instruccions.md
Last active October 5, 2015 01:18
#JQUERY #CHROME: Resizable frames a les pagines de la UOC en Chrome
  1. Instalar l'extensió jQuerify (https://chrome.google.com/webstore/detail/gbmifchmngifmadobkcpijhhldeeelkc). Veurem que hi ha una nova icona de fons blau fosc amb una figura piramidal roja.
  2. Obrir una pàgina amb frames que vulguem fer resizable, com per exemple un forum d'una àula.
    • Si la pàgina s'obre en un pop-up, cal tornar la nove finestra a la finestra principal. Es pot fer arrossegant la icona del costat de la url de la finestra nove a la barra de pestanyes de la finestra principal, per exemple entre dues pestanyes.
  3. Clicar a sobre de la nova icona de l'extensió jQuerify
  4. Activar les eines de desenvolupador. En Windows: F12, en MacOsX: Cmd+Alt+i
  5. Activar la consola (Esc)
  6. Enganxar-hi el codi de l'arxiu frame.js i prémer Enter.
    Si no veieu els borders grisos a través dels quals poder re-escalar els frames, re-escaleu la finestra.
  7. Ja es pot tancar la finestra d'eines de desenvolupador (amb la mateixa combinació de tecles del pas 4, per exemple)
@orioltf
orioltf / sanitize.erb
Created June 11, 2012 12:06
#HAML #ERB: Sanitize text in Rails / Sinatra
<!-- To sanitize text or escape special characters (ampersand for instance), use the method h() -->
<% link_to(h(url), url) %>
<% link_to(h('Help & Support'), './help.html') %> <!-- OUTPUT: <a href="../help.html">Help &amp; Support</a> -->
<!-- Credit goes to Ville: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#418-Remember-to-sanitize-name -->
@orioltf
orioltf / index.haml
Created June 26, 2012 19:21
#REGEX: TextMate regularExpression to find href independently from content in HAML
-# Find:
:href => "(.*?)"
-# Replace:
:href => "#"
@orioltf
orioltf / check_vars_haml.md
Last active July 6, 2019 23:45
#HAML: Checking variables in partials
  1. Check if a page variable has been defined

    1. Set variables in a page (page.html.haml) at the very biginning of the file:

      ---
variable: value
variable2: value 2
---