Skip to content

Instantly share code, notes, and snippets.

@psebborn
Last active June 8, 2021 15:29
Show Gist options
  • Save psebborn/3003095af2ff200126fe to your computer and use it in GitHub Desktop.
Save psebborn/3003095af2ff200126fe to your computer and use it in GitHub Desktop.
Sentence case for CSS
// CSS doesn't have a text-transform: sentence case,
// so here's a little mixin to spoof it for you
@mixin sentence-case() {
text-transform: lowercase;
&:first-letter {
text-transform: uppercase;
}
}
// USAGE:
.form-label {
@include sentence-case();
}
// COMPILED CSS:
.form-label {
text-transform: lowercase;
}
.form-label:first-letter {
text-transform: uppercase;
}
@kpaxman
Copy link

kpaxman commented Jul 27, 2017

Of course, true sentence case would leave some things, like the first letter of proper nouns, in uppercase. :)

@iamnewton
Copy link

iamnewton commented Aug 1, 2017

why not just remove the need to override and just use something like:

@mixin sentence-case() {
  &::first-letter {
    text-transform: uppercase;
  }
}

The problem with the current implementation is that it will lower any proper name or previously capitalized letter.

@ryanve
Copy link

ryanve commented Aug 17, 2017

I was working on some classes like this and came across this thread on google.

.case-none { text-transform: none }
.case-upper { text-transform: uppercase }
.case-lower { text-transform: lowercase }
.case-proper { text-transform: capitalize }
.case-sentence::first-letter { text-transform: uppercase }

If you use classes like this then you could compose class="case-lower case-sentence" to get the first effect when you need it but otherwise have sentence just uppercase the first letter.

@ryanve
Copy link

ryanve commented Aug 17, 2017

After further thinking I went with these.

.case-none { text-transform: none }
.case-upper { text-transform: uppercase }
.case-lower { text-transform: lowercase }
.case-proper { text-transform: capitalize }

.letter-upper::first-letter { text-transform: uppercase }
.letter-lower::first-letter { text-transform: lowercase }

You can compose class="case-lower letter-upper" to produce sentence case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment