CSS Classes

In the list below, you will find many CSS classes that can be used to add specific LSX styling to your child theme or custom plugin.

Titles

1. title-lined

2. lsx-subheading

3. lsx-title

Columns or Groups:

1. lsx-shadow

List:

1. lsx-list

Buttons:

1. btn

2. btn btn-lg

3. btn cta-btn

4. btn border-btn

5. btn white-border-btn

6. btn cta-border-btn

7. btn tertiary-btn

8. btn tertiary-border-btn

9. btn secondary-btn

10. btn secondary-border-btn

Boostrap Button Sizes:

1. btn-lg

2. btn-sm

3. btn-xs

4. https://getbootstrap.com/docs/3.3/css/?#buttons-sizes

Boostrap Hide items:

1. hidden (hides in all sizes)

2. hidden-xs (hides in extra small)

3. hidden-sm (hides in small)

4. hidden-md (hides in medium)

5. hidden-lg (hides in large)

These classes can be combined, if you want for example a banner image that only shows on mobile, you can add the class 'hidden-md' and 'hidden-lg'

Bootstrap Grid:

1. https://getbootstrap.com/docs/3.3/css/#grid

Boostrap Alerts:

1. alert alert-success

2. alert alert-info

3. alert alert-warning

4. alert alert-danger

Full width classes:

1. lsx-full-width

2. lsx-full-width-alt

3. lsx-full-width-base

4. lsx-full-width-base-small

5. eg. https://to-demo.lsdev.biz/tour/7-day-luxury-botswana-educational/ - "Related Tours" section is full width.

For gutters:

1. 8.5rem

2. 4.25rem

3. 2.4rem

Bouncing arrow component:

1. Hero section of https://to-demo.lsdev.biz/)

2. • [banner_navigation extra-top='-100']

3. NOTE: adjust -100 to another number, arrow jumps to the section of the page.

Look through documentation:

1. https://lsdev.biz/lsx/documentation/

Use available mixins:

1. @include lsx-button-scaffolding();

2. @include lsx-button-colour();

Also variables:

1. $lsx-gap

2. eg. https://github.com/lightspeeddevelopment/sarie-bruid-child-theme/blob/master/assets/css/partials/_variables.scss

Structure CSS in child theme like so:

1. https://github.com/lightspeeddevelopment/sarie-bruid-child-theme/tree/master/assets

Look at sarie_color_palette_setup() function, helps a lot and speeds up colour settings:

1. https://github.com/lightspeeddevelopment/sarie-bruid-child-theme/blob/master/classes/class-frontend.php#L86

Good examples in Southern Destinations child theme:

1. https://github.com/lightspeeddevelopment/sd-lsx-child