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(1mo ago)12231MITCSS Since Oct 6Pushed 1mo ago1 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 1mo ago READMEChangelog (10)DependenciesVersions (19)Used By (1) 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 45 — FairBetter than 92% of packages Maintenance90 Actively maintained with recent releases Popularity15 Limited adoption so far Community9 Small or concentrated contributor base Maturity55 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 49d 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.6M325](/packages/twbs-bootstrap)[twitter/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k1.7M27](/packages/twitter-bootstrap)[almasaeed2010/adminlte AdminLTE - admin control panel and dashboard that's based on Bootstrap 4 45.3k8.5M138](/packages/almasaeed2010-adminlte)[zurb/foundation The most advanced responsive front-end framework in the world. 29.8k380.2k15](/packages/zurb-foundation)[foundation/foundation-sites The most advanced responsive front-end framework in the world. 29.8k8.4k](/packages/foundation-foundation-sites)[sciactive/pnotify Beautiful JavaScript notifications. 3.6k6.4k](/packages/sciactive-pnotify) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)