BARECSS
A classless CSS framework.
A classless CSS framework.
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+.
Checkout the continuation of BareCSS in CSS AMP.
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.
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.
BareCSS has not been updated in some time, and is unlikely to be.
It has been forked into a few further projects, and this site is here to maintain the original presence. CSSAMP is a replacement that includes the AMP framework but otherwise works similarly in a more modern way. No classes still, but it validates completely and works well on mobile and the rest.
CSSAMP is created as a single-file solution with inline SVG graphics for maximum speed.
xx default class has now been made an attributedata-tt it's now just ttatt attributeDownload 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
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.
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 1h2 Heading level 2h3 Heading level 3h4 Heading level 4h5 Heading level 5h6 Heading level 6Tooltips 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
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.
You can easily set a tooltip for an anchor link that shows the href on hover just by adding the att attribute.
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.
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
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
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.
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 |
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.
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.
You can place a grid inside of col to nest grids. You can do this as many times as you like.
The examples you are looking at now are all cols within a grid separated by hrs.
Cards use the also totally non-compliant card element but works fine in IE9+. These cards are meant to be used within a grid.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
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
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Title
Content goes here
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Title
Content goes here
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Title
Content goes here
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 |