Download the PHP package tobento/css-basis without Composer

On this page you can find all versions of the php package tobento/css-basis. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of tobento/css-basis

Informations about the package css-basis

CSS Basis

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

Modern browser only.

Documentation

Links

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

You may use the link class for any other elements.

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

Typography

You may visit the Demo Page too.

Text Sizes

Class Font-size

Text Weight

Class Weight
100/thin
300/light
400/regular
500/medium
700/bold
900/black

Text Alignment

Class Description
Makes the text aligned to the left
Makes the text aligned to the right
Makes the text centered
Makes the text justified

Text Transformation

Class Description
Transforms the first letter of each word to uppercase
Transforms all characters to uppercase
Transforms all characters to lowercase
Makes the text underlined
Transforms all characters to italic
Truncates text with ellipsis

Fonts

Class Example Code

Titles

Class Example Code

@font-face

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

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:

Button Sizes

Text Sizes

You may use the Text Sizes for the button size.

fit

Button Styles

Button States

List Of Buttons

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

spaced

grouped

expanded

Icons

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

SVG Icon

Font Awesome and others

Icon Sizes

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

Icon Text

You may use the class within any paragraph of text.

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

Display

Class Css

Float

Class Css

Overflow

Class Css

Cursor

Class Css

Misc

Class Css

Sizing

Max Width

Spacing

Margin

Available margin directions:

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

Padding

Available padding directions:

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

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

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.

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

<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

All versions of css-basis with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package tobento/css-basis contains the following files

Loading the files please wait ....