The anti-dependency "dependency."
eCSSentric is not intended to be treated as a library or framework. It is a launching point for your CSS. It's a skeleton of styles designed to provide a simple start that acts as a springboard.
Basic decisions have already been made, though anything can be revisited. eCSSentric is closer to a reference resource than it is to a library or framework. It may help to consider every eCSSentric instance as a fork of the original project. Once forked, it's yours, build it up and modify it according to your own app's unique needs.
- Download eCSSentric.css and save it to your styles folder.
- Include the style in your html header with
<link rel="stylesheet" href="/{your styles directory}/ecssentric.css"> - Use index.html as a reference for how the different design elements are used.
- No build step
- No JavaScript dependencies
- Cards
- Columnar Grid
- Forms
- Buttons
- Message Blocks
eCSSentric's philosophy for variable naming has two parts:
- Start with specifics for the smallest piece, then get more descriptive by appending the next biggest context.
- No bike-shedding names
For example, if you want a variable for the color, use --color. If it's
for a border, then use --color-border. Then, suppose you need the color of a
border for a form input, look for --color-border-input. Then, suppose you
need the color of a border for an input element that is in an error state,
look for --color-border-input-error.
eCSSentric uses rem size values. Given the default values in
ecssentric.reset.css, 1.6rem will be equivalent to 16px.
- grid/masonry styles and demo (multi column example)
- flex styles supporting multi 'columns'
- mobile styles using media queries and/or contaienr queries
- error message block style
- error message list style
- table style
- scrollbar style
- dynamic call-to-action button styles and demo
- refine configuration variable names for clarity
- document configuration values