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.

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

Move from box-shadow to border-image for pixelated borders #234

Merged
merged 5 commits into from
Dec 29, 2018

Conversation

trezy
Copy link
Member

@trezy trezy commented Dec 28, 2018

Description
Our previous usage of box-shadows and pseudo elements proved to be pretty buggy. Converting to border-images seems to have fixed a lot of the issues that box-shadows caused, such as background-colors appearing over top of our borders.

Compatibility
This change both eliminates pseudo elements from several components, and adds pseudo elements to components that did not have them before. This could cause compatibility issues for users that relied on the existence of those pseudo elements for various styling techniques.

Caveats
This change adds ~2KB to both the minified and non-minified library files.

File Size (before) Size (after)
nes.css 254KB 256KB
nes.min.css 236KB 238KB

Our previous usage of `box-shadows` and pseudo elements proved to be pretty buggy. Converting to
`border-image`s seems to have fixed a lot of the issues that `box-shadows` caused, such as
`background-color`s appering over top of our borders.

BREAKING CHANGE: This change both eliminates pseudo elements from several components, and adds
pseudo elements to components that did not have them before. This could cause compatibility issues
for users that relied on the existence of those pseudo elements for various styling techniques.
@trezy trezy added enhancement New feature or request breaking Breaking changes labels Dec 28, 2018
@trezy trezy self-assigned this Dec 28, 2018
@trezy trezy requested a review from a team December 28, 2018 20:35
Copy link
Member

@abdallahalsamman abdallahalsamman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🙏

Copy link
Member

@abdallahalsamman abdallahalsamman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@abdallahalsamman abdallahalsamman merged commit 44a1fb2 into develop Dec 29, 2018
@abdallahalsamman abdallahalsamman deleted the refactor/borders-to-svgs branch December 29, 2018 19:24
@BcRikko
Copy link
Member

BcRikko commented Feb 16, 2019

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking Breaking changes enhancement New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants