WELCOME TO

Molecular Components

PROJECT MISSION:

Provide highly customizable JavaScript ES Module components with UX principles baked-in, along with a JavaScript API that handles atomic CSS classes from Frameworks and/or Web Design Systems (like the OBE:WDS framework that's currently built on top of Bootstrap 4!).

Installation:

Installing OBE:WDS Molecular Components is easy with NPM! Here are the steps to get started:

Install Code Base:

                                
                                    npm install oberocks/obewds-molecular-components --save

Copy Files Into Your Project:

                                
                                    cp -a ./node_modules/obewds-molecular-components/js/. ./your-project-directory-path-here/

Updating:

Updating to a new version of the OBE:WDS Molecular Components is also easy with NPM! In this case though, it can save you some time to leverage NPM Scripts. Here's how to do that:

Add Molecular Components NPM Scripts to your package.json file:

                                
                                    "scripts": {
                                        "install_molecular_components": "npm install oberocks/obewds-molecular-components --save",
                                        "update_molecular_components": "cp -a ./node_modules/obewds-molecular-components/js/. ./your-project-directory-path-here/",
                                        "update_and_install_molecular_components": "npm run install_molecular_components && npm run update_molecular_components"
                                    }

And now you can update and move the updated files in one shot with:

                                
                                    npm run update_and_install_molecular_components

Be sure to change the /your-project-directory-path-here/ value in the examples above to the directory path you need for your project! (Usually something like: ./js/)!

Quick Start:

The whole idea for this project is to get components in the browser and working as fast as possible! Here's an example using an input_form_group.js component:

To get a component like this:

You Simply Need to Do This:

                                
                                    <script type="module">

                                        // import module
                                        import { Input_form_group } from './js/modules/form_components/input_form_group.js';

                                        // Create a fragment to collect your component(s)
                                        let fragment = document.createDocumentFragment();

                                        // instantiate module component
                                        let inputs = new Input_form_group();

                                        // define the settings for your input form group itself
                                        let username_options = {
                                            name: 'username',
                                            label: 'Username:',
                                            placeholder: 'Enter a Username',
                                            form_text : {
                                                help    : ['A Username is required.']
                                            },
                                            form_modal_text : {
                                                heading: 'Your Username',
                                                body: [{
                                                    type: 'paragraphs',
                                                    content: [ 'Your username can be any combination of lower and uppercase letters along with numbers, spaces, underscores, and dashes.', 'However, other characters and symbols are not allowed.' ]
                                                }]
                                            }
                                        };

                                        // generate the input form group markup with the options
                                        let username_input = inputs.generate(username_options);

                                        // append your new component to your fragment (along with any other generated components)
                                        fragment.appendChild(username_input);

                                        // and append the fragment to your document
                                        document.getElementById('example-username-component').appendChild(fragment);

                                    </script>

SITE HOME

Docs