jbranchaud / captionss Goto Github PK
View Code? Open in Web Editor NEWSensible CSS Image Captions
Home Page: captionss.com
License: MIT License
Sensible CSS Image Captions
Home Page: captionss.com
License: MIT License
As one HN commenter points out, there are a few lines of CSS in captionss that modify properties of the default figure tag which isn't a good practice in the event that they have figure tags in their site that aren't intended to be styled by captionss.
Should be an easy fix, just add more specificity to those properties with the class selectors (embed
, embed-top
, overlay
).
It has been pointed out that captionss doesn't currently support IE8. I realize there is still a decent amount of people still sitting in IE8. I am, however, hesitant to muddy up the code making captionss work for such an outdated browser.
I was reading through documentation for HubSpot's tether and came across the following paragraph which gives me more confidence in my stance:
Google doesn't support IE8, Microsoft is dropping support in a few months, and not supporting it saves us a whole lot of trouble. If you are interested in adding support, get in touch, we're happy to accept a PR.
I built jekyll because existing image caption solutions were lacking in a number of ways, these are good selling points and should be briefly highlighted toward the top of the landing page (and in the README as well).
Explain how to contribute. Right now the document is blank.
Run both captionss.css
and captionss.min.css
through a validator, such as the W3C CSS validator to make sure they both checkout.
A couple HN commenters pointed out that the current README is pretty lacking so far. There needs to be more info about the project as well as usage examples so that a person isn't forced to go to the project page just to find out how to use it.
There are 4 different places in the code that set the background color and font color for the neutral theme which is obviously not a good practice, pull this out into a separate single CSS rule.
Setup up Grunt tasks to automatically compress css, eventually compile LESS/SCSS, and serve the project's development environment.
As one HN commenter pointed out, the class selector names I use are somewhat generic and it is possible that there could eventually be some collision with other CSS code.
They suggested adding some sort of prefix, such as cap-
, to the class selectors to reduce the likely hood of this happening.
This will break the current API though, so needs to wait until 2.0.0.
Use the grunt-autoprefixer to make CSS more awesome.
Issue #9 already asks for porting CSS to SCSS, but I should consider porting it to LESS as well for those who prefer the latter.
As suggested by a commenter on HN, it would be nice to offer an animation effect that slides the caption up or down to reveal or hide it.
The following code was suggested as a starting point:
figure figurecaption {
transition: all 0.4s;
transform: translateY(100%);
}
figure:hover figurecaption { transform: none; }
In order to make the syntax more consistent, embed-over
has been added with the same functionality as overlay
. As part of 2.0.0, overlay
should be removed in favor of only using embed-over
.
SCSS is the rage with all the young kids these days, so it only makes sense to port the CSS code to SCSS so that both can be offered.
When I first wrote the transitions part of the CSS, I was still new to that property. I added transitions properties to both the element and the hovered element, when really on the former is needed. This fix will make the code cleaner and more concise as well as produce a smaller file size.
It would be nice if links contained in captions got some styling to match the rest of the look.
I ran captionss.css
through a CSS validator (#1) and the lone error that came up is an instance of the display
property being set to the value of 1
for the figure.hide-smooth figcaption
selector.
Increase the alpha value for the light theme from 0.7 to something like 0.825.
Add favicons on the gh-pages branch that can be used by the website. Currently favicons from gandi.net are being used.
I am thinking about using cap
as a prefix to avoid conflicts with other css and then the following set of options:
cap-bottom
- caption positioned inside the image at the bottomcap-top
- caption positioned inside the image at the topcap-under
- caption positioned outside the image, right under itcap-above
- caption positioned outside the image, right above itcap-over
- caption overlayed on the entire imageThis covers existing options (embed
, embed-top
, overlay
) and also gives two more options that avoid obscuring the image by placing it above or under the image.
One HN commenter suggested using a higher alpha value at least for the neutral theme because for certain pictures it can be hard to read the text otherwise. I had also had this concern, so I think it would be good to play around with higher alpha values across various images.
There are a few CSS rules that are empty scattered throughout captionss.css. The detract from readability and will eventually leave me wondering if I forget to implement something, so they should instead just be removed now.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.