Jim jtrascap

☑️ CSS-only Todo List Checkbox Animation

Recreation of https://dribbble.com/shots/3959132-Todo-List-Swipe-To-Check

Original built with JS but adapted to be CSS-only since JS wasn't necessary.

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

Overview

Below are two techniques to help debug the WSOD (white screen of death), usually a 500 server error, in an ExpressionEngine site. The Basic-Debugging option will be suitable in most cases and is specific to ExpressionEngine. The Advanced-Debugging is generic and applicable to any PHP based software. If the basic debugging does not work, try the advanced.

If you get a WSOD you will need to first get your site to reveal an error before reporting it to EllisLab or the add-on developer. Simply reporting "I get a white screen" does not give the developer enough information to assist you. An error message on the other hand will point the developer to the source of the issue.

	{
	"vars": {
	"@gray-base": "#000",
	"@gray-darker": "lighten(@gray-base, 13.5%)",
	"@gray-dark": "lighten(@gray-base, 20%)",
	"@gray": "lighten(@gray-base, 33.5%)",
	"@gray-light": "lighten(@gray-base, 46.7%)",
	"@gray-lighter": "lighten(@gray-base, 93.5%)",
	"@brand-primary": "darken(#428bca, 6.5%)",
	"@brand-success": "#5cb85c",

	$white: #ffffff;
	$black: #000000;
	$red50: #ffebee;
	$red100: #ffcdd2;
	$red200: #ef9a9a;
	$red300: #e57373;
	$red400: #ef5350;
	$red500: #f44336;
	$red600: #e53935;
	$red700: #d32f2f;

	<?php if (! defined('BASEPATH')) exit('No direct script access allowed');

	$db['username'] = 'xxxxxxxxxxxxxx';
	$db['password'] = 'xxxxxxxxxxxxxx';
	$db['database'] = 'xxxxxxxxxxxxxx';

	This method requires the CE Image addon.
	Tell your editors to change the width/height/alignment in the image properties pop up to 300px or whatever and set the alignment if they want, but the actual size displayed on the page will be decided by you in the template code and CSS.

	In the EE template:

	{exp:ce_img:bulk max="500" crop="no" allow_scale_larger="no" quality="80" output='<a href="{orig}" class="embeded_image" title="{attr:title}" alt="{attr:alt}" style="{attr:style}"><img src="{made}" /></a>'}
	{wygwam_field}
	{/exp:ce_img:bulk}

	In the CSS:

	/* Universal Variables */

	$config['app_version'] = "255";
	$config['license_number'] = "0000-0000-0000-0000";
	$config['debug'] = "1";
	$config['install_lock'] = "";
	$config['system_folder'] = "system";
	$config['doc_url'] = "http://ellislab.com/expressionengine/user-guide/";
	$config['is_system_on'] = "y";
	$config['cookie_prefix'] = "";

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="/j/jquery.js"><\/script>')</script>
	{exp:easy_jail:js config="{offset:300}"}

	<div class="module__image image--lazy"
	data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"></div>