Skip to content

Instantly share code, notes, and snippets.

View marypieroszkiewicz's full-sized avatar

Mary Pieroszkiewicz marypieroszkiewicz

85 followers · 163 following
View GitHub Profile
@marypieroszkiewicz
marypieroszkiewicz / codereview__sass--bem--mixin
Created March 26, 2019 20:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GOGOmedia - Recruitment Task</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&amp;subset=latin-ext" rel="stylesheet">
@marypieroszkiewicz
marypieroszkiewicz / gist:d3d0eeb3f0e5d1334b59524aba3e5189
Last active March 26, 2019 16:21
mixin-repeating-element
/* --- HTML --- */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GOGOmedia - Recruitment Task</title>
<!-- Google Fonts -->
@marypieroszkiewicz
marypieroszkiewicz / %placeholder @extend vs mixin
Created March 23, 2019 19:00
.boxes {
display: flex;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
@include screen('tablet') {
padding: 2.875rem 1.75rem 0;
}
@marypieroszkiewicz
marypieroszkiewicz / mixin__rwd.scss
Created March 22, 2019 21:39
// VARIABLES - Media Queries
$mobile__420: "only screen and (max-width: 420px)";
$tablet__860: "only screen and (min-width: 860px)";
$desktop__1200: "only screen and (min-width: 1200px)";
$high-screen__1440: "only screen and (min-width: 1440px)";
// MIXIN RWD
@mixin for-size($size) {
@if $size == mobile {
@media #{$mobile__420} {
@marypieroszkiewicz
marypieroszkiewicz / gulpfile.js v4
Created March 21, 2019 17:29
const gulp = require('gulp');
const sass = require('gulp-sass');
const gplumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
var errorHandler = function() {
return gplumber(function(error) {
console.log(error.message);
})
};
@marypieroszkiewicz
marypieroszkiewicz / gulpfile.js
Created March 21, 2019 14:54
const gulp = require('gulp');
const sass = require('gulp-sass');
const gplumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
var errorHandler = function() {
return gplumber(function(error) {
console.log(error.message);
})
};