carlos-sanchez’s gists

carlos-sanchez / clearfix-2016.css

Last active March 7, 2017 19:56

Clearfix. when an element only contains floated elements, it collapses on itself. To prevent this behavior, you have to “clearfix” it. We used to do it with an extra element, but not anymore. Note: The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes …

	/* Margin collapsing is a feature, not a bug, and—as we can see here—it ensures a better distribution of boxes across the vertical axis.

	So for this reason, I think it is better to favor display:block instead of display:table in "clearfix" rules.
	As in:
	*/

	.clearfix:after {
	content:" ";
	display:block;
	clear:both;

carlos-sanchez / mixins.less

Created November 14, 2013 03:47

Mixins


	.gradient(@start, @end) {
	background-color: mix(@start, @end);
	*background-color: @end;
	background-image: -moz-linear-gradient(top, @start, @end);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end));
	background-image: -webkit-linear-gradient(top, @start, @end);
	background-image: -o-linear-gradient(top, @start, @end);
	background-image: linear-gradient(to bottom, @start, @end);
	background-repeat: repeat-x;

carlos-sanchez / border-box-model.css

Created November 14, 2013 03:47

Border Box Model. It turns out that pseudo-elements are not included in the universal selector, so if you want your pseudo-elements to have a proper box-model like everything else, you should include them in the declaration. Si algún elemento de la página da problemas hacemos que vuelva al modelo de toda la vida (content-box): elemento-que-sea{ …

	, :before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

carlos-sanchez / sprites.css

Created November 14, 2013 03:05

Sprites.

	a {
	display: block;
	background: url(sprite.png) no-repeat;
	height: 30px;
	width: 250px;
	}

	a:hover {
	background-position: 0 -30px;
	}

carlos-sanchez / hidden-but-accesible.css

Created November 14, 2013 03:03

Hidden but accesible. Setting display: none hides content for screen readers and search engine bots. This is the difference that really matters. When you’re making tabs or playing with slideToggle(), don’t hide the content with display: none because you will make it unavailable for both, screen readers and search bots. Instead give it the previo…

	.visuallyhidden {
	position: absolute;
	width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
	height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
	padding: 0;
	margin: -1px;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	}

carlos-sanchez / retina-bg-images.css

Created November 14, 2013 03:01

Retina background images. Note: The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed.

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and ( min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
	only screen and ( -moz-min-device-pixel-ratio: 2),
	only screen and ( -o-min-device-pixel-ratio: 2/1),
	only screen and ( min-device-pixel-ratio: 2),
	only screen and ( min-resolution: 192dpi),
	only screen and ( min-resolution: 2dppx) {
	/* Your retina specific stuff here */
	}

carlos-sanchez / disable-element.css

Created November 14, 2013 00:43

Disable Elements. Whenever you want to show something is being disabled simply add the .disabled class (or whatever you’d like to call it). First of all, it will turn its opacity to 0.5, but more importantly, it will disable all pointer events on it (hover, click, etc.). A live example would be to give this class to the submit button of a form a…

	.disabled {
	pointer-events: none;
	opacity: 0.5;
	}

carlos-sanchez / clip.css

Created November 14, 2013 00:42

Clip property. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. It won’t work with relative or static positioning. The clip property accepts only three different values: auto: this is the default behavior. Setting clip to auto is the same thing as not using clip at all. inherit: we…

clip: rect(40px, 260px, 150px, 80px);

carlos-sanchez / break-long-urls.css

Created November 14, 2013 00:40

Break long URLs or truncate text. Now we will see two snippets about long strings truncation: one preventing the text to break out of their container (such as an URL) by forcing the break. And one to make an ellipsis in case the string is too long for its container. The first snippet (.break) works in Internet Explorer 8+, Firefox, Safari and Ch…

	.break {
	-ms-word-break: break-all;
	word-break: break-all;

	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	}

carlos-sanchez / blockquote-cite.html

Created November 13, 2013 21:17

Cite and Blockquote in HTML5

	<blockquote>
	<p>As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly
	– so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc,
	citations almost always appear as part of the quotation – it’s highly conventional.</p>
	<footer>
	— <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
	</footer>
	</blockquote>

Carlos Sánchez carlos-sanchez