About BareCSS

What is it?

BareCSS is a CSS only framework that styles frequently used HTML tags without the need for classes. It also provides a few utilities such as a responsive grid and CSS only tooltips.

BareCSS can be used stand-alone or as a foundation to build upon. This site you're viewing now uses BareCSS and a custom style sheet that's less than 3kb.

Compatible with all modern browsers and IE9+.

Download latest release.


Why does it exist?

Sometimes you want to quickly set up a simple site or application. You don't want it to look like a Word™ doc but you also don't want/need a massive framework such as Bootstrap or Foundation or Materialize.

So in a similar vein as Pure and Skeleton, BareCSS aims to provide a minimal CSS framework that requires minimal setup.

BareCSS takes this minimal approach one step further by making it completely classless. Not only that, but the default styles are only applied to elements without classes. Why only bare tags? For custom components and modules, you may not want the standard stylings to apply, so by giving them a class you're removing all Bare styling. If you want to add a class and want the Bare styling applied, just add the xx attribute to that element.


How does it work?

BareCSS effectively changes the default browser styles. Any commonly used tags such as input or button are styled only if they don't have any classes.

What if you want to add a class to a tag but still want to retain the Bare style? Just add the attribute xx to the tag and the Bare styles will be applied.








Change log

v1.1.0

  • Removed all classes (note: this is a breaking change)
    • Grids no longer use classes
    • Buttons no longer use classes
    • Cards no longer use classes
    • The xx default class has now been made an attribute
    • Changed utility classes to attributes
  • Introduced tags
  • Introduced rounded buttons
  • Changed tooltip behaviour and attribute
    • Instead of data-tt it's now just tt
    • Anchor link tooltips now require the att attribute
  • Introduced footer
  • Includes a template HTML file

v1.0.1

  • Added navigation
  • Separated LESS files into components
  • Included SVG icons

How to install

Download the package from Github.

Included are SVG icon files from Google, the compiled and minified CSS file, and the LESS components.

If there are any components you don't need, just comment the line out from bare.less and compile yourself.

A template.html file is included to help you get started with the basic structure of the nav and grid.

What's included:

BareCSS/
├── template.html
├── css/
│	└── bare.min.css
├── icons/
│	├── chevron-down.svg
│	├── close.svg
│	├── done.svg
│	└── hamburger.svg
└── less/
	├── _anchor-link.less
	├── _blockquote.less
	├── _button.less
	├── _card.less
	├── _code.less
	├── _footer.less
	├── _grid.less
	├── _input.less
	├── _layout.less
	├── _list.less
	├── _navigation.less
	├── _reset.less
	├── _table.less
	├── _tooltip.less
	├── _transition.less
	├── _typography.less
	├── _utility-attributes.less
	├── _variables.less
	└── bare.less

Sections

This site that you're viewing right now is built on section elements. The sections are horizontally centred, have a max-width equal to the @width variable in the _variables.less file (default is 90rem), and will shrink with smaller screens. Useful for containing content quickly.

Note: Because of CSS specificity, overwriting the default style with a class will require specifying that the class applies to a section element. Eg: Your CSS property should look like section.custom-section rather than just .custom-section.


Your code here.

Typography

Font sizes in BareCSS are based in rems. You can set the initial font size in the html element to change the scale. The default is 10px so that 1rem is 10px and 2rem is 20px etc.

The font family defaults are just the standard browser defaults, so serif, sans-serif and monospace fonts are chosen by the browser. You can change this in the _variables.less file.

The main thing BareCSS does to headings is to standardise the margins and paddings. h1 through to h6 are catered for.

h1 Heading level 1

h2 Heading level 2

h3 Heading level 3

h4 Heading level 4

h5 Heading level 5
h6 Heading level 6

Buttons

Buttons default to the normal button style below. The primary button style uses the primary attribute. Disabled buttons are automatically styled if they have the disabled attribute.









Anchor and submit buttons

You can style anchor links by adding the btn attribute and input type=submit will automatically be styled like a button.

Anchor link


Anchor link



Full width buttons

If you want your buttons to be 100% width on mobile screens you can add the m-full attribute.

These buttons will be full width on mobile screens.









Rounded buttons

If you want your buttons to be rounded, use the round attribute.








Tags

Tags use the tag element.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve

OneTwoThree

Tooltips

Tooltips are handy and BareCSS provides you with classless, no javascript tooltips. Tooltips can be applied to most tags, as long as they accept the ::before and ::after pseudo elements. Just use tt="Your tooltip here" in the tag.

Hover over this for a tooltip on a b tag. Hover over this, or this or even this to see tooltips in action.

Note: These tooltips aren't clever so they will spill offscreen. You'll need some Javascript if you want dynamic positioning.


Tooltip




Disabled button tooltips

If you want to tell your user why a button is disabled then you can use the dtt attribute to show a tooltip when a button is disabled. This is handy for things such as invalid or incomplete forms.

You can use both tt and dtt on the same element and the button disabled state will determine the tooltip shown.

Use the primary button to toggle the normal/disabled button.





Anchor link tooltip

You can easily set a tooltip for an anchor link that shows the href on hover just by adding the att attribute.


BareCSS

Forms

Nothing special here, replacing the often ugly browser defaults with some BareCSS style. Just note that you need to place the label tag directly after the radio and checkbox inputs. Text inputs and select boxes are default to 100% width as you'll most likely use them in a grid.














 


 

Code

The code tag functionality has been kept basic as you'll most likely be using something like PrismJS for syntax highlighting and code escaping.

Here is some inline code.

if ( to_be || !to_be ) {
  that = theQuestion;
}

code


Code line 1
Code line 2
Code line 3

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris.

- Lorem Ipsum

Quote goes here.

- Said Someone

Lists

As long as the ul or ol tag is classless or has the xx attribute the styles should apply to the child li elements too.

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three with nest list:
    • Nested item one
    • Nested item two
  • Unordered list item four
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three with nest list:
    1. Nested item one
    2. Nested item two
  4. Ordered list item four

Tables

The tables are just your standard table element with thead, tbody, tr, th and td elements within. As long as the table tag is classless or with the xx attribute, the styles should apply to the child elements.

When the user hovers over the head row, the relevant column will be highlighted. Any other row and the entire row will be highlighted.

Title one Title two Title three Title four
Row 1 col 1 Row 1 col 2 Row 1 col 3 Row 1 col 4
Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 2 col 4
Row 3 col 1 Row 3 col 2 Row 3 col 3 Row 3 col 4
Row 4 col 1 Row 4 col 2 Row 4 col 3 Row 4 col 4

The grid

Getting a classless grid system means using the very non-standards compliant but totally working grid element. Actually supported in IE9+.

The BareCSS grid is simple and succinct. It's also fully responsive so that's nice. Just use the grid element and throw some divs with col attributed children in there and you're good. No need for row as the cols will wrap around.

Since there are no rows, column widths are expressed in fractions which should make identifying rows easier. Eg: 1/3 and 2/3 make a row.

Note that each column in this grid will be 100% width on a mobile device.

1/12
11/12
2/12 or 1/6
10/12 or 5/6
3/12 or 1/4
9/12 or 3/4
4/12 or 2/6 or 1/3
8/12 or 2/3
5/12
7/12
6/12 or 3/6 or 2/4 or 1/2
6/12 or 3/6 or 2/4 or 1/2
1/1


	

Fixed grids for mobile

The grid columns will automatically expand to 100% width when the viewport reaches the @mobile width. To prevent this, add the fx attribute to the column.

5/12
7/12
1/2
1/2


	

Nested grids

You can place a grid inside of col to nest grids. You can do this as many times as you like.

1/2
1/1
1/2
1/2


	

Grids with horizontal rule

The examples you are looking at now are all cols within a grid separated by hrs.



	

Cards

Cards use the also totally non-compliant card element but works fine in IE9+. These cards are meant to be used within a grid.

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card two

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Card three

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.



	

Your content

Card title

Your content here

Card title

Your content here


Cards with images

Top image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.



	sign
	
	
Title

Content goes here

Middle image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.



	
Title
sign

Content goes here

Bottom image

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.



	
Title

Content goes here

sign

Utility attributes

BareCSS has a few utility attributes to make laying out a site a little faster. Sometimes you don't need to give an element a unique class to make it's text align right. Use these attributes to apply quick styles such as paddings or margins.

Attribute Values Effect
full null Width 100%
hide null Display none
fs xs s m l xl Sets font sizes from 1.1rem to 2.4rem
mt 0 2 4 8 Sets margin-top from 0 to 8rem
mb 0 2 4 8 Sets margin-bottom from 0 to 8rem
pt 0 2 4 8 Sets padding-top from 0 to 8rem
pb 0 2 4 8 Sets padding-bottom from 0 to 8rem
pa 0 2 Either removes all padding or sets padding for all sides to 2rem
txt l c r j Set's text alignment to left, centre, right or justify