tobento/css-basis

Basis CSS to start any web project.

1.0.6 2024-08-13 15:33 UTC

MIT

• Tobias Strub

• css
• responsive
• tobento
• basis.css

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
  • Browser support
• Documentation
  • Links
  • Typography
  • Colors
  • Buttons
  • Icons
  • Lists
  • Menu
  • Form
  • Content
  • Helpers
  • Sizing
  • Spacing
    • Margin
    • Padding
  • Columns
    • Column Sizes
    • Column Options
    • Column Gaps
    • Column Responsiveness
  • Responsiveness
    • Mobile First Breakpoints
    • Desktop First Breakpoints
• Credits

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

Text Weight

Text Alignment

Text Transformation

Fonts

Titles

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

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>

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

Display

Float

Overflow

Cursor

Misc

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%

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

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:

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

<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

• Tobias Strub
• All Contributors