Choctaw Nation Veterans Archive

Welcome to the veterans-archive wiki!

This site, though small, comes with a number of Bootstrap extensions and custom elements.

Colors

Bootstrap’s $theme-colors map has been extended / modified to allow for utility classes (e.g. bg-* and text-*) to make use of the new colors.

Colors Modified / Extended:

• Primary
• Dark Blue (dark-blue)
• Green
• Light Green (light-green)

Custom Components

• Custom components are styled with CSS variables for things that should be modifiable.
• The variables are prefixed with cno (e.g. --cno-divider-gap) for conflict-free naming conventions.

The “Morse-Code” Divider

The custom divider component follows the convention of .divider .divider-[color-modifier] like many of Bootstrap’s components. This is generated with a SCSS @each map in bootstrap.scss.

// Generate Modifier Classes for Custom Divider Component
@each $color, $value in $theme-colors {
	.divider-#{$color} {
		--cno-color: #{$value};
	}
}

The Divider Class (PHP 🐘)

The Divider class provides a way to generate consistent HTML markup with simple handles for direction and color. It provides 2 methods: get_the_divider and the_divider which take the same arguments. As is to be expected with a WordPress build, these functions echo/return the markup (like get_the_* and the_* functions do).

Custom Buttons

Meant to be used as a standalone class to provide consistent HTML generation, there is a really terrible list of $args that the method is expecting to make it work. The odd part is that because buttons typically come in one of 3 categories (input, button and a), there has to be a way to handle these types.

All buttons come pre-loaded with btn btn-lg Bootstrap classes. Typically, the only additional class you will need to pass is a button modifier (e.g. btn-primary or btn-outline-light).

The General Idea (PHP 🐘)

When you construct a new button, you pass in 2 big ideas:

1. $args array that contains all the args the element might have (depending on the element).
2. container_class as string|array for positioning (e.g. ms-2 or my-5)

public function get_the_button(array $args, string|array $container_class = ''):string {}

Button $args

$args = array(
  'element'    => 'input'|'a'|'button',
  'class'      => 'btn-outline-light', // optional
  'type'       => 'submit', // optional
  'value'      => 'Search', // optional
  'text'       => '', // optional
  'href'       => '', // optional
  'aria-label' => '', // optional
  'target'     => '', // optional
  'rel'        => '', // optional
);

Button Styling (CSS 💄)

Powered by the _buttons.scss component, essentially the .btn-container (outermost div) holds the variables that the nested elements inherit. There are 3 elements that power this component:

1. .btn-container (wrapper element)
2. .btn-lower (the clip-path)
3. The “button” element itself (whatever element is supposed to look like a button).

The div.btn-lower has the clip path, which animated with the .btn-container‘s CSS custom properties for easy styling.