Skip to content

Instantly share code, notes, and snippets.

View kellishouts's full-sized avatar

kellishouts

17 followers · 0 following
View GitHub Profile
@kellishouts
kellishouts / out_of_this_world_sample_styles.css
Created February 6, 2015 04:28
Out of this World Sample Styles
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Fjalla+One);
html{
font-size: 16px;
font-family: 'Lato', sans-serif;
color: #FFF;
}
body{
background-image: url('/images/bg.jpg');
@kellishouts
kellishouts / todo layouts.md
Last active August 29, 2015 14:16 — forked from theRemix/todo crud.md
To Do Layouts (optional)

ToDo Layouts

Here are some pretty layouts for the To Do List. These are optional, you can use your own styles if you wish.

List View

1

List View Hover States

2

@kellishouts
kellishouts / gulp_sass_livereload_foundation.md
Last active April 20, 2023 17:34 — forked from theRemix/README.md
Gulp + Sass + LiveReload + Foundation

Gulp + Scss + LiveReload + Foundation

Goals

Set up a boilerplate Gulp + Scss + LiveReload + Foundation 5 workflow that:

  1. watches for any scss changes, then compiles scss source into css
  2. watches for any changes in the public directory, triggers live-reload
  3. serves your static content in public/
@kellishouts
kellishouts / gulpfile.js
Created June 23, 2015 07:07
Basic Gulpfile - Livereload and Sass
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
gulp.task('connect', function(){
connect.server({
root: 'public',
livereload: true
});
});
@kellishouts
kellishouts / gulp_sass_livereload.md
Last active January 24, 2022 06:40
Gulp + Sass + LiveReload 1.0

Gulp + Sass + LiveReload

This Gist goes over setting up a gulp workflow that will:

  1. watch for any sass changes, then compiles sass source into css
  2. watch for any changes in the public directory, and trigger live-reload
  3. serve static content in public/
@kellishouts
kellishouts / block_family.md
Last active March 27, 2017 23:33
Block Family

Block Family

Set up:

  1. Run gulp. This project uses the Gulp + Livereload + Sass Project boilerplate, however all of this should already be set up for you.

  2. Check that Livereload is running.

  3. Check that sass is compiling. (set a variable, use the variable, then check if gulp compiles to a proper css file)

@kellishouts
kellishouts / block_family_index.html
Created June 23, 2015 09:18
Block Family index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>block family</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>block family</h1>
@kellishouts
kellishouts / block_family_styles.scss
Created June 23, 2015 09:26
Block Family styles.scss
// Resets, Clearfix, etc
// import reset and clearfix
// Variables
$dark: #222;
$light: #EEE;
$highlight: orange;
$padding: 20px;
@kellishouts
kellishouts / css_for_n00bs.md
Last active September 29, 2016 20:56
CSS for n00bs

Intro to CSS / SCSS Styling for n00bs

Write html for the largest, most complex layout; style for the smallest, simplest layout.

1. Write good markup, thinking LARGE to SMALL

2. Add imports, resets, grids, css frameworks.

3. Give layout elements (rows and columns) really ugly styles (give everything a bright bg color or border)

@kellishouts
kellishouts / css_demo.scss
Created August 12, 2015 03:01
css_for_n00bs_demo.scss
// Imports /////////////////////////////////
@import "partials/reset";
@import "partials/clearfix";
// Really ugly styles /////////////////////////////////
body{
background-color: red;
font-size: 40px;