shadowcodex/codex-ui

:icecream: Vanilla Bootstrap Components. :electric_plug: Plug and Play, Copy and Paste.

Work is being done to upgrade to Boostrap 5 and begin adding new components as well as a new website. https://github.com/shadowcodex/codex-ui/projects/3

Planning to have components updated first and then within the next few months roll out new components, templates, and a new website.

Codex UI

A collection of UI components for bootstrap 4

View Components

To view a full list of components that are both done and on the road map simply go to https://codexui.com/

How To Use

From The Site: Just copy and paste. Each component will have a code: section below it. Just copy that code and paste it into your site. As long as you have bootstrap 4 running on the site, they components should just "work".

If they don't and you can't figure out why open an issue and I'll gladly help as much as I can!

From Github: Download the repo as a zip and open up any of the components. They should be copy and paste ready to go.

Restrictions

I am working off of two premiss for this UI library / Kit.

1. No custom CSS to be added. Meaning you don't have to modify any bootstrap css values. Our goal is to completely use the utilities in Bootstrap 4 to our benefit.
2. No custom JS to be added. No dependencies to add custom Javascript to your website. This way we won't conflict with anything that has been done on sites before.

All components should basically be copy and paste for sites that use Bootstrap 4.

The one, ONE, caveat to that right now is font awesome. I require some sort of icons for certain components, and since font awesome is one of the easiest to just drop in I am using that. Feel free to replace the icons with your own icon framework.

If a component does require font awesome it will be notated at the very top of that components page.

Contributions

I am open to contributions to the components, you could contribute in many ways:

1. Create a new component
2. Request a new component
3. Post bugs as issues
4. Help answer issues as they come up

Any new components or pull requests will be reviewed to make sure they fit the restrictions before pulling them into the repo.

Made with ❤️ by shadowcodex

codex-ui's Issues

move to new distribution style

Separating the master repo from the site.

Site will have demo's and the code, but the master site will have a folder of all the components naked by themselves in html files.

This will make it so you can download only the components as they are made, and view the site for additional information.

Vertical Navigation Bar

Simple vertical navigation stuck to the side of a viewport.

• Left navigation
• Right Navigation
• Right & Left Navigation

Contact Form Box

Simple contact form. 2 designs, one without font awesome icons and one with.

Reset Password Box

Similar to login box basic + reset pass word information.

Theme dropdown

As soon as bootswatch updates their themes for the bootstrap 4 beta I'll setup a drop box to change the theme. Similar to what is pointed out here: https://stackoverflow.com/questions/19192747/how-to-dynamically-change-themes-after-clicking-a-drop-down-menu-of-themes

Login Box with Verbage

A modification of the login form, to include verbage to the left or right of the box. (Expands the box to about 8 columns)

Update to bootstrap 5

With bootstrap 5 in beta, it's time to update this to use it.

Along with that will add several more components.

Newsletter Subscribe Tile

Simple subscribe to newsletter tile.

Circle Large Blobs

Do the circle large blobs that are on the home page as a component. Request by papacthulu.

Sign Up / Register Box

Box for retrieving information to sign a user up or register them for the platform.

Blurb

Create blurb component.

Blurb is a heading/subtext + icon relating to that.

Used often to list features, and show component information.

Article Card

Create an article card

Login Box with Social Login Options

Create social login (buttons) on the login box as an alternate design. Would like to have this both for a verbage and non verbage version.

Navigation Widget (scrollspy single)

Single Column, icon navigation that scroll spy's the content to all you to create a workflow like screen.

Attaches to top left of screen Fixed and always there.

vue components

While plug and play vanilla bootstrap is great, and I want to expand these components. As soon as I get time I'm going to start creating a second version of codex-ui to grow along side this one. This will be codex-ui-vue and will implement each component as a vue component.

Sections

Setup a component that demonstrates doing alternate sections.