jbranchaud/captionss

Sensible CSS Image Captions

captionss's Issues

Update the README with more info and usage examples

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.

After incorporating a grunt workflow, add autoprefixer

Use the grunt-autoprefixer to make CSS more awesome.

index.html breaks on wide displays

Fix the index.html page so that it displays correctly for wide displays. Here is what it looks like now when a display is fairly wide:

Adding sliding up/down effects for the captions.

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; }

Add prefixes to the class selectors to avoid collisions.

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.

Increase the alpha value for the light theme to ensure it is visible across various images.

Increase the alpha value for the light theme from 0.7 to something like 0.825.

Add some guidelines to the CONTRIBUTING.md file.

Explain how to contribute. Right now the document is blank.

Validate the CSS

Run both captionss.css and captionss.min.css through a validator, such as the W3C CSS validator to make sure they both checkout.

Make captions more readable with higher alpha value for background

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.

Adding support for IE8

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.

Add styling for links in captions

It would be nice if links contained in captions got some styling to match the rest of the look.

Port the CSS to SCSS

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.

Setup Grunt tasks

Setup up Grunt tasks to automatically compress css, eventually compile LESS/SCSS, and serve the project's development environment.

font-size property set without unit in captionss.min.css

I ran captionss.min.css through a CSS validator (#1) and it flagged the error mentioned in #2 as well as font-size of 1.0 without a unit of size for the figure.medium selector.

Add some captionss selling points to the landing page

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).

captionss shouldn't change property values for the default figure tag

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).

Remove the empty CSS rules from captionss.css

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.

Remove the old overlay selector in favor of embed-over in 2.0.0.

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.

Clean up the overly verbose transitions

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.

Add favicons for website

Add favicons on the gh-pages branch that can be used by the website. Currently favicons from gandi.net are being used.

Move changelog from README to changelog.md

Proposal for a 2.0.0 selector naming scheme

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 bottom
• cap-top - caption positioned inside the image at the top
• cap-under - caption positioned outside the image, right under it
• cap-above - caption positioned outside the image, right above it
• cap-over - caption overlayed on the entire image

This 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.

Misuse of display property in captionss.css

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.

Pull out the neutral theme properties into a separate, individual CSS rule

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.

Port the CSS to LESS

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.