Description

Soma CSS is a small, functional and pure CSS3 library which offers CSS components that are:

• Immutable like Pure Functions in FP approach
• Reusable like Objects in OOP approach
• Nestable like Components in React approach

Components can be created:

• manually using simple editors or emmet plugin
• or using JavaScript

But, For their actions they do not need JavaScript.

Prerequisites

CSS Part

The CSS part is heavily base on

• flex-box
• input's UI-State pseudo-class (= :checked)
• label's [for] attribute
• transform: translate

JavaScript Part

The JS part uses Pure JS DOM APi provided by browsers like

• document.createElement
• element.[get|set]Attribute
• element.appendChild( Node )
• etc

React Part

The React is base on:

• react 16+
• react-dom
• JSX

How to Use

You can use them in either way of Pure CSS or creating them using JS and then using them. Actually API has been divided in to three types:

Using Pure CSS (= somacss.ir)

JavaScript is used for creating the components but CSS manages the state.

CSS file:

<link rel="stylesheet" type="text/css" href="soma.prefixed.min.css" />

JS in ES6 format:

import { carouselZ, carouselY, carouselX, slickX, progressX } from 'somacss';

JS in ES5 format using Global S

<script type="application/javascript" src="soma.es5.js"></script>
// Global S.xxx are available to use
// S.carouselZ
// S.carouselY
// S.carouselX
// and so on

Using JavaScript (= somajs.ir)

JavaScript is used for both creating the and managing the state.

Using React (= somareact.ir)

React (JSX) is used for both creating the and managing the state.

Download

Just Source

# Soma CSS
git clone https://github.com/k-five/soma

# Soma JS


# Soma React

If you want to build it from source, install:

• sass && jest globally
• And devDependencies on package.json file

There is no __tests__ directory, so for running test just try:

jest src/
# or
jest --max-workers 2 src/

Just Last Release

# Soma CSS
npm install somacss     # install the package
cd node_modules/somacss # package root
cd build                # release file are here
tree --dirsfirst -sh
.
├── [4.0K]  css
│   ├── [ 47K]  soma.css              # raw version
│   ├── [ 23K]  soma.css.map
│   ├── [ 40K]  soma.min.css          # minified version
│   ├── [ 23K]  soma.min.css.map
│   ├── [ 50K]  soma.prefixed.css     # prefixed version
│   ├── [ 15K]  soma.prefixed.css.map
│   └── [ 42K]  soma.prefixed.min.css # prefixed + minified
└── [4.0K]  js
    ├── [ 11K]  soma.es5.js           # is used with <script src> which has global S
    └── [ 11K]  soma.js               # import { name-of-the-component } from 'somacss'

# Soma JS


# Soma React

Example

Combining 5 components to build a super carousel

• CarouselZ (managing Brands)
• CarouselY (managing Categories)
• CarouselX (managing Sections)
• SlickX (managing Products)
• Carousel(Z or Y or X) (managing Types)

The Code for final part of the challenge on somacss.ir

// eCommerce is a JSON file
// var keys = Object.keys
brands = keys( eCommerce );
var final = carouselZ({
    titles: brands,
    children: brands.map( function( brand ){

        // array of categories for each brand
        var categories = keys( eCommerce[ brand ] );

        // and for each brand creating carousel-y
        return carouselY({
            titles: categories,
            children: categories.map( function( category ){

                // array of sections for each category
                var sections = keys( eCommerce[ brand ][ category ] );

                // and for each category creating carousel-x
                return carouselX({
                    titles: sections,
                    children: sections.map( function( section ){

                        // if we have any products
                        var products = keys( eCommerce[ brand ][ category ][ section ] );

                        // one slide for each product
                        return slickX({
                            children: products.map( function( product, productIndex ){

                                // when we have types of products
                                var types = keys( eCommerce[ brand ][ category ][ section ][ product ] );

								// just playing with combination of carousel(Z or Y or X)
                                switch( types.length ){
                                    case 0:
                                        return h1( "dummy content " + productIndex ).cloneNode( true );
									break;

                                    case 2:
                                    return carouselX({
                                        titles: types,
                                        children: types.map( function( typeName ){
                                            return h1( typeName ).cloneNode( true );
                                        })
                                    });
									break;

                                    case 3:
                                    return carouselY({
                                        titles: types,
                                        children: types.map( function( typeName ){
                                            return h1( typeName ).cloneNode( true );
                                        })
                                    });
									break;

                                    default:
                                    return carouselZ({
                                        titles: types,
                                        children: types.map( function( typeName ){
                                            return h1( typeName ).cloneNode( true );
                                        })
                                    });
                                } // end of switch()
                            })
                        });
                    })
                });
            })
        });
    })
});

the structure

carouselZ
├── titles
└── children
    └── carouselY
        ├── titles
        └── children
            └── carouselX
                ├── titles
                └── children
                    └── slickX
                        └── children
                            └── carouselZ
                                ├── titles
                                └── children

the output

Copyright & License