BridgeCSS

hero quote — John Smith

Tech Lead, Google

  img {
    width: spacing(24);
    height: spacing(24);
    border-radius: 9999px;

    @include tablet {
      width: spacing(48);
      height: auto;
      border-radius: none;
    }
  }

  blockquote {
    @include text-lg;
  }

  figcaption {
    .author {
      color: $sky-500;

      @include dark() {
        color: $sky-400;
      }
    }

    .title {
      color: $slate-700;

      @include dark() {
        color: $slate-500;
      }
    }
  }

Constrained

A battle-tested set of design constraints.

We've synthesized a great set of design constraints from other popular frameworks. This should make your transition to using BridgeCSS seamless.

.container {
  // use helper mixins
  @include space-x(3);
}
  
.square {
  // or use the `spacing` function 
  // to get a value in the scale
  height: spacing(16);
  width: spacing(16);
}

Customize

It's your design

Edit the base styles to get exactly the look you are going for without having to reference external docs or syntax since it's just CSS.

// src/bridge.scss

// import the defaults
@import 'bridgecss/bridge.scss';

// override to your heart's content
$gray-500: #000000;

Batteries Included

No more ejecting

Want to use 3D CSS transforms? how about pseudo-elements? With BridgeCSS you can just use those as you normally would without having to eject from a utility-first framework

main.scss

@use 'src/bridge.scss' as *;

* {
	transform-style: preserve-3d;
	perspective: 10000px;
}

.app {
	display: flex;
	justify-content: center;
	align-items: center;
	width: spacing(70);
	height: spacing(100);
	animation: spin 10s linear infinite;
	@keyframes spin {
		from {
			transform: none;
		}
		to {
			transform: rotateY(1turn);
		}
	}
}

.cards {
	width: spacing(60);
	height: spacing(80);
}

.card {
	--segments: 10;
	--segment: calc(100% * 1 / var(--segments));
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	outline-offset: 2px;

	> .segment {
		height: var(--segment);
	}
}

.segment {
	height: 100%;
	transform-origin: top center;
	@include three-d($gray-300);
	transform: rotateX(5deg);
	position: relative;

	> .segment {
		top: 100%;
	}
}

John Smith

Flexible

Zero Javascript Dependencies

While BridgeCSS can be used to react to changes in your site induced by Javascript, it is in now way coupled to it. So use as little or as much Javascript as you like (not as much as your CSS framework likes).

Git

Great looking git diffs

Since each style gets it's own line changes are easy to review.

Diffs with BridgeCSS

.foo {
   @include space-x(4);
   @include space-x(3);

   background-color: $slate-500;

   color: $teal-400;
   color: $teal-500;
}

Hard to read diffs with utility classes

<div class="space-x-3 bg-slate-500 text-teal-500">
<div class="space-x-4 bg-slate-500 text-teal-400">

Reactive

Reactivity? Meet data-props

Data props are a great, framework-independent, way to allow your css to react to changes in the DOM induced by Javascript

<div>
  <button 
    data-active={isActive} 
    on:click={handleClick} 
  />
</div>

<style lang="scss">
  button {
    background-color: $gray-700;

    &[data-active="true"] {
      background-color: $gray-800;
    }
  }
</style>

Naming is hard

Tired of naming conflicts? Try scoped SCSS

Some frameworks even allow you to scope your css to particular components allowing for much more flexibility in naming classes

<form>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" />
  <button type="submit">Submit</button>
</form>

<style lang="scss">
  @use 'src/bridge.scss' as *;

  form {
		display: flex;
		flex-direction: column;
		@include space-y(3);

    label {
      @include mb(2);
      text-transform: uppercase;
      font-weight: 700;
      @include text-lg;
      color: $gray-800;
    }

    input {
      border: 1px solid $gray-900;
      @include pxy(3, 2);
      color: $gray-800;
    }
  }
</style>

Style your website easily without having to learn yet another framework