Skip to content

Instantly share code, notes, and snippets.

Denis denisfl

View GitHub Profile
@denisfl
denisfl / Item.vue
Last active Aug 3, 2018
Vue code example: build grid like Yandex.Zen
View Item.vue
<template>
<div class="item" :class="itemClasses" :data-id="item.id">
<div class="item-container">
<div class="item-cover">
<div class="item-cover-thumb" :style="thumbUrl"></div>
<div class="item-cover-mask"></div>
</div>
<div class="item-content">
<div class="item-title" :class="titleClasses">
<a class="item-link" :href="item.url" v-if="item.url && !fullArticle">
@denisfl
denisfl / store.js
Created Aug 3, 2018
Vue code exaple
View store.js
import Vue from 'vue'
import Vuex from 'vuex'
import slice from 'lodash/slice'
import take from 'lodash/take'
import flattenDeep from 'lodash/flattenDeep'
import each from 'lodash/each'
Vue.use(Vuex)
const URL = '/teasers'
@denisfl
denisfl / .zshrc
Created Sep 20, 2016
.zshrc config
View .zshrc
# Path to your oh-my-zsh installation.
export ZSH=$HOME/.oh-my-zsh
# Set name of the theme to load.
# Look in ~/.oh-my-zsh/themes/
# Optionally, if you set this to "random", it'll load a random theme each
# time that oh-my-zsh is loaded.
ZSH_THEME="robbyrussell"
View Checkbox.css
/*
* Screenshot: http://take.ms/GrVMm
* Link: https://my.whisk.com/search?term=Quick
*/
@import "imports/variables.css";
:root {
--Checkbox-uncheck-border-color: #979797;
}
@denisfl
denisfl / frontend-guidline.md
Last active Jan 16, 2016
Общие соглашения по верстке фронтенда
View frontend-guidline.md

При разработке необходимо использовать gulp или webpack.

Структура папок

Структура может быть различной в зависимости от проекта, но выделять

  • компоненты
  • стейты
  • ресурсы (стили, скрипты, картинки), которые никак нельзя вынести в какой-то отдельный компонент
@denisfl
denisfl / .csscomb.json
Created Jan 16, 2016
Config fo csscomb
View .csscomb.json
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"block-indent": 2,
"color-case": "upper",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"exclude": [
".git/**",
View vertical_rythm.scss
$vr-font-size: 15px !global;
$vr-line-height: 1.5 !global;
$vr-cap-height: 0.6 !global;
$vr-line-scale: 2 !global;
$vr-grid-unit: $vr-line-height * $vr-font-size / $vr-line-scale !global; // (px)
@function em($px: 0, $font-size: $vr-font-size) {
@return $px / $font-size + em;
}
@denisfl
denisfl / .bowerrc
Last active Aug 29, 2015
Middleman bower template
View .bowerrc
{
"directory": "bower_components"
}
@denisfl
denisfl / get-sprite.sass
Created Dec 11, 2012 — forked from dfadler/get-sprite.sass
A SASS mixin for generating a sprite declaration block that will work with media queries
View get-sprite.sass
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true)
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
$sprite-image: sprite-file($map, $sprite)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
$sprite-map: sprite-url($map)
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
You can’t perform that action at this time.