#The docs

General documentation on how to use this style sheet

About beCSS

beCSS is a lightweight (27kb minified, 6kb compressed), hackable, responsive, flat-style-ready, and Flexbox-based style sheet, created directly with CSS without any preprocessors. Since beCSS is a single file, it does not include javascript.

Git Download

You can download it directly from the repository, clone it, or fork.

NPM Install

npm install becss

Use the terminal to do the installation via NPM. Copy the file to your project, and then you simply have to load the style sheet from your html.

Features

beCSS provides a set of components and a Flat UI Color Scheme as starting point, and it is structure taking efficiency and simplicity as a reference.

Free and Open Source (GPL license)
Dual 12 column Flexbox-based and Grid-based Responsive Layout
Lightweight (35kb not compressed)
Built without preprocessors, only CSS
Agnostic and Hackable
build-in Flat UI Color Scheme
KISS principle
It is improvable (of course)

Installation

Recomended

npm install becss

Copy the file to your project, and then you simply have to load the style sheet from your html.

Please remember that the installation will take place inside the node_modules folder.

<link rel="stylesheet" href="/your-path/becss.css">

Load from CDN UNPKG

You can call beCSS directly from UNPKG using the code below.

<link rel="stylesheet" href="https://unpkg.com/becss@0.1.2/dist/becss.css">

If you want to always call the latest version you can use the following code:

<link rel="stylesheet" href="https://unpkg.com/becss@latest/dist/becss.css">

Load from CDN JSDELIVR

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/becss@0.1.1/dist/becss.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/becss@latest/dist/becss.css">

To call a specific version simply subtract the corresponding number. You can see the versions in Github or NPMJS

The classes

There are more than 300 classes in beCSS. By general normal the classes follow a semantic sense and are divided into three parts: id, type, fuction. The id + Function make a family.

Family

{ id }

{ type }

{ Function }

hover

green-sea

id : = All classes start with the prefix "be".

type : = It is the family identifier. A family is a group of classes that share one or more types of functions. Every family have: id + type.

function : = Indicates the specific task performed by this class.

Why vanilla CSS instead of a preprocessor?

Simplicity and familiarity: By using vanilla CSS, you stick to the standard and don't introduce any additional dependencies into your workflow. This can be beneficial if you prefer to keep things simple and make the most of the language's native features.
Performance: In general, vanilla CSS can offer better performance than CSS preprocessors, as there is no additional processing required to compile or transpile the code. Browsers can directly interpret and apply the CSS without any additional layer.
Smoother learning curve: For those starting with CSS or having limited knowledge of the language, starting with vanilla CSS can be a good choice. It allows you to understand and learn the fundamental concepts without the need to learn additional syntax or features of preprocessors.
File size: By using vanilla CSS, you can have more precise control over the generated file size. This can be useful in situations where quick page loading is required, and minimizing the total size of resources is desired.

However, it's also important to consider that CSS preprocessors can offer advantages in terms of code maintainability and scalability. They allow the use of features like variables, mixins, and rule nesting, which facilitate code organization and reusability.

Ultimately, the choice between vanilla CSS and CSS preprocessors depends on personal preferences, the nature of the project, and specific requirements. Both approaches are valid and widely used in web development.