tobento/css-basis

Basis CSS to start any web project.

Maintainers

Details

github.com/tobento-ch/css-basis

Homepage

Source

Issues

Installs: 184

Dependents: 1

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 0

Language:CSS

pkg:composer/tobento/css-basis

1.0.15 2025-10-28 16:56 UTC

MIT e91008a8c52d486cce1c34f675c265d19c5122bf

cssresponsivetobentobasis.css

This package is auto-updated.

Last update: 2025-10-28 16:57:11 UTC

README

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

You may visit the docs.tobento.ch/css-basis page for documentation and demo.

Table of Contents

Getting started

Import CSS

<link href="basis.css" rel="stylesheet" type="text/css">

Browser support

Modern browser only.

Documentation

Links

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

<a href="#">A Tag</a>

You may use the link class for any other elements.

<span class="link">Link</span>

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

<a class="active" href="#">A Tag</a>
<span class="link active">Link</span>

Typography

You may visit the Demo Page too.

Text Sizes

Class Font-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

Class Weight
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

Class Description
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

Class Description
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

Class Example Code
font-primary <p class="font-primary">Lorem ipsum</p>
font-secondary <p class="font-secondary">Lorem ipsum</p>

Titles

Class Example Code
title <p class="title">Lorem ipsum</p>
subtitle <p class="subtitle">Lorem ipsum</p>

@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

Visit the Demo Page for documentation.

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:

<body class="light">Light color scheme</body>
<body class="dark">Dark color scheme</body>

Or

<section class="light">Light color scheme</section>
<section class="dark">Dark color scheme</section>

Buttons

You may visit the Demo Page too.

Button Types

The button class can be used on the following tags:

<a class="button" href="#">A Tag</a>
<button class="button">Button tag</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

Button Sizes

Text Sizes

You may use the Text Sizes for the button size.

<a class="button text-s" href="#">Link</a>
<button class="button text-xl">Button</button>

fit

<button class="button fit">Button</button>

Button Styles

<button class="button">Button default</button>
<button class="button primary">Button primary</button>
<button class="button raw">Button raw</button>

Button States

<button class="button active">Active Button</button>
<button class="button" disabled>Disabled Button</button>
<button class="button loading">Loading Button</button>

List Of Buttons

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

spaced

<div class="buttons spaced">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

grouped

<div class="buttons grouped">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

expanded

<div class="buttons">
    <button class="button expanded">Button</button>
    <button class="button expanded">Button</button>
</div>

Icons

You may check out the Icon Service to easily manage your icons for your application.

SVG Icon

<span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
    <span>Download</span>
</span>

<span class="icon">
    <span>Download</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
</span>

<span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
</span>

Font Awesome and others

<span class="icon">
    <i class="fas fa-download"></i>
    <span>Download</span>
</span>

Icon Sizes

You may use the Text Sizes for the icon size. Only svg or text icons scales though.

<span class="icon text-xl">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
    <span>Download</span>
</span>

Icon Text

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

<div class="icon-text">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    <span class="icon text-xs">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
    </span>
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
</div>

Lists

Visit the Demo Page for documentation.

Menu

Visit the Demo Page for documentation.

Form

Visit the Demo Page for documentation.

Content

Visit the Demo Page for documentation.

Helpers

Position

Class Css
position-sticky position: sticky;
position-absolute position: absolute;
position-relative position: relative;
position-fixed position: fixed;

Display

Class Css
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

Class Css
float-left float: left;
float-right float: right;

Overflow

Class Css
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

Class Css
cursor-pointer cursor: pointer;
cursor-move cursor: move;
cursor-zoom-in cursor: zoom-in;

Misc

Class Css
display-none-if-js display: none; if JavaScript is enabled
scroll-behavior-smooth scroll-behavior: smooth;

Sizing

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-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

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

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 is a simple card system.

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
<div class="cards">
    <div>Card</div>
    <div>Card</div>
</div>

<div class="cards cards-large">
    <div>Card</div>
    <div>Card</div>
</div>

<div class="cards cards-small">
    <div>Card</div>
    <div>Card</div>
</div>

<div class="cards cards-xsmall">
    <div>Card</div>
    <div>Card</div>
</div>

Cards Fit

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

<div class="cards fit">
    <div>Card</div>
    <div>Card</div>
</div>

<div class="cards cards-large fit">
    <div>Card</div>
    <div>Card</div>
</div>

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
<div class="cards" data-min-width="500px" data-max-count="5" data-gap="3rem">
    <div>Card</div>
    <div>Card</div>
</div>

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 as a fallback:

<div class="cards cards-large" data-min-width="500px" data-max-count="5" data-gap="3rem">
    <div>Card</div>
    <div>Card</div>
</div>

Card Structure

You may use the following card structure.

<div class="cards">
    <div class="card">
        <div class="card-head">Head</div>
        <div class="card-body">Body</div>
        <div class="card-foot">Foot</div>
    </div>
</div>

Columns

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

You may visit the Demo Page too.

Column Sizes

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

<div class="cols">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

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

<div class="cols">
    <div class="col">first col</div>
    <div class="col">second col</div>
    <div class="col">third col</div>
</div>

Column Options

Options for columns to be appended like cols center:

Class Description
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. 
<div class="cols middle">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

Options for column to be appended like col middle:

Class Description
top Top align column.
middle Centers column vertically.
bottom Bottom align column. 
<div class="cols">
    <div class="col-3 top">col-3</div>
    <div class="col-6 middle">col-6</div>
    <div class="col-3 bottom">col-3</div>
</div>

Column Gaps

You may use the Padding Spacing for gaps.

<div class="cols">
    <div class="col-3 p-xs">col-3</div>
    <div class="col-6 p-xs">col-6</div>
    <div class="col-3 p-xs">col-3</div>
</div>

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 for its sizes.

<div class="cols">
    <div class="col-4 tablet-6 mobile-12">col</div>
    <div class="col-4 tablet-6 mobile-12">col</div>
    <div class="col-4 tablet-6 mobile-12">col</div>
</div>

Options for columns

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

  • *-nowrap
  • *-center
  • *-right
  • *-top
  • *-middle
  • *-bottom
  • *-reverse
<div class="cols tablet-middle">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

Options for column

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

  • *-top
  • *-middle
  • *-bottom
<div class="cols">
    <div class="col-3 tablet-top">col-3</div>
    <div class="col-6 tablet-middle">col-6</div>
    <div class="col-3 tablet-bottom">col-3</div>
</div>

Responsiveness

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

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

/* 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