Skip to content

Instantly share code, notes, and snippets.

Styling


Class Outline

  • Review tags (hr, h1, img, a, b), nesting,
  • Style is an 'attribute' of a tag, just like href or src.
  • Style syntax is nitpicky -- Spot the Error exercise.
  • Lab time: background; color; font-size; font-style; text-align;
  • Multiple style attributes
  • Image styles width, float
@ashaegupta
ashaegupta / gist:5816401
Created June 19, 2013 17:59
hashy weirdness! vespr digest email
# Lessons first
curl -i https://track.customer.io/api/v1/customers/512f62849d5344340395e0a3/events \
-u fa9665e3a50cb173a34b:3eed48110b791baf3a57 \
-H "Content-type: application/json" \
-d "{\"data\":{\"newestLessonsSection\":{\"userSections\":[{\"lessons\":[1],\"teacherLink\":\"hi\",\"teacherName\":\"Jason Matthew\"},{\"lessons\":[2],\"teacherLink\":\"hihi\",\"teacherName\":\"Robert Buice\"}],\"numNewLessons\":37}},\"name\":\"digest\"}"
# Lessons second
curl -i https://track.customer.io/api/v1/customers/512f62849d5344340395e0a3/events \
-u fa9665e3a50cb173a34b:3eed48110b791baf3a57 \
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
<h1>You asked. We delivered </h1>
The number one thing many of you asked for was a new editor. Well, we've spent the last 3 months grueling over our new editor, and it's ready for prime time.
Here's what you can do with our new editor:
<p></p>
<ul>
<li>Create a visually complex email in a few minutes, by selecting content types and easily adding them to your email.</li>
<li>Preview the email as you edit it.</li>
<li>And of course, still write in plain old html if you prefer it.</li>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Light</title>
<style type="text/css">
/* Styles get inlined when email is sent */
@ashaegupta
ashaegupta / Sample Campaign
Created September 9, 2013 19:18
Sample campaign data
campaign: {
id: 39,
state: "processing",
name: "Welcome Campaign",
segment_groups: "[[1,70]]",
anchor_groups: "[[66,70]]",
filter_groups: "[45]",
email_templates_count: 4,
draft_email_count: 400,
total_emails_count: 0,
@ashaegupta
ashaegupta / gist:6766434
Created September 30, 2013 16:33
ember v1.0.0-147-g60b68ef
This file has been truncated, but you can view the full file.
// ==========================================================================
// Project: Ember - JavaScript Application Framework
// Copyright: ©2011-2013 Tilde Inc. and contributors
// Portions ©2006-2011 Strobe Inc.
// Portions ©2008-2011 Apple Inc. All rights reserved.
// License: Licensed under MIT license
// See https://raw.github.com/emberjs/ember.js/master/LICENSE
// ==========================================================================
@ashaegupta
ashaegupta / gist:6826580
Last active December 24, 2015 16:18
Delivery data. *new properties.
delivery: {
id: 1
recipient: "michael@customer.cio",
subject: "Michael, let me help you get started",
drafted: TIMESTAMP, // yesterday
sent: TIMESTAMP, // 3 hrs ago
pending: TIMESTAMP, // 4 hours ago
failed: null,
bounced: null,
@ashaegupta
ashaegupta / gist:7789210
Created December 4, 2013 15:16
Customer data.
customer: {
id: 12031923019,
email: "michael@madrid.com",
signed_up: 1386169925 //TIMESTAMP,
last_visited: 1386169925 //TIMESTAMP,
last_emailed: 1386169925 //TIMESTAMP,
unsubscribed: false //boolean,
}
@ashaegupta
ashaegupta / gist:7893843
Last active December 30, 2015 22:19
Segment data. Eventually there will be more, but this is a good start.
segment: {
"id":5,
"name":"Have signed up",
"status":null,
"rebuilding":false,
"rebuilding_status":null,
"customer_count":4395,
"updated_at": 1386703944 //Timestamp
}