Menu icon Foundation
CMS prefixing F6 styles

Hi i used to do this with F5 to avoid the styles conflicting with the styling used in my CMS system (Concrete5), however i'm having some issues with F6, the main one I have found so far is that it doesn't prefix the table styles, so I lose some aspects of the table styling.

Basically, I wrap the main site body in a div.ccm-page then I target all the F6 styles at this using the app.scss file:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
.ccm-page { @include foundation-grid; }
.ccm-page { @include foundation-typography; }
.ccm-page { @include foundation-button; }
.ccm-page { @include foundation-forms; }
.ccm-page { @include foundation-visibility-classes; }
.ccm-page { @include foundation-float-classes; }
.ccm-page { @include foundation-accordion; }
.ccm-page { @include foundation-accordion-menu; }
.ccm-page { @include foundation-badge; }
.ccm-page { @include foundation-breadcrumbs; }
.ccm-page { @include foundation-button-group; }
.ccm-page { @include foundation-callout; }
.ccm-page { @include foundation-close-button; }
.ccm-page { @include foundation-drilldown-menu; }
.ccm-page { @include foundation-dropdown; }
.ccm-page { @include foundation-dropdown-menu; }
.ccm-page { @include foundation-flex-video; }
.ccm-page { @include foundation-label; }
.ccm-page { @include foundation-media-object; }
.ccm-page { @include foundation-menu; }
.ccm-page { @include foundation-off-canvas; }
.ccm-page { @include foundation-orbit; }
.ccm-page { @include foundation-pagination; }
.ccm-page { @include foundation-progress-bar; }
.ccm-page { @include foundation-slider; }
.ccm-page { @include foundation-sticky; }
.ccm-page { @include foundation-reveal; }
.ccm-page { @include foundation-switch; }
.ccm-page { @include foundation-table; }
.ccm-page { @include foundation-tabs; }
.ccm-page { @include foundation-thumbnail; }
.ccm-page { @include foundation-title-bar; }
.ccm-page { @include foundation-tooltip; }
.ccm-page { @include foundation-top-bar; }

@include motion-ui-transitions;
@include motion-ui-animations; 

Any suggestions why the compiled table styles still look like this (i.e. without the .ccm-page prefix on the table child element):

.ccm-page table {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0; }
  thead,
  tbody,
  tfoot {
    border: 1px solid #fff5c6;
    background-color: #fffced; }

  caption {
    font-weight: bold;
    padding: 0.5rem 0.625rem 0.625rem; }

  thead,
  tfoot {
    background: #fff9d9;
    color: #0a0a0a; }
    thead tr,
    tfoot tr {
      background: transparent; }
    thead th,
    thead td,
    tfoot th,
    tfoot td {
      padding: 0.5rem 0.625rem 0.625rem;
      font-weight: bold;
      text-align: left; }

  tbody tr:nth-child(even) {
    background-color: #fff5c6; }
  tbody th,
  tbody td {
    padding: 0.5rem 0.625rem 0.625rem; }

tablecmsprefix

Hi i used to do this with F5 to avoid the styles conflicting with the styling used in my CMS system (Concrete5), however i'm having some issues with F6, the main one I have found so far is that it doesn't prefix the table styles, so I lose some aspects of the table styling.

Basically, I wrap the main site body in a div.ccm-page then I target all the F6 styles at this using the app.scss file:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
.ccm-page { @include foundation-grid; }
.ccm-page { @include foundation-typography; }
.ccm-page { @include foundation-button; }
.ccm-page { @include foundation-forms; }
.ccm-page { @include foundation-visibility-classes; }
.ccm-page { @include foundation-float-classes; }
.ccm-page { @include foundation-accordion; }
.ccm-page { @include foundation-accordion-menu; }
.ccm-page { @include foundation-badge; }
.ccm-page { @include foundation-breadcrumbs; }
.ccm-page { @include foundation-button-group; }
.ccm-page { @include foundation-callout; }
.ccm-page { @include foundation-close-button; }
.ccm-page { @include foundation-drilldown-menu; }
.ccm-page { @include foundation-dropdown; }
.ccm-page { @include foundation-dropdown-menu; }
.ccm-page { @include foundation-flex-video; }
.ccm-page { @include foundation-label; }
.ccm-page { @include foundation-media-object; }
.ccm-page { @include foundation-menu; }
.ccm-page { @include foundation-off-canvas; }
.ccm-page { @include foundation-orbit; }
.ccm-page { @include foundation-pagination; }
.ccm-page { @include foundation-progress-bar; }
.ccm-page { @include foundation-slider; }
.ccm-page { @include foundation-sticky; }
.ccm-page { @include foundation-reveal; }
.ccm-page { @include foundation-switch; }
.ccm-page { @include foundation-table; }
.ccm-page { @include foundation-tabs; }
.ccm-page { @include foundation-thumbnail; }
.ccm-page { @include foundation-title-bar; }
.ccm-page { @include foundation-tooltip; }
.ccm-page { @include foundation-top-bar; }

@include motion-ui-transitions;
@include motion-ui-animations; 

Any suggestions why the compiled table styles still look like this (i.e. without the .ccm-page prefix on the table child element):

.ccm-page table {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0; }
  thead,
  tbody,
  tfoot {
    border: 1px solid #fff5c6;
    background-color: #fffced; }

  caption {
    font-weight: bold;
    padding: 0.5rem 0.625rem 0.625rem; }

  thead,
  tfoot {
    background: #fff9d9;
    color: #0a0a0a; }
    thead tr,
    tfoot tr {
      background: transparent; }
    thead th,
    thead td,
    tfoot th,
    tfoot td {
      padding: 0.5rem 0.625rem 0.625rem;
      font-weight: bold;
      text-align: left; }

  tbody tr:nth-child(even) {
    background-color: #fff5c6; }
  tbody th,
  tbody td {
    padding: 0.5rem 0.625rem 0.625rem; }
Rafi Benkual over 3 years ago

That's an interesting solution! Does the CMS have a lot of similar names classes as Foundation?

Not sure why that would happen. Are you running the production flag BTW?

Ben Wills over 3 years ago

Hi Rafi

Not sure what you mean by 'production flag'?

There are some items that clash, mainly things like global radius', typography and core styling, but also because it uses a custom version of bootstrap, things like the pagination also conflict.

I'm trying to iron out which styles are the main issues, but its not top of my list at present.

Thanks

Ben