diff --git a/docs/card.html b/docs/card.html index afa9dd7..832dd2d 100644 --- a/docs/card.html +++ b/docs/card.html @@ -215,11 +215,11 @@

-

Card with image

Content

-

Card with video

+

Card with image

image

Content

+

Card with video

Normal section

Double-padded section

Normal section

Dark section

Darker section

-

Inverse card

Content

More content

+

Inverse card

image

Content

More content


diff --git a/docs/core.html b/docs/core.html index 32757ab..f2d4538 100644 --- a/docs/core.html +++ b/docs/core.html @@ -146,7 +146,7 @@ var num3 = num1 + num2; console.log('Result: ' + num3); } -
This is some quoted text from elsewhere.

+
This is some quoted text from elsewhere.

@@ -161,7 +161,7 @@ <kbd>Keyboard Input</kbd> <hr> <pre>This is some preformatted text.</pre> -<blockquote cite="Quotation source"> +<blockquote cite="www.quotation.source"> This is some quoted text from another website or person. </blockquote>
@@ -213,7 +213,7 @@

Image responsiveness & captions

-
Image caption
+
image
Image caption

Image elements (<img>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.

On a side note, if you want to add captions to images, you can use a <figcaption> element, while wrapping both the image and it inside a <figure>.

diff --git a/docs/customization/card.html b/docs/customization/card.html index 3d8e638..4afc6a2 100644 --- a/docs/customization/card.html +++ b/docs/customization/card.html @@ -65,7 +65,7 @@ Close icon Generic border & shadow mixins Responsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -96,7 +96,7 @@

Cards & sections

The card module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.


- +
@@ -167,7 +167,7 @@

Card mixins

The card module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.


-
Variables
VariableTypeDescriptionSample value
+
@@ -183,7 +183,7 @@
Card mixin definitions
MixinDescription

- +
@@ -218,7 +218,7 @@

Sample usage

@include make-card-alt-color ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);

-
make-card-alt-color
ParameterTypeDescriptionSample value
+
@@ -237,14 +237,14 @@

Sample usage

@include make-card-alt-size ('large', 480px);

-
make-card-alt-size
ParameterTypeDescriptionSample value
+
- @@ -253,7 +253,7 @@
Card section mixin definitions
MixinDescription
make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color, $card-section-alt-fore-color, $card-section-alt-border-style + make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color, $card-section-alt-fore-color, $card-section-alt-border-style) Creates a new card section color variant using the specified values.

- +
@@ -280,7 +280,7 @@

Sample usage

@include make-card-section-alt-color ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);

-
make-card-section-alt-color
ParameterTypeDescriptionSample value
+
diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index 9166c0e..d827e23 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -65,7 +65,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -96,7 +96,7 @@

Text highlighting

The contextual module's styling of <mark> elements is highly customizable.


-
make-card-section-alt-style
ParameterTypeDescriptionSample value
+
@@ -155,7 +155,7 @@

Alerts

The contextual module's contains custom classes and styles for defining alerts.


-
Variables
VariableTypeDescriptionSample value
+
@@ -220,7 +220,7 @@

Tooltips

The contextual module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.


-
Variables
VariableTypeDescriptionSample value
+
@@ -281,7 +281,7 @@

Text highlighting mixins

The contextual module contains a couple of mixins for adding custom styles to <mark> elements (color and style variants).


-
Variables
VariableTypeDescriptionSample value
+
@@ -297,7 +297,7 @@
Mixin definitions
MixinDescription

- +
@@ -320,7 +320,7 @@

Sample usage

@include make-mark-alt-color ('secondary', #e53935, #fafafa);

-
make-mark-alt-color
ParameterTypeDescriptionSample value
+
@@ -370,7 +370,7 @@

Alert mixins

The contextual module contains a couple of mixins for adding custom styles to alerts (color and style variants).


-
make-mark-alt-style
ParameterTypeDescriptionSample value
+
@@ -386,7 +386,7 @@
Mixin definitions
MixinDescription

- +
@@ -409,7 +409,7 @@

Sample usage

@include make-alert-alt-color ('urgent', #ffca28, #212121);

-
make-alert-alt-color
ParameterTypeDescriptionSample value
+
@@ -455,7 +455,7 @@

Tooltip mixins

The contextual module contains a couple of mixins for adding custom styles to tooltips (color and style variants).


-
make-alert-alt-style
ParameterTypeDescriptionSample value
+
@@ -471,7 +471,7 @@
Mixin definitions
MixinDescription

- +
@@ -494,7 +494,7 @@

Sample usage

@include make-tooltip-alt-color ('primary', #0277bd, #fafafa);

-
make-tooltip-alt-color
ParameterTypeDescriptionSample value
+
diff --git a/docs/customization/core.html b/docs/customization/core.html index d247257..e5aedd9 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -64,7 +64,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -95,7 +95,7 @@

Typography & headings

The core module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.


-
make-tooltip-alt-style
ParameterTypeDescriptionSample value
+
@@ -254,7 +254,7 @@

Common elements & fixes

The core module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.


-
Variables
VariableTypeDescriptionSample value
+
diff --git a/docs/customization/grid.html b/docs/customization/grid.html index 404a1bf..3a6fa29 100644 --- a/docs/customization/grid.html +++ b/docs/customization/grid.html @@ -67,7 +67,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -98,7 +98,7 @@

Classes & breakpoints

The grid module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.


-
Variables
VariableTypeDescriptionSample value
+
diff --git a/docs/customization/index.html b/docs/customization/index.html index fcb3840..f3f4f4c 100644 --- a/docs/customization/index.html +++ b/docs/customization/index.html @@ -63,7 +63,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html index fd24328..3b29a26 100644 --- a/docs/customization/input_control.html +++ b/docs/customization/input_control.html @@ -66,7 +66,7 @@ Close icon Generic border & shadow mixins Responsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -97,7 +97,7 @@

Forms & input

The input_control module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.


-
Variables
VariableTypeDescriptionSample value
+
@@ -258,7 +258,7 @@

Checkboxes & radio buttons

The input_control module's checkbox and radio button elements are based on custom rules and depend on the use of <label> elements and input groups to be stylized and properly displayed.


-
Variables
VariableTypeDescriptionSample value
+
@@ -319,7 +319,7 @@

Button & button groups

The input_control module's button elements are highly customizable, along with the button groups that can be used in combination with them.


-
Variables
VariableTypeDescriptionSample value
+
@@ -402,7 +402,7 @@

Button mixins

The input_control module contains a couple of mixins for adding custom styles to button elements (color and style variants).


-
Variables
VariableTypeDescriptionSample value
+
@@ -418,7 +418,7 @@
Mixin definitions
MixinDescription

- +
@@ -449,7 +449,7 @@

Sample usage

@include make-button-alt-color ('primary', #0277bd, 0.9, 1, #fafafa);

-
make-button-alt-color
ParameterTypeDescriptionSample value
+
diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html index d9ae544..15926ef 100644 --- a/docs/customization/navigation.html +++ b/docs/customization/navigation.html @@ -65,7 +65,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
make-button-alt-style
ParameterTypeDescriptionSample value
+
@@ -185,7 +185,7 @@

Navigation bar

The navigation module contains definitions for styling <nav> elements, along with the links they contain.


-
Variables
VariableTypeDescriptionSample value
+
@@ -237,19 +237,19 @@ - + - + - + - +
Variables
VariableTypeDescriptionSample value
$nav-include-sublink-barLogicalEnables the sidebar for <nav> elements' subcategories1trueEnables the sidebar for <nav> elements' subcategories1true
$nav-sublink-bar-left-positionPosition leftLeft position of the sidebar for <nav> elements' subcategories13pxLeft position of the sidebar for <nav> elements' subcategories13px
$nav-sublink-bar-widthBorder widthWidth of the sidebar for <nav> elements' subcategories11pxWidth of the sidebar for <nav> elements' subcategories11px
$nav-sublink-bar-colorColorColor of the sidebar for <nav> elements' subcategories1#263238Color of the sidebar for <nav> elements' subcategories1#263238

@@ -270,7 +270,7 @@

Footer

The navigation module contains various definitions for customizing the appearance of the <footer> element.


- +
diff --git a/docs/customization/progress.html b/docs/customization/progress.html index 0cb6147..a89c4f4 100644 --- a/docs/customization/progress.html +++ b/docs/customization/progress.html @@ -67,7 +67,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -98,7 +98,7 @@

Progress bar

The progress module's styling of <progress> elements is highly customizable.


-
Variables
VariableTypeDescriptionSample value
+
@@ -153,7 +153,7 @@

Donut spinner

The progress module's donut spinner uses a custom class and a few variables for custmization.


-
Variables
VariableTypeDescriptionSample value
+
@@ -192,7 +192,7 @@

Progress bar mixins

The progress module contains a couple of mixins for adding custom styles to <progress> elements (color and style variants), as well as a mixin for creating inline progress bars.


-
Variables
VariableTypeDescriptionSample value
+
@@ -212,7 +212,7 @@
Mixin definitions
MixinDescription

- +
@@ -235,7 +235,7 @@

Sample usage

@include make-progress-alt-color ('secondary', #e53935, #eeeeee);

-
make-progress-alt-color
ParameterTypeDescriptionSample value
+
@@ -274,7 +274,7 @@

Sample usage

@include make-progress-alt-style ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));

-
make-progress-alt-style
ParameterTypeDescriptionSample value
+
@@ -304,7 +304,7 @@

Donut spinner mixins

The progress module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).


-
make-progress-inline
ParameterTypeDescriptionSample value
+
@@ -320,7 +320,7 @@
Mixin definitions
MixinDescription

- +
@@ -343,7 +343,7 @@

Sample usage

@include make-spinner-donut-alt-color ('secondary', #ffebee, #c62828);

-
make-spinner-donut-alt-color
ParameterTypeDescriptionSample value
+
diff --git a/docs/customization/tab.html b/docs/customization/tab.html index 161b3b9..51ffec3 100644 --- a/docs/customization/tab.html +++ b/docs/customization/tab.html @@ -65,7 +65,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -96,7 +96,7 @@

Tab styling

The tab module contains definitions for tab styling, using custom classes and structures.


-
make-spinner-donut-alt-style
ParameterTypeDescriptionSample value
+
diff --git a/docs/customization/table.html b/docs/customization/table.html index e6b6c7d..d3b09dc 100644 --- a/docs/customization/table.html +++ b/docs/customization/table.html @@ -71,7 +71,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -102,7 +102,7 @@

Table styling

The table module contains definitions for tables and table variants.


-
Variables
VariableTypeDescriptionSample value
+
diff --git a/docs/customization/utility.html b/docs/customization/utility.html index ec67fbe..aa5fa63 100644 --- a/docs/customization/utility.html +++ b/docs/customization/utility.html @@ -65,7 +65,7 @@ Close iconGeneric border & shadow mixinsResponsive sizing & spacing mixins - Responsive visibility helper mixins + Responsive visibility helper mixins
@@ -97,7 +97,7 @@

Visibility helpers & legacy features

The utility module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.


-
Variables
VariableTypeDescriptionSample value
+
@@ -156,7 +156,7 @@

Breadcrumbs

The utility module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.


-
Variables
VariableTypeDescriptionSample value
+
@@ -207,7 +207,7 @@

Close icon

The utility module's close icon uses a custom class and a few variable to customize its appearance.


-
Variables
VariableTypeDescriptionSample value
+
@@ -242,7 +242,7 @@

Generic border & shadow mixins

The utility module contains a few mixins for creating generic borders, border styles and shadows.


-
Variables
VariableTypeDescriptionSample value
+
@@ -262,7 +262,7 @@
Mixin definitions
MixinDescription

- +
@@ -277,7 +277,7 @@

Sample usage

@include make-border-generic ('bordered');

-
make-border-generic
ParameterTypeDescriptionSample value
+
@@ -296,7 +296,7 @@

Sample usage

@include make-border-radial-style ('rounded', 2px);

-
make-border-radial-style
ParameterTypeDescriptionSample value
+
@@ -326,7 +326,7 @@

Responsive sizing & spacing mixins

The utility module contains a couple of mixins for creating responsive sizing and spacing classes.


-
make-box-shadow-generic
ParameterTypeDescriptionSample value
+
@@ -342,7 +342,7 @@
Mixin definitions
MixinDescription

- +
@@ -389,7 +389,7 @@

Sample usage

@include make-margin-responsive ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);

-
make-margin-responsive
ParameterTypeDescriptionSample value
+
@@ -447,7 +447,7 @@

Responsive visibility helper mixins

The utility module contains a couple of mixins for creating responsive visibility helpers.


-
make-padding-responsive
ParameterTypeDescriptionSample value
+
@@ -463,7 +463,7 @@
Mixin definitions
MixinDescription

- +
@@ -510,7 +510,7 @@

Sample usage

@include make-hidden-responsive ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');

-
make-hidden-responsive
ParameterTypeDescriptionSample value
+
diff --git a/docs/flavors.html b/docs/flavors.html index 8f857dc..0af3861 100644 --- a/docs/flavors.html +++ b/docs/flavors.html @@ -46,7 +46,6 @@

Author: Chalarangelo

Size: 7 KB

-

  • @@ -56,7 +55,6 @@

    Author: Chalarangelo

    Size: 7 KB

    -

  • @@ -66,7 +64,6 @@

    Author: Chalarangelo

    Size: 5 KB

    -

  • @@ -76,7 +73,6 @@

    Author: Angeliki Daskalakis

    Size: 7 KB (loads external fonts)

    -

  • @@ -86,7 +82,6 @@

    Author: tphecca

    Size: 7 KB

    -

  • diff --git a/docs/grid.html b/docs/grid.html index 322a4f6..f8375f5 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -125,7 +125,7 @@

    Sample code

    The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. Also, the example presented showcases the grid system's syntax for smaller screens, but you can do the same thing for any screen size.


    - +
    <div class="container">
    @@ -576,7 +576,7 @@
     				

    -
    +
    image

    Media object heading

    diff --git a/docs/index.html b/docs/index.html index 651a262..98f7f93 100644 --- a/docs/index.html +++ b/docs/index.html @@ -119,12 +119,12 @@

    Browser support

    -

     Edge12

    -

     Firefox28

    -

     Chrome26

    -

     Safari7.1

    -

     Opera17

    -

     Android4.4

    +
    edge

     Edge12

    +
    firefox

     Firefox28

    +
    chrome

     Chrome26

    +
    safari

     Safari7.1

    +
    opera

     Opera17

    +
    android

     Android4.4

     Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.


    @@ -168,8 +168,7 @@
    -
    -
    +
    diff --git a/docs/input_control.html b/docs/input_control.html index 7bce3cf..0c8b1b1 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -108,8 +108,8 @@
    Fluid form -
    -
    +
    +
    @@ -244,7 +244,7 @@

    Do: When creating aligned forms using the grid module's classes, labels might be off-center vertically compared to their inline counterparts. Use a simple styling for their parent .row element, if you want to adjust their vertical alignment.

    -
    <<form>
    +                  
    <form>
       <fieldset>
         <legend>Responsive form</legend>
         <div class="row input-group">
    @@ -273,13 +273,13 @@
                     

    - +


    -   
    -   
    -   
    +   
    +   
    +   


    diff --git a/docs/tab.html b/docs/tab.html index e5b881b..71c4733 100644 --- a/docs/tab.html +++ b/docs/tab.html @@ -214,18 +214,18 @@
    - +

    Section 1

    This is the first accordion section's content.

    - +

    Section 2

    This is the second accordion section's content.

    - +

    This is the first collapse section's content.

    - +

    This is the second collapse section's content.

    diff --git a/docs/table.html b/docs/table.html index 87aa350..b9634a0 100644 --- a/docs/table.html +++ b/docs/table.html @@ -311,7 +311,7 @@
    make-visually-hidden-responsive
    ParameterTypeDescriptionSample value
    - + @@ -324,7 +324,7 @@

    Sample code

    The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.


    - +
    <table class="preset">
    diff --git a/docs/templates.html b/docs/templates.html
    index 6a9587d..44c9c6e 100644
    --- a/docs/templates.html
    +++ b/docs/templates.html
    @@ -37,41 +37,41 @@
               

    Templates

    Getting started with mini.css is reasonably easy, however sometimes you need a couple of examples or templates to figure out the optimal way to design your website or app. To help you get started, we maintain a handful of templates that can help you quickstart your projects without having to read the full documentation.


      -
    • +
    • See the Pen Single Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Single column template

      The most basic layout template for a blog or website consists of a sticky header, one column used to display content and a footer at the bottom of the page. This template uses the grid system of mini.css, along with its navigational elements to provide a simple responsive website design, that you can use to display content across devices without the need for any changes in the layout.

      -

    • -
    • +
    • +
    • See the Pen Two Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Two-column template

      Another common layout template for blogs and websites consists of a sticky header, a footer and two columns for displaying content. Like in most templates, the grid system of mini.css is used to provide an easy way to create columns and make them responsive across multiple screen sizes and devices.

      -

    • -
    • +
    • +
    • See the Pen Three Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Three-column template

      Last but not least, the three-column website layout template is better used in websites with a lot of content. The grid system of mini.css provides an easy solution to handling lots of content on multiple screen sizes and devices, making the content responsive. Finally, as in most templates, navigational elements such as sticky headers and foooters are used to complete the template.

      -

    • -
    • +
    • +
    • See the Pen Card Showcase Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Card showcase template

      Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of mini.css, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.

      -

    • -
    • +
    • +
    • See the Pen Login Form Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Login form template

      Login forms are one of the most commonly used elements in any website design. Using the input_control and grid modules of mini.css, along with a couple of navigational elements and a couple of optional tricks, it's really easy to create a responsive login form with the required fields and buttons.

      -

    • -
    • +
    • +
    • See the Pen Android App Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Android app template

      Web application layout templates are pretty popular these days, especially ones that look and feel like native Android apps. Utilizing some clever CSS tricks, the grid module and navigational elements from mini.css, we created a pretty simple app template, complete with a call-to-action button and header bar, making it look quite similar to a native Android app and display properly across multiple devices.

      -

    • -
    • +
    • +
    • See the Pen Tabbed App Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

      Tabbed app template

      A single page application layout template can be built using many things, but tabbed web applications are one of our favorites. Utilizing the tab module of mini.css and some CSS tricks, we created a simple single page app template with three tabs, containing different content. The template will switch to a stacked view on smaller devices, although if you add more than three tabs, you will have to alter a couple of values to make sure that everything fits nicely on the screen.

      -

    • +

    diff --git a/docs/utility.html b/docs/utility.html index 1b3696d..9fdb5f6 100644 --- a/docs/utility.html +++ b/docs/utility.html @@ -128,7 +128,7 @@

    This is a paragraph with a piece of bordered text.


    -

      


    +

    image  image


    No shadow  Small shadow  Medium shadow  Large shadow


    diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 76b5b40..87218d5 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -1057,3 +1057,10 @@ - Added sidebar navigation for `\customization` pages, updated them all. - Added template for login forms. - Updated front-page a little bit, adding logos and changing the content around a little bit. + +# v2.1.4 Development Log + +## 20170503 + +- Started validating the HTML pages with the W3C Validator, making sure to fix as many issues as possible. +- Fixed 7 errors in `index.html`, 5 error in `flavors.html`, 2 errors in `core.html`, 2 errors in `grid.html`, 9 errors in `input_control.html`, 4 errors in `table.html`, 3 errors in `card.html`, 4 errors in `tab.html`, 7 errors in `templates.html`, 2 errors in `utilty.html`, all errors in the customization docs stemming from `width="100%"` in `table` elements, 5 errors in `customization\card.html`, 20 errors in `customization\navigation.html` (~100 errors in total).
    Star Wars Character Alignment Table
    LawfulNeutralChaotic
    LawfulNeutralChaotic
    GoodYodaLuke SkywalkerChewbacca
    NeutralC-3POBoba FettHan Solo
    BadDarth VaderEmperor PalpatineJabba the Hutt