0
Welcome Guest! Login
0 items Join Now

Responsive Data Table - Bourbon Mixin

Last Post
Search Topic
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Responsive Data Table - Bourbon Mixin

    Posted 7 years 1 month ago
    • Hi There,

      I'm trying to create a responsive data table using the example shown in this pen. I feel like I'm close but not getting the desired result when going to mobile. Table rows should shift to cards.
      codepen.io/pixelchar/pen/rfuqK

      The example uses bourbon mixin, which I think should be available by loading
      @import "dependencies";
      gantry.org/blog/gantry5-rc3-released

      The first question I have is how do I even test that I have bourbon loaded? The css colors are coming across but the breakpoint switch is not happening.

      I added the CSS example from the pen to my custom.css file with the addition of @import dependencies. When I look at the compiled css this is what I see in place of the code I put in custom.css.

      /* -------------------------  RESPONSIVE DATA TABLE------------------------------- */
/* line 2, media/gantry5/engines/nucleus/scss/nucleus/mixins/_nav.scss */
/* line 12, media/gantry5/engines/nucleus/scss/nucleus/mixins/_nav.scss */
/* line 2, media/gantry5/engines/nucleus/scss/nucleus/mixins/_utilities.scss */
/* line 9, media/gantry5/engines/nucleus/scss/nucleus/mixins/_utilities.scss */
/* line 755, templates/rt_requiem/custom/scss/custom.scss */
* + * {
  margin-top: 1.5em;
}
/* line 759, templates/rt_requiem/custom/scss/custom.scss */
body {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color: rgba(94, 93, 82, 1);
}
/* line 764, templates/rt_requiem/custom/scss/custom.scss */
a {
  color: rgba(29, 150, 178, 1);
}
/* line 767, templates/rt_requiem/custom/scss/custom.scss */
a:hover, a:focus {
  color: rgba(60, 193, 223, 1);
}
/* line 773, templates/rt_requiem/custom/scss/custom.scss */
.container {
  margin: 2em auto;
  max-width: 75em;
}
/* line 778, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}
/* line 782, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table th, .responsive-table td {
  padding: 0.75em;
}
/* line 787, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table th[scope="row"] {
  text-align: left;
}
/* line 791, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table td {
  text-align: center;
}
/* line 794, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table td[data-type="currency"] {
  text-align: right;
}
/* line 799, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table caption {
  padding: 1em 0;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}
/* line 806, templates/rt_requiem/custom/scss/custom.scss */
/* line 807, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table thead th {
  background-color: rgba(29, 150, 178, 1);
  border-right: 1px solid transparent;
  font-weight: normal;
  color: rgba(255, 255, 255, 1);
}
/* line 813, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table thead th:first-of-type {
  text-align: left;
}
/* line 817, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table thead th:last-of-type {
  border-color: rgba(218, 218, 213, 1);
}
/* line 823, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table tfoot {
  font-size: 0.9em;
  font-style: italic;
}
/* line 828, templates/rt_requiem/custom/scss/custom.scss */
/* line 829, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table tbody tr {
  border: 1px solid rgba(218, 218, 213, 1);
}
/* line 832, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table tbody tr:nth-of-type(even) {
  background-color: rgba(94, 93, 82, .1);
}
/* line 837, templates/rt_requiem/custom/scss/custom.scss */
.responsive-table tbody td {
  border-left: 1px solid rgba(218, 218, 213, 1);
}

      Also,
      to test this I simply created a new article and pasted the table from the pen to test. So I have an article with the table from the pen and also have the CSS example in my custom css.

      My guess is that Bourbon isn't getting loaded.

      I do see it in the file structure but not sure if it actually loaded by @import dependencies.

      Can anyone confirm this?

      Thanks
    • Last Edit: 7 years 1 month ago by Lownotes.
    #1339110
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Responsive Data Table - Bourbon Mixin

    Posted 7 years 1 month ago
    • You can do all that using Gantry 5 responsive grids (you might need a couple of classes of your own too) - see http://docs.gantry.org/gantry5/advanced/responsive-content .

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1339112
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Re: Responsive Data Table - Bourbon Mixin

    Posted 7 years 1 month ago
    • Thank you Mr. T but I don't want to create responsive grids. ( I know what you're thinking right now) ;)

      In my application I'm creating articles that are being generated from spreadsheets of data that are output as html tables pasted. I can easily convert my table to the requirements in this Pen, but shifting it all to the required structure for your example would be a different story. Doable but not what I'm looking for.

      I see bourbon listed in the file structure.

      How do I correctly load this?
      media/gantry5/engines/nucleus/scss/vendor/bourbon

      I've tried @import dependencies and @import bourbon, the later gives a 404
    #1339114
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Responsive Data Table - Bourbon Mixin

    Posted 7 years 1 month ago
    • Bourbon is already loaded by Gantry 5 as Gantry itself uses it - so no need to import anything else. You just import "dependencies" to get access to all the mixins.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1339116

Time to create page: 0.048 seconds