Permalink
Browse files

Initial commit

  • Loading branch information...
jh3y committed Jan 21, 2016
0 parents commit af0bbab935db4c9505b16e4b9b118e736dc14932
@@ -0,0 +1,5 @@
public/
node_modules/
.publish/
@@ -0,0 +1,6 @@
{
"HTMLRootRequiresLang": "warning",
"UseConsistentQuotes": "warning",
"NoAttributeWhitespace": "warning",
"AddValueToSubmit": "warning"
}
@@ -0,0 +1,35 @@
{
"blocks": false,
"brackets": "never",
"colons": "never",
"colors": "always",
"commaSpace": "always",
"commentSpace": "always",
"cssLiteral": "never",
"depthLimit": false,
"duplicates": true,
"efficient": "always",
"extendPref": false,
"globalDupe": false,
"indentPref": false,
"leadingZero": "never",
"maxErrors": false,
"maxWarnings": false,
"mixed": false,
"namingConvention": false,
"namingConventionStrict": false,
"none": "never",
"noImportant": true,
"parenSpace": false,
"placeholders": "always",
"prefixVarsWithDollar": true,
"quotePref": false,
"semicolons": "never",
"sortOrder": "grouped",
"stackedProperties": "never",
"trailingWhitespace": "never",
"universal": false,
"valid": true,
"zeroUnits": "never",
"zIndexNormalize": false
}
@@ -0,0 +1,5 @@
#driveway
pure CSS content layout
@jh3y 2016
@@ -0,0 +1,61 @@
var env = 'public/',
pkg = require('./package.json');
module.exports = {
pkg: {
name: pkg.name
},
pluginOpts: {
browserSync: {
port : 1987,
server : {
baseDir: env
}
},
gSize: {
showFiles: true
},
jade: {
pretty: true,
data : {
name : pkg.name,
description: pkg.description
}
},
load: {
rename: {
'gulp-gh-pages' : 'deploy',
'gulp-util' : 'gUtil',
'gulp-minify-css' : 'minify',
'gulp-autoprefixer': 'prefix'
}
},
prefix: [
'last 3 versions',
'Blackberry 10',
'Android 3',
'Android 4'
],
rename: {
suffix: '.min'
},
stylint: {
reporter: 'stylint-stylish'
}
},
paths: {
base: env,
sources: {
docs : 'src/jade/*.jade',
markup : 'src/jade/**/*.jade',
img : 'src/img/**/*.*',
overwatch: env + '**/*.{html,css}',
styles : 'src/stylus/**/*.stylus'
},
destinations: {
dist: './dist',
css : env + 'css/',
img : env + 'img/',
html: env
}
}
};
@@ -0,0 +1,99 @@
var gulp = require('gulp'),
gConfig = require('./gulp-config'),
browserSync = require('browser-sync'),
opts = gConfig.pluginOpts,
plugins = require('gulp-load-plugins')(opts.load),
isDist = (plugins.gUtil.env.dist) ? true: false,
isDeploy = (plugins.gUtil.env.deploy) ? true: false,
isStat = (plugins.gUtil.env.stat) ? true: false,
src = gConfig.paths.sources,
dest = gConfig.paths.destinations;
/*
serve; creates local static livereload server using browser-sync.
*/
gulp.task('serve', ['compile'], function(event) {
browserSync(opts.browserSync);
return gulp.watch(src.overwatch).on('change', function(file) {
if (file.path.indexOf('.css') === -1) browserSync.reload();
});
});
/*
styles:compile/styles:watch
watch for changes to styles files then compile stylesheet from source
auto prefixing content and generating output based on env flag.
*/
gulp.task('styles:lint', function() {
return gulp.src(src.styles)
.pipe(plugins.stylint(opts.stylint))
.pipe(plugins.stylint.reporter());
});
gulp.task('styles:compile', ['styles:lint'], function(event) {
return gulp.src(src.styles)
.pipe(plugins.plumber())
.pipe(plugins.stylus())
.pipe(plugins.prefix(opts.prefix))
.pipe(isStat ? plugins.size(opts.gSize): plugins.gUtil.noop())
.pipe(isDeploy ? plugins.gUtil.noop(): gulp.dest(isDist ? dest.dist: dest.css))
.pipe(plugins.minify())
.pipe(plugins.rename(opts.rename))
.pipe(isStat ? plugins.size(opts.gSize): plugins.gUtil.noop())
.pipe(gulp.dest(isDist ? dest.dist: dest.css))
.pipe(browserSync.stream());
});
gulp.task('styles:watch', function(event) {
gulp.watch(src.styles, ['styles:compile']);
});
/*
markup:compile/markup:watch
watch for all markup file changes then compile
page document files.
*/
gulp.task('markup:lint', function() {
return gulp.src(src.markup)
.pipe(plugins.jadelint());
});
gulp.task('markup:compile', function() {
return gulp.src(src.docs)
.pipe(plugins.plumber())
.pipe(isDeploy ? plugins.jade(): plugins.jade(opts.jade))
.pipe(gulp.dest(dest.html));
});
gulp.task('markup:watch', function(event){
gulp.watch(src.markup, ['markup:compile']);
});
gulp.task('img:publish', function() {
return gulp.src(src.img)
.pipe(gulp.dest(dest.img));
});
gulp.task('deploy', ['compile'], function(event) {
isDeploy = true;
return gulp.src(src.overwatch)
.pipe(plugins.deploy());
});
gulp.task('compile', [
'markup:compile',
'styles:compile',
'img:publish'
]);
gulp.task('watch', [
'markup:watch',
'styles:watch'
]);
var defaultTasks = isDeploy ? [
'deploy'
]:[
'serve',
'watch'
];
gulp.task('default', defaultTasks);
@@ -0,0 +1,23 @@
{
"name": "driveway",
"version": "2.0.3",
"description": "CSS masonry effect",
"devDependencies": {
"browser-sync": "^2.5.3",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.1.0",
"gulp-gh-pages": "^0.5.0",
"gulp-jade": "^0.9.0",
"gulp-jadelint": "^0.1.0",
"gulp-load-plugins": "^0.9.0",
"gulp-minify-css": "^0.3.11",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-size": "^1.2.1",
"gulp-stylint": "^3.0.0",
"gulp-stylus": "^2.0.1",
"gulp-util": "^3.0.4",
"stylint": "^1.3.2",
"stylint-stylish": "^1.2.0"
}
}
BIN +106 KB src/img/photo-1.jpg
Binary file not shown.
BIN +114 KB src/img/photo-2.jpg
Binary file not shown.
@@ -0,0 +1,57 @@
html(lang="en-us")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
title= name
meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")
meta(name="description", content= description)
link(rel="stylesheet", href="css/#{name}.min.css")
link(rel="stylesheet", href="css/demo.min.css")
body
.masonry-layout
.masonry-layout__panel.image-holder.is--flipper
.masonry-layout__panel-content(style="height: 300px;")
.masonry-layout__panel-content-front
img(src="img/photo-1.jpg")
.masonry-layout__panel-content-back
p Here is a flipped image...
.masonry-layout__panel
.masonry-layout__panel-content.tx--white.bg--green
h1 Here is a masonry layout.
.masonry-layout__panel.is--cluster.is--horizontal.medium
.masonry-layout__panel.full-size.image-holder
.masonry-layout__panel-content
img(src="img/photo-2.jpg")
.masonry-layout__panel.image-holder.quarter-size
.masonry-layout__panel-content
img(src="img/photo-1.jpg")
.masonry-layout__panel
.masonry-layout__panel-content.bg--red.tx--white
p.
Some cool pics.
.masonry-layout__panel
.masonry-layout__panel-content.tx--white.bg--purple
h3 That's pretty cool, thanks for showing me.
.masonry-layout__panel.is--cluster.is--vertical.large
.masonry-layout__panel.image-holder.full-size
.masonry-layout__panel-content
img(src="img/photo-2.jpg")
.masonry-layout__panel.quarter-size
.masonry-layout__panel-content.bg--blue.tx--white
p.
This is an image, it's quite nice.
.masonry-layout__panel
.masonry-layout__panel-content.bg--blue.tx--white
a Click here to find out more.
.masonry-layout__panel
.masonry-layout__panel-content.tx--white.bg--red
p.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. Pellentesque lorem elit, dignissim interdum massa id, malesuada rutrum ligula. Suspendisse tempor quis mauris eu facilisis. Phasellus non volutpat diam, non dapibus ligula. Ut non molestie ex, nec sagittis mi. Curabitur suscipit tellus id dolor pretium blandit. Cras tristique tristique pharetra.
.masonry-layout__panel
.masonry-layout__panel-content.tx--white.bg--green
h2 Some post about something
p.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend.
.masonry-layout__panel.image-holder
.masonry-layout__panel-content
img(src="img/photo-1.jpg")
@@ -0,0 +1,39 @@
html(lang="en-us")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
title= name
meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")
meta(name="description", content= description)
link(rel="stylesheet", href="css/#{name}.min.css")
link(rel="stylesheet", href="css/dev.min.css")
body
.masonry-layout
- var n = 0
- var sizes = ['xs', 's', 'm', 'l']
- var nestedSizes = ['small', 'medium', 'large']
while n < 10
- var type = Math.floor(Math.random() * 4 + 1)
- var nested = Math.floor(Math.random() * 3 + 1)
- var nestedClass = 'masonry-layout__panel'
- var horizontalClass = ''
- var sizeClass = sizes[type - 1]
if nested === 1
- nestedClass = 'masonry-layout__cluster'
- horizontalClass = 'is--vertical'
- var isHorizontal = Math.floor(Math.random() * 2 + 1)
- var nestingSize = Math.floor(Math.random() * 3 + 1)
- sizeClass = nestedSizes[nestingSize - 1]
if isHorizontal === 1
- horizontalClass = 'is--horizontal'
div(class="#{sizeClass} #{nestedClass} #{horizontalClass}")
if nested === 1
.masonry-layout__panel.full-size
.masonry-layout__panel-content
.masonry-layout__panel.half-size
.masonry-layout__panel-content
.masonry-layout__panel.half-size
.masonry-layout__panel-content
else
.masonry-layout__panel-content
- n++
Oops, something went wrong.

0 comments on commit af0bbab

Please sign in to comment.