Skip to content

Scale font-size property based on viewport width using only CSS. The following CSS units will work: em, rem, px, ch, cm, mm, in, pt, pc.

License

Notifications You must be signed in to change notification settings

nicetransition/SCALABLE-TEXT-IN-CSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

scaleFont()

Scales font "up" as browser gets wider with a maximum set font-size and scales font "down" as browser gets thinner with a minimum set font-size.

	@include scale(context, base-size, limit-size-min, limit-size-max, property, width);
	.selector-name { // apply to any selector

		@include scale(62.5rem, 4rem, 1.875rem, 6.25rem, font-size, true);

		// 4 required arguments*:
		// 62.5rem: context
		// 4rem: base-size
		// 1.875rem: limit-size-min
		// 6.25rem: limit-size-max
		// *All values need to be the same unit type
		// 2 optional arguments:
		// font-size: property (can be any CSS property that uses unit values; `font-size` is default)
		// true: width (if `false`, scales based on viewport height; if `true`, scales based on viewport width; `true` is default)

	}

scaleUp()

Scales font "up" as browser gets wider with a maximum set font-size or any CSS property.

	@include scaleUp(context-width, base-size, limit-size-max, property, width);
	.selector-name { // apply to any selector

		@include scaleUp(62.5rem, 4rem, 6.25rem, font-size, true);

		// 3 required arguments*:
		// 62.5rem: context-width
		// 4rem: base-font-size
		// 6.25rem: limit-font-size-max
		// *All values need to be the same unit type
		// 2 optional arguments:
		// font-size: property (can be any CSS property that uses unit values; `font-size` is default)
		// true: width (if `false`, scales based on viewport height; if `true`, scales based on viewport width; `true` is default)

	}

scaleDown()

Scales font "down" as browser gets thinner with a minimum set font-size or any CSS property.

	@include scaleDown(context, base-size, limit-size-min, property, width);
	.selector-name { // apply to any selector

		@include scaleFontDown(62.5rem, 4rem,  1.875rem, font-size, true);

		// 3 required arguments*:
		// 62.5rem: context-width
		// 4rem: base-font-size
		// 1.875rem: limit-font-size-min
		// *All values need to be the same unit type
		// 2 optional arguments:
		// font-size: property (can be any CSS property that uses unit values; `font-size` is default)
		// true: width (if `false`, scales based on viewport height; if `true`, scales based on viewport width; `true` is default)
		
	}

About

Scale font-size property based on viewport width using only CSS. The following CSS units will work: em, rem, px, ch, cm, mm, in, pt, pc.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages