Languages Element

Provides a bar graph overview of programming languages with percentage for developer project listings

PortfoLitO

AboutComponentsNPMGitHub

Focus on Your Content

HTML

CSS

JS

Native web components allow you to create an elegant showcase for your portfolio of work using HTML

Overview

Installation and Usage

LitHTMLCSS

Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.

Usage

The <content-languages /> element provides a stylised list and line graph of languages used in a project. Languages are specified as <li /> elements, with their text content used as the language name.

C

C++

C#

CSS

Go

HTML

Java

JS

PHP

Python

Rust

TS

Shell

<content-languages>
  <li>C</li>
  <li>C++</li>
  <li>C#</li>
  <li>CSS</li>
  <li>Go</li>
  <li>HTML</li>
  <li>Java</li>
  <li title="JavaScript">JS</li>
  <li>PHP</li>
  <li>Python</li>
  <li>Rust</li>
  <li title="TypeScript">TS</li>
  <li>Shell</li>
</content-languages>

With Percentages

Different weights can be assigned to languages by specifying the weighting in the value attribute of the language's <li /> element. Any remaining percentage will be evenly distributed between languages without a specified value attribute.

JS

HTML

CSS

Java

<content-languages>
  <li title="JavaScript" value="20">JS</li>
  <li>HTML</li>
  <li>CSS</li>
  <li value="55">Java</li>
</content-languages>

With Other Languages

Support for styling other languages not covered by the <content-languages /> element has also been included. As in the example below, this is done by adding CSS variables for each other language being used. If not specified, unknown languages will fall back to the color set in the --languageColor-unknown CSS variable.

Swift

Objective-C

Python

C++

Makefile

<style>
  content-languages {
    --languageColor-swift: var(--languageColor-html);
    --languageColor-objective-c: var(--languageColor-ts);
  }
</style>
<content-languages>
  <li>Swift</li>
  <li value="30">Objective-C</li>
  <li value="6">Python</li>
  <li value="3">C++</li>
  <li value="1">Makefile</li>
</content-languages>

CSS Parts

Name	Description
container	Responsive container element
content	Wrapper for heading, list, and line elements
heading	Languages heading and icon container
list	Wrapper for language names and color bubbles
line	Wrapper for language percentage line graph

CSS Variables

Name	Description	Type	Default
--heading-textColor	Color of the languages heading and icon	color	-
--container-textColor	Foreground color of text inside the languages element container	color	inherit
--container-bgColor	Background color of the languages element container	color	transparent
--languageColor-c	C line and bubble color	color	555555
--languageColor-cpp	C++ line and bubble color	color	F34B7D
--languageColor-csharp	C# line and bubble color	color	178600
--languageColor-css	CSS line and bubble color	color	663399
--languageColor-go	GoLang line and bubble color	color	00ADD8
--languageColor-html	HTML line and bubble color	color	FF4500
--languageColor-java	Java line and bubble color	color	B07219
--languageColor-js	JavaScript line and bubble color	color	FFD700
--languageColor-php	PHP line and bubble color	color	4F5D95
--languageColor-python	Python line and bubble color	color	3572A5
--languageColor-rust	Rust line and bubble color	color	DEA584
--languageColor-shell	Shell script line and bubble color	color	89E051
--languageColor-ts	TypeScript line and bubble color	color	4169E1
--languageColor-unknown	Unknown language line and bubble color	color	EDEDED

Slots

Name	Description	Type
none	Language names and percent of overall code in project	<li>