Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: locally scope CSS to '.gutenberg' class #77

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

WIP: locally scope CSS to '.gutenberg' class #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7627882
Everything locally scoped except some stray 'html' and 'body' references
billiegoose Aug 23, 2018
fb20f40
Fix image resizing JavaScript (use local line-height and fix loading …
billiegoose Aug 23, 2018
5c07ad5
Finish removing global styling
billiegoose Aug 23, 2018
5eb6b0d
update compiled assets
billiegoose Aug 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
545 changes: 235 additions & 310 deletions assets/combined.css
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified assets/combined.gz.css
View file
Open in desktop
Binary file not shown.
Binary file modified assets/combined.gz.js
View file
Open in desktop
Binary file not shown.
54 changes: 28 additions & 26 deletions assets/combined.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,46 +80,48 @@

// 2. THE JAVASCRIPT WAY
// Construct the function
function fixImgHeight() {
function fixImagesHeight() {

function fixImgHeight (img) {
//Reset height first
img.style.height = 'auto';
// Get original height
var imgOriginalHeight = img.offsetHeight;
// Calculate new height
var div = Math.floor(imgOriginalHeight / lineHeight);
var imgNewHeight = lineHeight * div;
// Set new height
img.style.height = imgNewHeight + 'px';
}

// Get all images
var images = document.querySelectorAll('img');

// Get line-height
var element = document.getElementsByTagName('body')[0];
var style = window.getComputedStyle(element);
var lineHeight = parseInt(style.getPropertyValue('line-height'));
var i;
var length = images.length;
var imgOriginalHeight;
var div;
var imgNewHeight;

// For each image in images get original height, calculate height rounded to baseline grid, set new height
for (i = 0; i < length; ++i) {

//Reset height first
images[i].style.height = 'auto';

// Get original height
imgOriginalHeight = images[i].offsetHeight;

// Calculate new height
div = Math.floor(imgOriginalHeight / lineHeight);
imgNewHeight = lineHeight * div;

// Set new height
images[i].style.height = imgNewHeight + 'px';
for (var i = 0; i < length; ++i) {
// Get line-height
var style = window.getComputedStyle(images[i]);
var lineHeight = parseInt(style.getPropertyValue('line-height'));

// Wait until the image is loaded to measure its height.
if (images[i].complete) {
fixImgHeight(images[i]);
} else {
images[i].addEventListener('load', function () {
fixImgHeight(this)
})
}
}
}

document.getElementById('btnToggleGrid').onclick = toggleGrid;

//Fix once on first page load
fixImgHeight();
fixImagesHeight();

//Make sure that we fix images on each window resize (add debounce for performance)
window.addEventListener('resize', debounce(fixImgHeight, 50), true);
window.addEventListener('resize', debounce(fixImagesHeight, 50), true);


//helper: debounce
Expand Down
2 changes: 1 addition & 1 deletion assets/combined.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/combined.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 14 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,21 @@
<title>Gutenberg — Meaningful Web Typography Starter Kit</title>
<link rel="stylesheet" href="assets/combined.min.css">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic' rel='stylesheet' type='text/css'>
<style>
@media screen and (min-width: 40em) {
body,
html {
margin: 0;
width: 100%;
max-width: none;
}
}
body {
margin: 0;
}
</style>
</head>
<body>
<body class="gutenberg">
<div class="toggleWrapper">
<a id="btnToggleGrid" class="btnToggleGrid" href="javascript:void(0)">Turn Grid On</a>
</div>
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"main": "index.html",
"dependencies": {},
"scripts": {
"build": "grunt",
"test": "stylelint src/style/**/*.scss"
},
"repository": {
Expand All @@ -24,6 +25,7 @@
"devDependencies": {
"grunt": "~0.4.5",
"grunt-browser-sync": "~1.5.3",
"grunt-cli": "^1.3.1",
"grunt-contrib-compress": "~0.12.0",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-cssmin": "~0.10.0",
Expand Down
54 changes: 28 additions & 26 deletions src/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,46 +80,48 @@

// 2. THE JAVASCRIPT WAY
// Construct the function
function fixImgHeight() {
function fixImagesHeight() {

function fixImgHeight (img) {
//Reset height first
img.style.height = 'auto';
// Get original height
var imgOriginalHeight = img.offsetHeight;
// Calculate new height
var div = Math.floor(imgOriginalHeight / lineHeight);
var imgNewHeight = lineHeight * div;
// Set new height
img.style.height = imgNewHeight + 'px';
}

// Get all images
var images = document.querySelectorAll('img');

// Get line-height
var element = document.getElementsByTagName('body')[0];
var style = window.getComputedStyle(element);
var lineHeight = parseInt(style.getPropertyValue('line-height'));
var i;
var length = images.length;
var imgOriginalHeight;
var div;
var imgNewHeight;

// For each image in images get original height, calculate height rounded to baseline grid, set new height
for (i = 0; i < length; ++i) {

//Reset height first
images[i].style.height = 'auto';

// Get original height
imgOriginalHeight = images[i].offsetHeight;

// Calculate new height
div = Math.floor(imgOriginalHeight / lineHeight);
imgNewHeight = lineHeight * div;

// Set new height
images[i].style.height = imgNewHeight + 'px';
for (var i = 0; i < length; ++i) {
// Get line-height
var style = window.getComputedStyle(images[i]);
var lineHeight = parseInt(style.getPropertyValue('line-height'));

// Wait until the image is loaded to measure its height.
if (images[i].complete) {
fixImgHeight(images[i]);
} else {
images[i].addEventListener('load', function () {
fixImgHeight(this)
})
}
}
}

document.getElementById('btnToggleGrid').onclick = toggleGrid;

//Fix once on first page load
fixImgHeight();
fixImagesHeight();

//Make sure that we fix images on each window resize (add debounce for performance)
window.addEventListener('resize', debounce(fixImgHeight, 50), true);
window.addEventListener('resize', debounce(fixImagesHeight, 50), true);


//helper: debounce
Expand Down
9 changes: 9 additions & 0 deletions src/style/_gutenberg-config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@

$edit-mode: true !default; // [ true / false ] - Enables/disables the grid toggle button.

$gutenberg-selector: ".gutenberg" !default; // Can be complex selector such as "[data-slate-editor=\"true\"]"

$use-rem: false !default; // disable 'rem' units which depend on global <html> element style.

$use-grid-button: true !default;

// Horizontal Rule style
$hr-style: type !default; // [ line / type ]

// Theme / Fonts
$theme: Merriweather !default; // [ Merriweather / OpenSans / custom ]
$custom-font-body: null !default; // [ "Libre Baskerville", Georgia, serif ]
Expand Down
Loading