swervo

Animated CSS-Tricks Logo

I did up the CSS-Tricks logo for my friend and boss man Chris Coyier. Using GreenSock's morphSVG plugin

A Pen by Sarah Drasner on CodePen.

License.

swervo

<!----- ZXBase.cmp ----->
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes">
  <aura:attribute name="myJSON" type="Object[]"/>
  
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

  <div class="slds-container--large slds-container--center">
    <aura:iteration items="{!v.myJSON}" var="formElement">
      <c:ZXText jsonObj="{!formElement}"/>
    </aura:iteration>

swervo

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

This is where any fun you might have been having ends. Now it’s time to get serious and talk about rules.

Writing CSS is hard. Even if you know all the intricacies of position and float and overflow and z-index, it’s easy to end up with spaghetti code where you need inline styles, !important rules, unused cruft, and general confusion. This guide provides some architecture for writing CSS so it stays clean and ma

swervo

CSS Architecture and style

This page describes a suggested architectural approach for CSS. This is followed by guidance on CSS style. For many on this project CSS is unfamiliar and while it is easy to achieve an acceptable short-term result in many cases this can be at a huge cost for future flexibility and maintainability. The industry in general suffers from a lack of rigour in terms of good CSS practices and there is a lack of consensus in terms of which approach to follow. This is largely due to the widely differing requirements of web development projects. However, with the shift towards web application development the importance of good CSS architecture is becoming more apparent.

Note that this page is a work in progress; refer to a backlog of additional items in the end of this page.

Developer pre-requisites

swervo

CSS architecture primer

• Code pre-requisites

  • The Sass language
  • Sass technique
  • Compass

• Background reading

  • SMACSS - Scalable and Modular Architecture for CSS

• Philip Walton - Decoupling your HTML, CSS and javascript

swervo

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// The idea is to provide some kind of friendly API to log stuff in Sass,
// including a way to log different type of messages (warnings, errors...).
// This is obviously mainly aimed at framework and library developers.
//
// Current implementation provides:

swervo

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// sizing variables
$xsPlus: 360px;
$smPlus: 768px;
$mdPlus: 992px;
$lgPlus: 1200px;

swervo

// Original code from http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
	for (i=0; i<metas.length; i++) {
		if (metas[i].name == "viewport") {
			metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
		}
	}

swervo

/**
 * Provides requestAnimationFrame in a cross browser way.
 * @author greggman / http://greggman.com/
 */

if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||