PHPackages                             tobento/css-basis - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. tobento/css-basis

ActiveLibrary

tobento/css-basis
=================

Basis CSS to start any web project.

1.0.17(yesterday)1223MITCSS

Since Oct 6Pushed yesterday1 watchersCompare

[ Source](https://github.com/tobento-ch/css-basis)[ Packagist](https://packagist.org/packages/tobento/css-basis)[ Docs](https://www.tobento.ch)[ RSS](/packages/tobento-css-basis/feed)WikiDiscussions 1.x Synced today

READMEChangelog (10)DependenciesVersions (19)Used By (0)

CSS Basis
=========

[](#css-basis)

The basis.css provides basic formatting styles for web applications.

You may visit the [**docs.tobento.ch/css-basis**](https://docs.tobento.ch/css-basis) page for documentation and demo.

Table of Contents
-----------------

[](#table-of-contents)

- [Getting started](#getting-started)
    - [Import CSS](#import-css)
    - [Browser support](#browser-support)
- [Documentation](#documentation)
    - [Links](#links)
    - [Typography](#typography)
    - [Colors](#colors)
    - [Color Scheme](#color-scheme)
    - [Buttons](#buttons)
    - [Badges](#badges)
    - [Icons](#icons)
    - [Lists](#lists)
    - [Menu](#menu)
    - [Form](#form)
    - [Content](#content)
    - [Helpers](#helpers)
    - [Sizing](#sizing)
    - [Spacing](#spacing)
        - [Margin](#margin)
        - [Padding](#padding)
    - [Cards](#cards)
    - [Columns](#columns)
        - [Column Sizes](#column-sizes)
        - [Column Options](#column-options)
        - [Column Gaps](#column-gaps)
        - [Column Responsiveness](#column-responsiveness)
    - [Responsiveness](#responsiveness)
        - [Mobile First Breakpoints](#mobile-first-breakpoints)
        - [Desktop First Breakpoints](#desktop-first-breakpoints)
- [Credits](#credits)

---

Getting started
===============

[](#getting-started)

Import CSS
----------

[](#import-css)

```

```

Browser support
---------------

[](#browser-support)

Modern browser only.

Documentation
=============

[](#documentation)

Links
-----

[](#links)

Anchor tags will be styled with the defined "click colors" css custom properties.

```
A Tag
```

You may use the `link` class for any other elements.

```
Link
```

You may use the `active` class indicating that the link is active.

```
A Tag
Link
```

Typography
----------

[](#typography)

You may visit the [Demo Page](demo/typography.html) too.

### Text Sizes

[](#text-sizes)

ClassFont-size`text-xxs``0.75rem``text-xs``1rem``text-s``1.25rem``text-m``1.5rem``text-l``2rem``text-xl``2.5rem``text-xxl``3rem``text-body``1.125rem`### Text Weight

[](#text-weight)

ClassWeight`text-100`100/thin`text-300`300/light`text-400`400/regular`text-500`500/medium`text-700`700/bold`text-900`900/black### Text Alignment

[](#text-alignment)

ClassDescription`text-left`Makes the text aligned to the left`text-right`Makes the text aligned to the right`text-center`Makes the text centered`text-justify`Makes the text justified### Text Transformation

[](#text-transformation)

ClassDescription`text-capitalize`Transforms the first letter of each word to uppercase`text-uppercase`Transforms all characters to uppercase`text-lowercase`Transforms all characters to lowercase`text-underline`Makes the text underlined`text-italic`Transforms all characters to italic`text-truncate`Truncates text with ellipsis### Fonts

[](#fonts)

ClassExample Code`font-primary``Lorem ipsum``font-secondary``Lorem ipsum`### Titles

[](#titles)

ClassExample Code`title``Lorem ipsum``subtitle``Lorem ipsum`### @font-face

[](#font-face)

Example of importing font families with its weight range corresponding to the basis.css weights.

```
@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAL.woff") format("woff"),
    url("/fonts/FUTURAL.woff2") format("woff2");
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAM.woff") format("woff"),
    url("/fonts/FUTURAM.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAH.woff") format("woff"),
    url("/fonts/FUTURAH.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Define in root var */
:root {
  --font-secondary: "FuturaBT";
}
```

Colors
------

[](#colors)

Visit the [Demo Page](demo/colors.html) for documentation.

Color Scheme
------------

[](#color-scheme)

The following color scheme is defined in the CSS file as default:

```
:root {
  color-scheme: light dark;
}
```

You may force light or dark color scheme by adding one of the CSS class `light` or `dark` ingoring Browsers color scheme configuration:

```
Light color scheme
Dark color scheme
```

Or

```
Light color scheme
Dark color scheme
```

Buttons
-------

[](#buttons)

You may visit the [Demo Page](demo/buttons.html) too.

### Button Types

[](#button-types)

The button class can be used on the following tags:

```
A Tag
Button tag

```

### Button Sizes

[](#button-sizes)

**Text Sizes**

You may use the [Text Sizes](#text-sizes) for the button size.

```
Link
Button
```

**fit**

```
Button
```

### Button Styles

[](#button-styles)

```
Button default
Button primary
Button raw
```

### Button States

[](#button-states)

```
Active Button
Disabled Button
Loading Button
```

### List Of Buttons

[](#list-of-buttons)

You can create a list of buttons by using the buttons container.

**spaced**

```

    Button
    Button
    Button

```

**grouped**

```

    Button
    Button
    Button

```

**expanded**

```

    Button
    Button

```

Badges
------

[](#badges)

Badges are small inline UI elements used to highlight status, counts, or labels.

```
Badge
```

### Badge Colors

[](#badge-colors)

You may use the [Colors](#colors) utilities to style badge text or background.

```
success
error
```

### Badge Sizes

[](#badge-sizes)

Badges inherit their size from the text size.
Use the [Text Sizes](#text-sizes) utilities to adjust badge size.

```
Badge
Badge
```

### Badge Shapes

[](#badge-shapes)

**round**

Round badges are fixed-size circles, ideal for short content (1–2 characters).

```
10
```

**pill**

Pill badges expand based on content and have fully rounded ends.

```
1000
```

### List Of Badges

[](#list-of-badges)

Use the `.badges` container to display multiple badges with spacing.

```

    Badge
    Badge

```

Icons
-----

[](#icons)

You may check out the [Icon Service](https://github.com/tobento-ch/service-icon) to easily manage your icons for your application.

**SVG Icon**

```

    Download

    Download

```

**Font Awesome and others**

```

    Download

```

### Icon Sizes

[](#icon-sizes)

You may use the [Text Sizes](#text-sizes) for the icon size. Only svg or text icons scales though.

```

    Download

```

### Icon Text

[](#icon-text)

You may use the `icon-text` class within any paragraph of text.

```

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

```

Lists
-----

[](#lists)

Visit the [Demo Page](demo/lists.html) for documentation.

Menu
----

[](#menu)

Visit the [Demo Page](demo/menu.html) for documentation.

Form
----

[](#form)

Visit the [Demo Page](demo/form.html) for documentation.

Content
-------

[](#content)

Visit the [Demo Page](demo/content.html) for documentation.

Helpers
-------

[](#helpers)

### Position

[](#position)

ClassCss`position-sticky``position: sticky;``position-absolute``position: absolute;``position-relative``position: relative;``position-fixed``position: fixed;`### Display

[](#display)

ClassCss`display-none``display: none;``display-none-tablet``display: none;` only on tablet and mobile`display-none-mobile``display: none;` only on mobile`display-block``display: block;``display-inline-block``display: inline-block;``display-flex``display: flex;``display-inline-flex``display: inline-flex;``!display-none``display: none !important;``!display-none-tablet``display: none !important;` only on tablet and mobile`!display-none-mobile``display: none !important;` only on mobile### Float

[](#float)

ClassCss`float-left``float: left;``float-right``float: right;`### Overflow

[](#overflow)

ClassCss`overflow-hidden``overflow: hidden;``overflow-visible``overflow: visible;``overflow-auto``overflow: auto;``overflow-x-auto``overflow-x: auto;``overflow-y-auto``overflow-y: auto;``overflow-wrap-anywhere``overflow-wrap: anywhere;`### Cursor

[](#cursor)

ClassCss`cursor-pointer``cursor: pointer;``cursor-move``cursor: move;``cursor-zoom-in``cursor: zoom-in;`### Misc

[](#misc)

ClassCss`display-none-if-js``display: none;` if JavaScript is enabled`scroll-behavior-smooth``scroll-behavior: smooth;`Sizing
------

[](#sizing)

### Max Width

[](#max-width)

- `max-width-xxs` is of size `4rem`
- `max-width-xs` is of size `8rem`
- `max-width-s` is of size `16rem`
- `max-width-m` is of size `32rem`
- `max-width-l` is of size `48rem`
- `max-width-xl` is of size `64rem`
- `max-width-xxl` is of size `80rem`
- `max-width-min` is equal to css `max-width: min-content`
- `max-width-max` is equal to css `max-width: max-content`
- `max-width-fit` is equal to css `max-width: fit-content`
- `max-width-full` is equal to css `max-width: 100%`

### Min Width

[](#min-width)

- `min-width-xxs` is of size `4rem`
- `min-width-xs` is of size `8rem`
- `min-width-s` is of size `16rem`
- `min-width-m` is of size `32rem`
- `min-width-l` is of size `48rem`
- `min-width-xl` is of size `64rem`
- `min-width-xxl` is of size `80rem`
- `min-width-min` is equal to css `min-width: min-content`
- `min-width-max` is equal to css `min-width: max-content`
- `min-width-fit` is equal to css `min-width: fit-content`
- `min-width-full` is equal to css `min-width: 100%`

Spacing
-------

[](#spacing)

### Margin

[](#margin)

Available margin directions:

- `m` for top, right, bottom, left
- `mt` for top
- `mr` for right
- `mb` for bottom
- `ml` for left
- `mx` horizontally for both left and right
- `my` vertically for both top and bottom

Available sizes to be appended to margin directions like `mt-s`:

- `0` is `0`
- `xxs` is of size `0.25rem`
- `xs` is of size `0.5rem`
- `s` is of size `1rem`
- `m` is of size `2rem`
- `l` is of size `4rem`
- `xl` is of size `6rem`
- `xxl` is of size `8rem`
- `auto`

### Padding

[](#padding)

Available padding directions:

- `p` for top, right, bottom, left
- `pt` for top
- `pr` for right
- `pb` for bottom
- `pl` for left
- `px` horizontally for both left and right
- `py` vertically for both top and bottom

Available sizes to be appended to padding directions like `pt-s`:

- `0` is `0`
- `xxs` is of size `0.25rem`
- `xs` is of size `0.5rem`
- `s` is of size `1rem`
- `m` is of size `2rem`
- `l` is of size `4rem`
- `xl` is of size `6rem`
- `xxl` is of size `8rem`

Cards
-----

[](#cards)

Cards is a simple card system.

### Card Sizes

[](#card-sizes)

There are three card sizes available and the main card size:

- `cards` is of min width `350px`
- `cards-large` is of min width `500px`
- `cards-small` is of min width `250px`
- `cards-xsmall` is of min width `150px`

```

    Card
    Card

    Card
    Card

    Card
    Card

    Card
    Card

```

### Cards Fit

[](#cards-fit)

You may add the CSS `fit` class to enforce cards to use its container full width.

```

    Card
    Card

    Card
    Card

```

### Custom Cards Using Data Attributes

[](#custom-cards-using-data-attributes)

You may define any of the three HTML data attributes to customize cards.

- `data-min-width` sets the min card width
- `data-max-count` sets the max numbers of cards in a row
- `data-gap` set the grid gap

```

    Card
    Card

```

> **Warning**This feature may be used with caution as it uses the CSS `attr()` to set values which is not that well supported yet.

You may add at least a [Card Size](#card-sizes) as a fallback:

```

    Card
    Card

```

### Card Structure

[](#card-structure)

You may use the following card structure.

```

        Head
        Body
        Foot

```

Columns
-------

[](#columns)

Columns is a simple grid system based on CSS flexbox. It is a desktop-first approach.

You may visit the [Demo Page](demo/columns.html) too.

### Column Sizes

[](#column-sizes)

Compose column by column with class like `col-1` to `col-12`.

```

    col-3
    col-6
    col-3

```

Auto width column. Keep in mind that in this way, your columns will only be a row!:

```

    first col
    second col
    third col

```

### Column Options

[](#column-options)

Options for columns to be appended like `cols center`:

ClassDescription`nowrap`Does not wrap columns. Columns will only be a row.`center`Centers columns.`right`Right align columns.`top`Top align columns.`middle`Centers columns vertically.`bottom`Bottom align columns.`baseline`Baseline align columns.`reverse`Reverses columns order.`column`Single row per column.`columnReverse`Single row per column in reversed order.`spaceBetween`Space between columns.`spaceAround`Space around columns.`equalHeight`Equal height columns.```

    col-3
    col-6
    col-3

```

Options for column to be appended like `col middle`:

ClassDescription`top`Top align column.`middle`Centers column vertically.`bottom`Bottom align column.```

    col-3
    col-6
    col-3

```

### Column Gaps

[](#column-gaps)

You may use the [Padding Spacing](#padding) for gaps.

```

    col-3
    col-6
    col-3

```

### Column Responsiveness

[](#column-responsiveness)

**Column Sizes**

- `widescreen-1` to `widescreen-12`
- `desktop-1` to `desktop-12`
- `tablet-1` to `tablet-12`
- `mobile-1` to `mobile-12`

Check out the [Desktop First Breakpoints](#desktop-first-breakpoints) for its sizes.

```

    col
    col
    col

```

**Options for columns**

Use `widescreen-*`, `desktop-*`, `tablet-*`, `mobile-*` with the following alignment classes like `tablet-middle`.

- `*-nowrap`
- `*-center`
- `*-right`
- `*-top`
- `*-middle`
- `*-bottom`
- `*-reverse`

```

    col-3
    col-6
    col-3

```

**Options for column**

Use `widescreen-*`, `desktop-*`, `tablet-*`, `mobile-*` with the following alignment classes like `tablet-middle`.

- `*-top`
- `*-middle`
- `*-bottom`

```

    col-3
    col-6
    col-3

```

Responsiveness
--------------

[](#responsiveness)

Basis.css uses the following breakpoints for its core classes.

### Mobile First Breakpoints

[](#mobile-first-breakpoints)

```
/* mobile */

/* tablet */
@media screen and (min-width: 769px), print {}

/* desktop */
@media screen and (min-width: 1024px), print {}

/* widescreen */
@media screen and (min-width: 1216px), print {}

/* fullhd */
@media screen and (min-width: 1408px), print {}
```

### Desktop First Breakpoints

[](#desktop-first-breakpoints)

```
/* fullhd */

/* widescreen */
@media screen and (max-width: 1407px), print {}

/* desktop */
@media screen and (max-width: 1215px), print {}

/* tablet */
@media screen and (max-width: 1023px), print {}

/* mobile */
@media screen and (max-width: 768px), print {}
```

Credits
=======

[](#credits)

- [Tobias Strub](https://www.tobento.ch)
- [All Contributors](../../contributors)

###  Health Score

47

—

FairBetter than 94% of packages

Maintenance100

Actively maintained with recent releases

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~70 days

Recently: every ~49 days

Total

19

Last Release

1d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/055d6a1b5c2384bb179c75ab0b55914231d898fdc4dffeb30770f81200e52206?d=identicon)[TOBENTOch](/maintainers/TOBENTOch)

---

Top Contributors

[![tobento-ch](https://avatars.githubusercontent.com/u/16684832?v=4)](https://github.com/tobento-ch "tobento-ch (43 commits)")

---

Tags

cssresponsivetobentobasis.css

### Embed Badge

![Health badge](/badges/tobento-css-basis/health.svg)

```
[![Health](https://phpackages.com/badges/tobento-css-basis/health.svg)](https://phpackages.com/packages/tobento-css-basis)
```

###  Alternatives

[twbs/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

174.1k17.3M279](/packages/twbs-bootstrap)[twitter/bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

174.0k1.7M26](/packages/twitter-bootstrap)[almasaeed2010/adminlte

AdminLTE - admin control panel and dashboard that's based on Bootstrap 4

45.3k8.3M126](/packages/almasaeed2010-adminlte)[zurb/foundation

The most advanced responsive front-end framework in the world.

29.8k376.0k12](/packages/zurb-foundation)[foundation/foundation-sites

The most advanced responsive front-end framework in the world.

29.8k8.1k](/packages/foundation-foundation-sites)[coreui/coreui

The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team

871109.5k4](/packages/coreui-coreui)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
