https://github.com/vladocar/child-selector-system-css_framework

Child Selector System is experimental CSS Framework that use child selectors for making multiple simple (column) grid.
https://github.com/vladocar/child-selector-system-css_framework

css css-framework css-selector grid grid-layout

Last synced: 19 days ago
JSON representation

Child Selector System is experimental CSS Framework that use child selectors for making multiple simple (column) grid.

• Host: GitHub
• URL: https://github.com/vladocar/child-selector-system-css_framework
• Owner: vladocar
• Created: 2018-02-09T10:07:18.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-09T10:24:45.000Z (almost 7 years ago)
• Last Synced: 2024-11-20T12:03:31.473Z (3 months ago)
• Topics: css, css-framework, css-selector, grid, grid-layout
• Language: HTML
• Size: 18.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Child-Selector-System-CSS_Framework

Child Selector System is experimental CSS Framework that use child selectors for making multiple simple (column) grid.

This Framework has limited use and is mainly build for *teaching purposes*.

The Framework has .one to .twelve columns elastic % based columns system. Note: .eleven is deliberately canceled.

Example class .three>div{ width:33.33% }

All the nested divs inside the .three class div will become "styled" with 33,33% and they will make three column grid.

Advantages:

 * Super small ( 0,31 kb )

 * Personalized main container (%, px, em)

 * Nested columns support

 * Easy to use.

 * Reduces the amount of generated HTML to minimum

Disadvantages:

 * Limited use (You can't build column larger then 50% (1/2) )

Examples:

[The System](https://vladocar.github.io/Child-Selector-System-CSS_Framework/Child-Selector.html)

[Build with one CSS line](https://vladocar.github.io/Child-Selector-System-CSS_Framework/Child-Selector1.html)

[Example1](https://vladocar.github.io/Child-Selector-System-CSS_Framework/Child-Selector2.html)

[Example2](https://vladocar.github.io/Child-Selector-System-CSS_Framework/Child-Selector3.html)

[More info..](http://www.vcarrer.com/2011/03/child-selector-system-css-framework.html)

https://vladocar.github.io/Child-Selector-System-CSS_Framework/