Frequently Asked Questions

What does Brevis mean?

Brevis means short in latin.

What is the idea behind Brevis?

Brevis was built on top of four pillars:

To get your head around it, think of classes that do only one thing. With Brevis, classes no longer represent objects - like buttons -, but single a function. Those classes once defined, cannot be changed. It's like Lego© blocks. Combine a bunch of those classes together and you can create just about any UI you want.

How do you call this CSS approach?

There's no standard definition for this approach. You may find terms like functional, atomic, utility-first, low-level, toolkit, immutable and so on. Just pick one. It really doesn't matter, as long as you understand the concept.

How different is Brevis from others utility-first toolkits?

While Brevis and others utility-first toolkits share the same philosophy, under the hood we can be quite different. Brevis has a very logical and easier naming convention, based on abbreviations and two simple rules. A consistent numerical scale and an improved specificity control, without a single !important rule. We also focus on being as neutral as possible, like our minimal colour palette. There are also differences in the way we handle responsiveness.

Why should I use Brevis?

Let's enumerate a few things that set us apart:

  1. Brevis DOES NOT use a single !important rule.

    Per se, !important is not evil, it's just a bad practice that breaks the natural cascading of the style sheet. That's why a !important declaration should be treated as the last resort. Unfortunately, most frameworks like to use it a lot:

    CSS VERSION !IMPORTANT RULE
    Brevis 0.6.0 0
    Bulma 0.7.5 286
    Materialize 1.0.0 578
    Bootstrap 4.3.1 1031

    The use of !important is not prohibited. Yet, the abundant use of it may be a sign of a flaw HTML/CSS structure. What Brevis does, is to have ZERO !important rule by default. That way, the developer has full control of where and when to use !important or not.

  2. Selector-first design. Each class selector is responsive, allowing you to have a very granular control.
  3. There's no pre-defined style. Brevis believes that the design should come from you, and not from the framework.

  4. Because of its utility-first approach, Brevis is DRY by default.

  5. Brevis is a CSS only toolkit, which is a major benefit for its high performance and scalability nature. For a website where every byte and second counts, a CSS framework with built-in JavaScript components is more trouble than it's worth. Simply, because you may use your own customised JavaScript code that is compatible with your unique website's requirements.

  6. Naming things is hard. But with Brevis, you don't ever have to think about naming your classes, thanks to our naming convention.

  7. Brevis makes easier to visualize what something looks like just by reading the markup.

  8. It's simple to erase a style by just removing the class; as opposed to component-first frameworks where you usually have to override it. Meaning, you end up writing more CSS.

  9. Brevis is teamwork friendly.

Where is the JavaScript?

Brevis is a CSS only framework.

How is the browser support?

Brevis is compatible with modern versions of:

What’s the difference between Brevis and inline styles?

Same as comparing apples and oranges.

  1. Inline styles directly affect the tag they are written in, without the use of selectors.
  2. Inline styles need the style attribute.

Inline style:

<body style="font-weight:bold;">

Brevis:

<body class="ftwt--7">

They are really completly two different things.

How do I memorize all those weird class names?

You don't. Our naming convention is based on word's abbreviations and it follows simple and logical rules. No need to memorize names, just learn the rules and you are good to go.

What about the separation of concerns?

The concerns are still separated. The HTML gives you the structure, and it should work without the CSS. The styling is still applied via CSS.

Will all those classes bloat the size of my HTML?

The bloated stuff is already there, just take a look at yours CSS file(s). What most of CSS frameworks do is to transfer the complexity of UIs to the style sheet. Thus, because larger and similar components reuse the same CSS properties as others, you inevitably end up with duplicate code. So, to answer the question. On the one hand it may increase the HTML size, but on the other hand your CSS file can be incredibly smaller.

Does Brevis have a class for each CSS property?

It doesn't, and it may never will. Like other frameworks, Brevis doesn't try to cover all the CSS spectrum. We are focusing on best practices and real-world usage, to bring the best experience for the users and developers. However, you can always extend Brevis with custom classes for properties that are absent.

Does the CSS declaration order matter?

In the CSS file, it does. Brevis ordering its classes starts from outside the box model and moves inward. Check out brevis.css to see how we did.

Does Brevis enforce any CSS declaration order style?

No, it doesn’t. But you should have a methodology to order your classes. It will be helpful to you and whom you share your code. Remember the order of classes within the HTML class attribute is irrelevant. The order only matters in the CSS file.

How do I extend Brevis modifiers?

We recommend you to create a special modifier called ext. It can work as a complement to some missing property values. So, whatever property you want to extend by adding custom values; the ext is the way to go (with an exception for the colour palette). You can create as many ext modifier as you want. For example:

.lsst--ext1 { list-style: circle }
.w--ext1 { width: 768px }
.w--ext2 { width: 1024px }
.fts--ext1 { font-size: 128px }

This is not a rule, just a suggestion of how to do it. The key to keep things scalable and simple is consistency. However way you choose to extend Brevis, just sticky with it.

Can I see some code comparison?

Below are the amount of CSS rules used for a standard single button on:

Brevis 0.7.0

.brw--0 {
	border-width: 0;
}

.brrad--3 {
	border-radius: 4px;
}

.bgc--bl1 {
	background-color: #006eb6;
}

.py--1 {
	padding-top: 8px;
	padding-bottom: 8px;
}

.cur--ptr {
    cursor: pointer;
}

Bulma 0.7.5

.button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	display: inline-flex;
	font-size: 1rem;
	height: 2.25em;
	justify-content: flex-start;
	line-height: 1.5;
	padding-bottom: calc(.375em - 1px);
	padding-left: calc(.625em - 1px);
	padding-right: calc(.625em - 1px);
	padding-top: calc(.375em - 1px);
	position: relative;
	vertical-align: top;
}

.button:active,
.button:focus {
	outline: 0;
}

*,
::after,
::before {
	box-sizing: inherit;
}

a {
	color: #3273dc;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	color: #363636;
}

.button {
	background-color: #fff;
	border-color: #dbdbdb;
	border-width: 1px;
	color: #363636;
	cursor: pointer;
	justify-content: center;
	padding-bottom: calc(.375em - 1px);
	padding-left: .75em;
	padding-right: .75em;
	padding-top: calc(.375em - 1px);
	text-align: center;
	white-space: nowrap;
}

.button:hover {
	border-color: #b5b5b5;
	color: #363636;
}

.button:focus {
	border-color: #3273dc;
	color: #363636;
}

.button:active {
	border-color: #4a4a4a;
	color: #363636;
}

.button.is-primary {
	background-color: #00d1b2;
	border-color: transparent;
	color: #fff;
}

.button.is-primary:hover {
	background-color: #00c4a7;
	border-color: transparent;
	color: #fff;
}

.button.is-primary:focus {
	border-color: transparent;
	color: #fff;
}

.button.is-primary:active {
	background-color: #00b89c;
	border-color: transparent;
	color: #fff;
}

.buttons .button {
	margin-bottom: .5rem;
}

.buttons .button:not(:last-child):not(.is-fullwidth) {
	margin-right: .5rem;
}

::-moz-selection {
	background-color: #00d1b2;
	color: #fff;
}

::selection {
	background-color: #00d1b2;
	color: #fff;
}

Materialize 1.0.0

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

a {
	color: #039be5;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.btn {
	-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover {
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

a {
	text-decoration: none;
}

.btn {
	border: none;
	border-radius: 2px;
	display: inline-block;
	height: 36px;
	line-height: 36px;
	padding: 0 16px;
	text-transform: uppercase;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
}

.btn:disabled {
	pointer-events: none;
	background-color: #DFDFDF !important;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #9F9F9F !important;
	cursor: default;
}

.btn:disabled:hover {
	background-color: #DFDFDF !important;
	color: #9F9F9F !important;
}

.btn {
	font-size: 14px;
	outline: 0;
}

.btn:focus {
	background-color: #1d7d74;
}

.btn {
	text-decoration: none;
	color: #fff;
	background-color: #26a69a;
	text-align: center;
	letter-spacing: .5px;
	-webkit-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	cursor: pointer;
}

.btn:hover {
	background-color: #2bbbad;
}

.waves-effect {
	position: relative;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	vertical-align: middle;
	z-index: 1;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
}

::-webkit-input-placeholder {
	color: #d1d1d1;
}

::-moz-placeholder {
	color: #d1d1d1;
}

:-ms-input-placeholder {
	color: #d1d1d1;
}

::placeholder {
	color: #d1d1d1;
}

Bootstrap 4.3.1

*,
::after,
::before {
	box-sizing: border-box;
}

button {
	border-radius: 0;
}

button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color;
}

button {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button {
	overflow: visible;
}

button {
	text-transform: none;
}

[type=button],
button {
	-webkit-appearance: button;
}

[type=button]:not(:disabled),
button:not(:disabled) {
	cursor: pointer;
}

[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

.btn {
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion:reduce) {
	.btn {
		transition: none;
	}

}

.btn:hover {
	color: #212529;
	text-decoration: none;
}

.btn:focus {
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.btn:disabled {
	opacity: .65;
}

.btn-primary {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

.btn-primary:hover {
	color: #fff;
	background-color: #0069d9;
	border-color: #0062cc;
}

.btn-primary:focus {
	box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}

.btn-primary:disabled {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}