Csstetic

Semantic framework for front-end ui developers.
Build websites & components with clear html code.

Csstetic is a set of code snippets which joined together solve common ui design tasks. It does not "reset" or overwrite project's styling, that makes it easy to use with any existing framework or as a standalone tool. For rapid prototyping Classic (compiled css) version should be enough, while Semantic (scss mixins) require any sass compiler and results in clean (semantic) html code.

Comparison

Classic version uses simmilar syntax to other common css frameworks:

<span class="fw-button fw-size-md fw-bg-red">button</span>

Semantic version moves all the styling back to scss file:

Html:
<span>button</span>

Scss:
span {
  @include fw-button;
  @include fw-size-base;
  @include fw-size(md);
  background: fw-color(red);
}

Classic

Semantic

Description

Price

Free

Free

Classic version is one variant of compiled Csstetic, all the goodies available through mixins and functions come with Semantic version.

File size

50kB

0+ kB

50kb is the file size for csstetic.css file containing ready to use copy & paste components. Semantic version (0+ kB _csstetic.scss) adds only this code, which has been truly used in your project.

Selectors

predefined

custom

Classic is better for rapid development, because of precompiled class="fw-..." selectors, while Semantic allows you to create custom selectors like class="music-player", then compiling it.

Difficulty

easy

medium

In fact, both versions come with ready to copy & paste cody snippets, but since Semantic version requires using .scss files instead of .css, it has been marked as medium.

Responsiveness

partially

fully

Classic version is prepared for most common use cases for each device size but advanced features such as fw-scale(...); or fw-media(tablet){...}; wouldn't be possible without goodness of scss language.

Customizable

medium

high

While building layout with class="feature-1 feature-2" is quick and easy, sometimes you may need to customize the feature through options available in .scss mixins and by adding custom css properties.

Semantic html

no

yes

That's where "Semantic" name comes from - all features can be packed in one html class="my-button" or even target entire <button> tag without touching the html file, leaving the code as clear as possible.

License

MIT

MIT

Both versions give you as much freedom as possible in personal and commercial use.

Features

Pure Css

All features are combined in a single file, no javascript dependencies, this makes Csstetic a great basement for creating jQuery, Angular or React components.

lightbulb_outline

Best design patterns

While most of code issues can be solved by Googling and reading StackOverflow - this will take your time. Each code snippet is a handpicked design solution. Keeping that in mind - you can focus on primary task.

devices

Cross device support

Each device may come with different browser and a different screen size. Csstetic also gives support for IE9+ or Android Chrome. For smaller devices - components will change their size proportionally to screen width.

Ultra lightweight

Classic version comes with preconfigured features and weights only about 50kB, but Semantic version is truly lightweight - only the features in use will influence resulting file, this may be 10kB or even 1kB.

playlist_add_check

Prefixed naming

Csstetic takes adventage of prefixed naming convention, adding 3 characters before each name makes it compatible with any ui framework. However you can use selectors with any naming convention through scss mixins.

code

Tidy html markup

It's easy to end up styling project with too-many class attributes for one element, especially on prototyping stage. Html markup should stand for document's semantic structure. In semantic version you can move all visual information back to stylesheet file, that's where the name "semantic" come from.

Download

Getting started


Packages include press kit images.