Welcome

Proinfocus Basic-CSS

What is Basic-CSS?

Basic-CSS is a minimalistic Cascading Style Sheet designed to beautify the HTML tags out-of-the-box. In addition to this minimalistic approach, it has Advance and Common features which help you design beautiful websites with less efforts.

What is included in Advance?

Advance CSS which is available via advance.css file combined with advance.js file, which helps in executing the Javascript part of the CSS, has the following options for you.

  • Breadcrumb
  • Card
  • Tab
  • Message
  • Notification

If you use the advance.css, you also need to include advance.js file which helps in executing the Javascript part such as close on click for message and notification.

What is included in Common?

Common CSS which is available via common.css file, has the necessary classes to style the elements with ease. You need not remember the class names. They just come in the perfect abbreviations like for eg: if you want a display:flex you add it to class as 'df' and for margin on all directions can be added in the class as 'm'. Following are few examples of how you can add classes to your elements.

  • BackgroundColorPrimary = bcp
  • TextColorSecondary = tcs
  • NoMargin = nm
  • PaddingVertically = pv or py
  • TextAlignCenter = tac
  • FlexDirectonColumn = fdc

To see more about how the styles elements looks, check out our Examples page

Light and Dark Themes

By default, light theme is available. But, if you want to have a dark theme for your website, just change the RGB values for dark and light variables.

The variables are as follows:
Dark RGB values --dr: 255; --dg: 255; --db: 255;
Light RGB values --lr: 0; --lg: 0; --lb: 0;

Getting started...

  • To use, link to basic.min.css file in your head tag of your html. This includes basic, advance and common css for styling.
  • If you just want basic styling, you could use basic.min.css file in your head tag of your html.
  • You also need to add script reference, if you are using advance features like message, tabs, notification, etc., The script file basic.min.js is needed at the bottom just before the ending body tag of your html.