GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - CSSG/css-o-gram: CSS descriptional language

BranchesTags
Open more actions menu

Latest commit

 

History

30 Commits
30 Commits

Folders and files

NameName
Last commit message
Last commit date
ru
ru
 
 
README.md
README.md
 
 
advanced.md
advanced.md
 
 
basic.md
basic.md
 
 
legend.md
legend.md
 
 

Repository files navigation

CSS-o-Gram (CSSG)

rapid, intuitive, neat - like SSG, but peaceful

Overview

CSSG stands for "CSS Diagram", in fact - a comment block in CSS file, which describes substance structure with CSS classes. Substance can be element, block or project, depending on methodology that you do (or do not) use.

This is your trusted companion in large project and assistant for your colleages, if you work in team.

Low entry barriers - use regular syntax and some logical rules.
However, it's implied that you familiar with BEM, SMACSS, MCSS etc. and perhaps already use any of theese methodologies.
If not, you could possibly hear about Bootstrap and other frameworks.
Either way it is recommended to get yourself acquainted with OOCSS terminology before further reading.

For whom and for what

  • Better code structure and getting into new code
  • Conversation tool for colleages and developers, distant from front-end
  • Detecting potential "bottlenecks" in layout (excessive DOM nesting, classes amount etc.)
  • Easier debugging and refactoring
  • It's just pretty!

Quick start

Get to know first part of CSSG documentation - basic
Easy enough - try it and continue reading - advanced
Syntax legend - legend


CSSG generator

Of course it's far more handy to get into into CSSG using automatic generator. Check out CSSG converter


Fun facts

CSSG could be developed back in 2008-th, thanks to Vitaly Friedman' example!


Afterword

Feel free to ask questions via email.
All content is available for free distribution.
Link to source is mandatory when copying materials.

About

CSS descriptional language

cssg.rocks

Resources

Readme
Activity
Custom properties

Stars

10 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.