The Project itself
Firstly, CSS Components, is a PURE CSS library for front-end development.
The reason this project started was it developer (yeah, me) being tired of seeing how websites are
unnecessarily heavyweight and with slow loading due the use of Javacript and JS libraries on their
apperence - wich leads to poor performance and bad programming pratices.
Thinking on the problem of excessive JS use and the lack of several (normally most) useful things in existing pure CSS libraries that do exist in JS powered ones, i've got to one simple conclusion: maybe I sould make my own library, using only CSS. And ... why not do it?
Initially, it would be a simple copy of major front-end libraries and frameworks, remade with only CSS. But after some redesigns an two years learning more of web programming with pratice, I've decided to go back at the begining and redo the project with the following focuses:
-
Simplicity
It must be easy to use and at the same time make developers job easier; -
Performance
It must be lightweight and use the miniimum ammount of code needed; -
Accessibility
It should help to make the web more accessible to everyone; -
Standardization
It should help to make the websites structure close to common standarts (wich helps with SEO); -
Visual
Of couse, the library must provide a good visual to sites who use it.
Given that big objetives, the project has 3 long term goals:
- Be a really useful library to front-end development
- Implement all accessibility (ARIA) rules and standarts
- Implement all schema.org standart types
Of couse that's very, very hard to do. So any help is very welcome. ;)
Structure
The design rules applied here are quite simple:
-
Every file directly in the project's CSS folder act as a module
Except for complete.css, that's a shorcut to import all the modules. -
The modules are independent from all others (except the core)
The Core Module defines basic rules that all modules will follow and use and some utilitary CSS styles that can be used everywhere on front-end.
Everything that doesn't fit that criteria must have it's own module. -
Modules (other than Core) serve to implement components
Being a button, a dialog or even a whole article (like this), every kind of thing that can be used in a web page and is supported by the library is treated as a component.
If we use some OOP concepts, a component would be equivalento to a Class: a standart model of something. -
When possible, components must be groupped
If two or more components share most of their functionality (like dialogs and alertdialogs do), they must be implemented in the same module.
That helps to keep the project simple and lightweight. -
Material Design color palletes are used for every color on this project, in all
modules.
The library's user is free to use them as weel if wish so.
We already define our own primary color palette in Core Module (Grey) using CSS Variables. To use other pallete as primary, just import it on the page after the library and the color variables will be overriden.
Remember that we choose no default accent color.
The project's file struture is the following
-
CSS {folder}
Where the magic happens-
pallete {folder}
The color palettes avaliable on the project
-
accent {folder}
CSS files that register every pallete of the accent colors variables -
primary {folder}
CSS files that register every pallete of the primary colors variables
-
accent {folder}
-
core.css
Where universal rules and styles are defined -
complete.css
Shortcut to import all modules at once - Other modules ".css" files...
-
pallete {folder}
The color palettes avaliable on the project
-
Docs {folder}
Our included documentation (and demos) pages-
index.html
The file you're reading :P - Components documentation files
-
index.html
Conventions
Like said above, everything may be a component. Like a class in OOP, a compoent may
be a link, a standart data document strucuture (like a blog post), a tooltip, almost
anything.
Here are the "ground rules" we use to develop the components:
- A given component, a button for example, will have it's own unique properties, but at the same time may have properties shared with other components - like buttons and articles may share the same default font color;
-
The most basic and/or universal properties that can be shared by most (or even all)
components will be declared directly on the Core Module, making them universal.
When components shared most of their properties, they will be both implemented in the same module for simplicity; - Components that group other components (like a radiogroup) follow the previous rule;
- We use attributes for styling to give a more semantic and declarative syntax on the HTML.
- All our custom attributes use the data-css- prefix, to avoid name collision with another libraries and/or your code.
-
By default, all components use the primary colors.
To use the accent pallete on a component (or part of it), you must use the data-css-color="accent" attribute.
Release Model
Beign a project currently kept by a single developer, wich works on this in his free time, its undoable to mantain a stricly regular release scheme. But, I do plan to release updates in a role releasing model: as soon as its done and tested, it will be released.
Widget Components
Button Component
Layout: almost complete (lacks spinbutton)
Functionality: native
Settings: size, color, forced states, actions, groups
Check Component
| Checkbox | Radio | Switch | |
|---|---|---|---|
| Layout | Complete | Complete | Complete |
| Functionality | Native | Native | Complete |
| Settings | size, color, forced states | ||
✖ Check Component Demo
Checkbox
Radio
Switch
<h4>Checkbox</h4>
<div data-css-role="checkbox">
<input id="simple_checkbox" type="checkbox">
<label data-css-toggle for="simple_checkbox">
Toggle me
</label>
</div>
<h4>Radio</h4>
<div role="radiogroup">
<div data-css-role="radio">
<input id="simple_radio1" name="simple_radio" type="radio">
<label data-css-toggle for="simple_radio1">
Go in
</label>
</div>
<div data-css-role="radio">
<input id="simple_radio2" name="simple_radio" type="radio">
<label data-css-toggle for="simple_radio2">
Go out
</label>
</div>
</div>
<h4>Switch</h4>
<div data-css-role="switch">
<input id="simple_switch" type="checkbox">
<label data-css-toggle for="simple_switch">
Enable it?
</label>
</div>
Combobox Component
Grid Component
Link Component
Layout: complete
Functionality: full (with native element)
Settings: color, forced states
✖ Link Component Demo
Component:
<a data-css-role="link" href="link_demo">
I'm a native link.
</a>
 
<div role="link">
I'm a custom link.
</div>
Listbox Component
Menu Component
Progressbar Component
Scrollbar Component
Searchbox Component
Separator Component
Slider Component
Spinbutton Component
Tabpanel Component
Textbox Component
Layout: almost complete (lacks multiline/textara)
Functionality: native and custom
Settings: resting label, help text, error message, icons, required and optional signals
✖ Textbox Component Demo
Component:
<div data-css-group="textbox">
<input id="plain_label_single" placeholder="I'm native" type="text">
<label for="plain_label_single">Native texbox</label>
</div>
<div data-css-group="textbox">
<div aria-placeholder="I'm not native" contenteditable="true" id="plain_label_multi" role="textbox">
</div>
<label for="plain_label_multi">Non native</label>
</div>
Tree Component
Document Strucutre Components
Application Component
Article Component
Layout: basic
Functionality: basic
Settings: table of contents, chapters, color
Cell Component
Columnheader Component
Definition Component
Directory Component
Document Component
Feed Component
Figure Component
Group Component
Heading Component
Img Component
List Component
Listitem Component
Math Component
None Component
Note Component
Presentation Component
Row Component
Rowgroup Component
Rowheader Component
Separator Component
Table Component
Term Component
Toolbar Component
Tooltip Component
Layout: almost complete (needs some fixes)
Functionality: complete
Settings: position, color
✖ Tooltip Component Demo
Component:
<a data-css-group="tooltip" href="#structure_tooltip" role="button">
<div data-css-side="right" role="tooltip">
I am THE tooltip!
</div>
I do have a tooltip.
</a>
Landmark Components
Those are components to provide specific purpose and/or quick access to the user.
Banner Component
Complementary Component
Contentinfo Component
Form Component
Main Component
Navigation Component
Region Component
Search Component
Live Region Components
Here there are components to display content updated without the need of user interaction.
They will be normally out user focus and updated with external events.
Being a pure CSS library, we provide only standart layout for this components.
Alert Component
Layout: complete
Functionality: display only
Settings: type, color, icons
✖ Alert Component Demo
Component:
<div role="alert" title="A simple alert">
This is an alert, dude.
</div>
Log Component
Marquee Component
Status Component
Timer Component
Window Components
This components act like a window inside the browser's window.
They are a great power to be used with great responsibility.
Dialog Component
Layout: partial (footer not implemented)
Functionality: full (without native element)
Settings: size, color, modality
✖ I'm a standart dialog
<section aria-labelledby="dialog_header"
data-css-size="big" id="dialog_demo"
role="dialog">
<h4 data-css-role="heading" id="dialog_header">
<a href="#window_dialog" data-css-close data-css-float="right" title="Close">✖</a>
I'm a standart dialog
</h4>
<div>
And i am the dialog's text.
</div>
</section>
✖ I'm an alert dialog
<section aria-labelledby="alertdialog_header"
data-css-size="big" id="alertdialog_demo"
role="alertdialog">
<h4 data-css-role="heading" id="alertdialog_header">
<a href="#window_dialog" data-css-close data-css-float="right" title="Close">✖</a>
I'm an alert dialog
</h4>
<div>
And i am the alert.
</div>
</section>