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