jkeyes / baseline Goto Github PK

View Code? Open in Web Editor NEW

290.0 13.0 28.0 199 KB

HTML and CSS baseline grid tools and examples

Home Page: http://keyes.ie/things/baseliner/

JavaScript 89.64% HTML 10.36%

baseline's Introduction

Using Baseliner

Bookmarklet

The bookmarklet can be found here and it allows you to run Baseliner on any webpage.

Super-short Example

<script src="baseliner.js"></script>
<script>
window.onload = function() {
    baseliner = new Baseliner(8);
}
</script>

This will add the Baseliner widget to your page:

If you click on Show Baseline an 8px baseline grid overlay is displayed:

You can customize the size of the grid too:

Configuration Options

Three configuration options are supported:

gridColor — an RBGA array ([255, 0, 0, 255] for red) or a color string (red, blue, green or grey/gray). If this option is not set, it defaults to a highly transparent red.
gridHeight — the height of the baseline grid. If it is not set, it defaults to 10 pixels.
gridOffset — the number of pixels to offset the grid vertically. If it is not set, it defaults to 0 pixels.

Some more examples

// a black grid, 20 pixels high
baseliner = new Baseliner({'gridColor': [0, 0, 0, 255], 'gridHeight': 20 });
// a red grid, 10 pixels high
baseliner = new Baseliner({'gridColor': 'red'});
// a black grid, 24 pixels high, offset by 10 pixels
baseliner = new Baseliner({'gridHeight': 24, 'gridOffset': 10});

baseline's People

Contributors

Stargazers

Watchers

baseline's Issues

Bookmarket docs is unclear

I've never used Bookmarklets before but my understanding is that it is just a bookmark with the URL of javascript:....

I followed the link on the README to https://keyes.ie/things/baseliner/ and it says:

How do I use it?
The easiest way to use baseliner is the Baseliner bookmarklet, which always loads the latest code.

If you prefer a custom baseline grid can be created directly:
...

I'm confused as I expected to see the code to put in the bookmarklet. Am I missing something?

The bookmarklet link doesn't work

There is a bookmarklet link in the readme:

"Add this bookmarklet to use Baseliner on any webpage."

This is not possible to drag this to a bookmark bar.

I have the same problem in a project of mine, so I guess it's up to the github markdown problem.

Please add pointer-events none

Please add pointer-events:none; to the baseline overlay
it would improve and it will be easier to inspect and work with the bookmarklet

HTTPS vs HTTP

Suggest changing "http:" to "https:" in https://github.com/jkeyes/baseline/blob/master/baseliner/bookmarklet.src.js#L13

This prevents browsers blocking mixed content and the plugin failing silently.

Also think that the version of the bookmarklet here and in the doc's differs - the one here "works" with the https fix, but there are errors when using the link similar to #6

Doesn't load in Chrome / Mac

Hi.. great idea..but in the latest Chrome on PC and on Mac - the bookmarklet doesn't see to load.

Using this for the bookmarklet.

javascript:(function(){var _grid_height=10;if(window.baseliner){baseliner.toggle();}else{var _already_loaded=document.getElementById('baseliner-script');if(_already_loaded){return;};var _baseliner=document.createElement('script');_baseliner.id='baseliner-script';_baseliner.type='text/javascript';_baseliner.src='http://files.keyes.ie/things/baseliner/baseliner-latest.min.js';document.getElementsByTagName('body')[0].appendChild(_baseliner);var loadFunction=function(evt){if(window.baseliner){return;};baseliner=new Baseliner(_grid_height);baseliner.toggle();};_baseliner.onreadystatechange=loadFunction;_baseliner.onload=loadFunction;};})();)

Input type = number

It would be really nice if you could adjust the offset and grid size by using the up/down arrow keys when focused in the box. If you change the inputs to type=number then that's out of the box functionality.

Thanks!