Skip to content

Instantly share code, notes, and snippets.

View rtivital's full-sized avatar

Vitaly Rtishchev rtivital

  • 02:59 (UTC +04:00)
View GitHub Profile
@rtivital
rtivital / arrow.scss
Last active October 23, 2015 22:31
Создание CSS стрелок из элемента
@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
@if ($dir == 'up' or $dir == 'down') {
border-left-width: $size;
border-right-width: $size;
}
@rtivital
rtivital / placeholder.scss
Last active October 23, 2015 22:33
Миксин для стилизации плэйсхолдера
@mixin placeholder() {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder { /* Firefox 18- */
@content;
}
&::-moz-placeholder { /* Firefox 19+ */
@rtivital
rtivital / isAnything.js
Last active October 24, 2015 16:45
Проверка типов
// Проверка числа
var isNumber = function(num) {
// Функция parseInt вовращает число или NaN
// NaN будет возвращено, когда невозможно привести num к числу,
// например, parseInt('j23'), parseInt({}), parseInt(['a', 2, 3])
// число вернется, когда parseInt сможет преобразовать num к числу,
// например, parseInt('12string'), parseInt(12), parseInt([12, 13, 14])
// всё это вернет число 12
if (isNaN(parseInt(num))) {
@rtivital
rtivital / debug-css-layouts.css
Created October 23, 2015 21:13
Быстрая отладка css-лэйаутов
/*
Использйте универсальный селектор
для быстрой отладки лэйаутов
*/
body * {
/*
Можно использовать свойство background-color
c определенной прозрачностью
*/
background-color: rgba(0,0,0, .05);
@rtivital
rtivital / filter.js
Last active October 24, 2015 16:40
Удаление всех ложных свойств из массива
// Используйте метод массивов filter,
// чтобы удалить все ложные свойства из массива
var arr = ['', 1, 'str 1', 0, false, 'str 2', null];
// Функция Boolean() возвращает только значения true и false
arr.filter(Boolean); // [1, 'str1', 'str 2']
// Сокращенный вариант функции
arr.filter(function(item) {
return !!item;
@rtivital
rtivital / triangles.scss
Created October 24, 2015 16:44
Миксины для создания CSS стрелок и шевронов
@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
@if ($dir == 'up' or $dir == 'down') {
border-left-width: $size;
border-right-width: $size;
}
@rtivital
rtivital / comma-separated-list.scss
Last active October 24, 2015 17:19
Список, разделенный запятыми
// Чтобы создать список, разделенный запятыми,
ul > li {
// достаточно присвоить всем элементам li свойство display: inline
display: inline;
// и добавить запятую после каждого элемента в списке,
// кроме последнего, с помощью after
&:not(:last-child)::after {
content: ',';
}
@rtivital
rtivital / empty-links.css
Created October 24, 2015 17:33
Отображение внешних ссылок, не содежащих текст
@rtivital
rtivital / 0_reuse_code.js
Created November 13, 2015 02:30
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
;(function(window){
var S = function(selector, context) {
return new DOM(selector, context);
};
var DOM = function(selector, context) {
var currentContext = document;
if (context) {
if (context.nodeType) {
currentContext = context;