pixelchar

/* Horizontal */
.selector {
  background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
  background-position: bottom;
  background-size: 3px 1px;  /* Adjust values to change dot size and spacing */
  background-repeat: repeat-x;
}

/* Vertical */
.selector {

pixelchar

<h1>Pure CSS accordion</h1>

<!--
  - By using different combinations of `type="radio"`, `type="checkbox"`,
  - `name`, and `checked`, we can create accordions that only allow one
  - item to be open at once; accordions that can have any number of items
  - open at once; accordions that have specific items open by default.
  -->

<h2>One item open at once</h2>

pixelchar

<input type="file">
<img>

pixelchar

@mixin speech-bubble($size, $background) {
  background: $background;
  display: inline-block;
  padding: $size;
  position: relative;
  margin-left: $size;

  &:before {
    content: '';
    position: absolute;

pixelchar

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

pixelchar

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

pixelchar

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

pixelchar

@mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

pixelchar

Responsive & Accessible Data Table

Mobile-first responsive and accessible data table. At narrower view ports, the thead is hidden, rows are turned into cards with labels shown using a data-* attribute.

A Pen by Charlie Cathcart on CodePen.

License.

pixelchar

pre {
    white-space: pre-wrap;       /* Chrome & Safari */
    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}