[ FontFaceObserver ] check whether font is loaded

var font1 = new FontFaceObserver("heebo"),
var font2 = new FontFaceObserver("heebo");

Promise.all([font1.load(), font2.load()]).then(function () {
console.log('Font is available');
}, function () {
console.log('Font is not available');
});

ref : https://github.com/bramstein/fontfaceobserver

Advertisements

[ rails ] precompile CSS

Using stylesheet_path to load CSS

views/layouts/whatever.html.haml

loadCSS("#{stylesheet_path "v3/614.css"}")

 

Need to add to precompile

config/initializers/assets.rb

# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.

Rails.application.config.assets.precompile += %w(
v3/614.css
)

Now on site, v3.614.css will be called.

 

Run precompile

$ rake assets:clobber # Remove compiled assets in /public/assets and /tmp/cache/assets

$ rake assets:precompile # Compile all the assets named in config.assets.precompile to /public/assets 

More : http://guides.rubyonrails.org/asset_pipeline.html

[ scss css ] modular-scale ms()

variables

$ms-base: 20px, 50px;

$ms-ratio: 1.618; /* default */

ms()

$ms-1: ms(-1); // => 19.099px = 50px/1.618/1.618 = 50px / ratio / ratio [b]

$ms: ms(0); // => 20px [a--base]
$ms1: ms(1); // => 30.902px = 50px/1.618 = 50px / ratio [b]
$ms2: ms(2); // => 32.36px = 20px*1.618 = 20px * ratio [a]
$ms3: ms(3); // => 50px [b--base]

$ms4: ms(4); // => 52.358px = 20px*1.618*1.618 = 20px * ratio * ratio [a]

 

ref : http://www.modularscale.com/?20,50&px&1.618,

https://zellwk.com/blog/modular-scale/

[ susy ] span

span ( 10-column grid )

@include span(full)

 

@include span(1 of 3)

 

@include span(9 last);
@include span(6 of 12 last);

 

Custom Susy variable

$susy: (
container: 62.75em,
columns: 12,
gutters: 1/6,
global-box-sizing: border-box
);

 

Span and glutter ( margin-right [ default ] ) 

Picture from https://zellwk.com/blog/susy-gutter-positions/

 

gutter-position: after /* default */

 

span

// Scss
.test {
@include span(3 of 4);
}

generated CSS

.test {
width: 73.68421%;
float: left;
margin-right: 5.26316%;
}

** The last span will margin-right=0

// Scss
.content {
@include span(3 of 4);
}
.sidebar {
@include span(1 of 4 last);
}

generated CSS

.last {
width: 21.05263%;
float: right;
margin-right: 0;
}

** If we would like to exclude the margin-right on the particular span, use 0 at the end ( ref : https://github.com/oddbird/susy/issues/502 ).

@include span(8 of 24 0)

ref : http://susy.readthedocs.io/toolkit/,

https://zellwk.com/blog/susy-gutter-positions/

[ spot.im ] integration

Old

<div data-spotim-module="recirculation" data-spot-id="sp_XXXXXXXX"></div>
<script src="https://recirculation.spot.im/spot/sp_XXXXXXXX"></script>
<script src="https://launcher.spot.im/deferred/bundle.js" data-spotim-module="deferred-launcher" data-spot-id="sp_XXXXXXXX" data-post-id="POST_ID_HERE"></script>

New

<div data-spotim-module="recirculation" data-spot-id="SPOT_ID"></div>
<script async src="https://recirculation.spot.im/spot/SPOT_ID"></script>
<script async src="https://launcher.spot.im/spot/SPOT_ID" data-spotim-module="spotim-launcher" data-post-url="ARTICLE_URL" data-post-id="POST_ID"></script>

ref : https://spotim-jira.atlassian.net/wiki/spaces/SP/pages/211828/Conversation+implementation

Spot.IM Data Attributes

Example

data-messages-count=”2″