Skip to content

Instantly share code, notes, and snippets.

View dima-f1's full-sized avatar

Dmitry dima-f1

7 followers · 2 following
View GitHub Profile
@dima-f1
dima-f1 / Adobe-ask-experts.md
Created November 3, 2015 09:38 — forked from dbox/Adobe-ask-experts.md
Answer for adobe ask the experts

Q: What is your favorite Css 'trick'?

Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you're good to go. Things get a little unpredictable, though, when dealing with background images. Since putting a height on the element causes lots of responsive headaches, one workaround is to have the container scale by its aspect ratio. This can be achieved by setting a few attributes to the element's :after tag:

.my-element {
  overflow: hidden;
  position: relative;
}
.my-element:after {
 content: "";
@dima-f1
dima-f1 / directives.js
Last active August 29, 2015 14:22 — forked from dpogorzelski/directives.js
Twitter share directive
directives.directive('twitter', [
function() {
return {
link: function(scope, element, attr) {
setTimeout(function() {
twttr.widgets.createShareButton(
attr.url,
element[0],
function(el) {}, {
count: 'none',
@dima-f1
dima-f1 / sass-flex-box.md
Last active August 29, 2015 14:21 — forked from anotheruiguy/sass-flex-box.md

So I was presented with this interesting problem by a co-worker to come up with a CSS solution for a very common problem. Basically what we are looking at here is a common layout for a list of items that will be placed into a grid with two columns. Simple, right?

Imgur

Wrong. How do we do this? There are so many ways we can solve this problem that the solutions are a problem in itself. In this article I will walk through the process that I went through and how I came to a solution that I feel is pretty flexible and will carry us into the future of better layout solutions.

Rows and columns

A VERY common solution is to pretend this is a table and think of this as a series of rows and columns. I personally think that this is a very poor solution. Why would we want to recreate tables for the sake of creating a table layout? But for the sake of argument, I will walk through how this works.

@dima-f1
dima-f1 / wp-query-ref.php
Created November 30, 2013 12:06 — forked from luetkemj/wp-query-ref.php
<?php
/**
* WordPress Query Comprehensive Reference
* Compiled by luetkemj - luetkemj.com
*
* CODEX: http://codex.wordpress.org/Class_Reference/WP_Query
* Source: http://core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/query.php
*/
$args = array(
@dima-f1
dima-f1 / Text-input-love.markdown
Last active December 22, 2015 02:19 — forked from anonymous/Text-input-love.markdown
awesome input labels solutions

Text input love

I wanted to play with some input styles that don't rely on hover, don't add clutter, show the label at all times, and show placeholder text when it is actually relevant.

A Pen by Jordano Aragão on CodePen.

License.