Skip to content

Instantly share code, notes, and snippets.

@syahrasi
syahrasi / styles.css
Created December 20, 2011 15:47 — forked from sevenspark/styles.css
ThemeSwitcher + Preview
/* Preview hover styles */
#theme_list ul li {
position:relative;
}
.product-preview{
position:absolute;
left:100%;
top:-1px;
margin-left:1px;
background:#222;
require 'sinatra'
require 'dm-core'
require 'dm-migrations'
require 'haml'
DataMapper.setup(:default, 'sqlite3::memory:')
class Message
include DataMapper::Resource
@syahrasi
syahrasi / Gemfile
Created July 25, 2012 21:39 — forked from jsahlen/Gemfile
My Guard-based build system for front-end assets – see my blog post at http://monospace.se/posts/guard-build-system
source :rubygems
# V8 JavaScript Engine (for Uglifier)
gem "therubyracer"
# SASS & Compass
gem "sass", "~> 3.2.0.alpha"
gem "compass"
# For concatenation/compression
@syahrasi
syahrasi / Gemfile
Created August 3, 2012 19:30 — forked from dvessel/README.mdown
Sass+Compass, Guard, LiveReload
# ~/Gemfile
source "http://rubygems.org"
group :development do
gem 'compass' # Depends on Sass, will be installed automatically.
gem 'compass-960-plugin' # 960.gs
gem 'compass-validator' # So you can `compass validate`.
gem 'oily_png' # Faster Compass sprite generation.
gem 'css_parser' # Helps `compass stats` output statistics.
@syahrasi
syahrasi / README.md
Created October 5, 2012 05:03 — forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
<?php
$out = '';
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');
function makeColorButtons(){
var color_select = $('#product-select-option-0'),
color_list = $('#colors').html("");
color_select.find('option').each(function(i,el){
var element = $(el);
{% if product.tags.size > 0 %}
<!-- START RELATED -->
<div id="related">
<h6>{% if settings.related.size > 0 %}{{ settings.related | escape }}{% else %}Take a look at these great accessories:{% endif %}</h6>
<!-- START SLIDER -->
<div id="slider" class="clear">
<!-- START PREV -->
<div id="prev">
<p><a href="/collections/all" class="inactive">Previous</a></p>
</div>
@syahrasi
syahrasi / styleguide-rendered.html
Last active December 28, 2015 11:39 — forked from una/SassMeister-input-HTML.html
Generated by SassMeister.com.
<!-- @una made this -->
<ul class="color-list">
<li class="color-box brick-red"></li>
<li class="color-box strawberry"></li>
<li class="color-box deep-orange"></li>
<li class="color-box tangerine"></li>
<li class="color-box gold"></li>
<li class="color-box sunshine"></li>
<li class="color-box grass-green"></li>