0
Welcome Guest! Login
0 items Join Now

SOLVED Fluid Grid Classes

Last Post
Search Topic

  • SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    #864732
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    #864766

  • Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    #864834
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    • actually take a look into

      templates/gantry/less/mixins/bootstrap/mixins.less

      (I haven tried all those mixing myself)


      .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

      .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
      }
      .spanX (0) {}

      .span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
      }

      .row-fluid {
      width: 100%;
      .clearfix();
      [class*="span"] {
      .input-block-level();
      float: left;
      margin-left: @fluidGridGutterWidth;
      *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
      }
      [class*="span"]:first-child {
      margin-left: 0;
      }

      // generate .spanX
      .spanX (@gridColumns);
      }

      }

      .input(@gridColumnWidth, @gridGutterWidth) {

      .spanX (@index) when (@index > 0) {
      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
      .spanX(@index - 1);
      }
      .spanX (0) {}

      .span(@columns) {
      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
      }

      input,
      textarea,
      .uneditable-input {
      margin-left: 0; // override margin-left from core grid system
      }

      // generate .spanX
      .spanX (@gridColumns);

      }

      }
    #864842

  • Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    #865061
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    • Pretty awesome that you can do recursive structures in Less/css :-)
    #865071

  • Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    • I think the minimum I can do is to describe the solution. Big thank you to Henning

      Problem Summary / What I needed to do
      Lets imagine you have 2 or more Div container and you want them to be side by side without any space between each other. I attached an image at the bottom for you to see why I need it. There is no solution in gantry. In a pure twitter bootstrap environment you can set the @gridGutterWidth to 0% but if you want to have both grid variants the following will help you.

      Solution

      1. Extending Twiiter bootstrap function for grid creation

      The default twitter bootstrap grid creation Is done by the file:
      /templates/ YOUR_TEMPLATE /less/mixins/bootstrap/mixins.less

      Please open it. In line 530 you will find the responsible function which starts with:
      // The Grid
#grid {

      Within this opening parenthesis, we add the following snippet:
      .fluidns () {
      
    .spanX (@index) when (@index > 0) {
      (~".span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}
 
    .span (@columns) {
      width: @columns * 1%;
      *width: @columns * 1%;
    }
 
    .row-fluid-ns {
      width: 100%;
      .clearfix();
      [class*="span"] {
        .input-block-level();
        float: left;
        margin-left: 0px;
        *margin-left: 0px;
      }
      [class*="span"]:first-child {
        margin-left: 0;
      }
      
      // generate .spanX and .offsetX
      @mwsFluidGrid: 100;
      .spanX (@mwsFluidGrid);
 
    }
 
  }


      2. Telling Gantry to run the function

      Lets open:
      /templates/ YOUR_TEMPLATE /less/gantry-core.less

      Add the following snippet anywhere within this file
      // Fluid Grid Without Spaces
#grid > .fluidns();

      Gantry will created the classes
      .span99{width:99%;}
      .span98{width:98%;}
      .span97{width:97%;}
      .span96{width:96%;}
      ... <= til 1%


      3. Take care of responsive design
      In the next step we have to specify how to handle the classes to make them work in a responsive design.

      Please open:
      /templates/ YOUR_TEMPLATE /less/mediaqueries.less

      Go to Line 48 where you see:
      @media (max-width: 767px) {

      Within this opening parenthesis, we add the following snippet:
      // Custom Span Width Without Space Between Each Other
    // Lets Set The Width To 100% For Devices With A Width Of Max 767px
    .row-fluid-ns [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

      This will set the width to 100% as soon as we have a device which has less than 767 pixel in width.


      4. How to use it in your content or anywhere else on your site

      The following is an example of a snippet:
      <div class="row-fluid-ns">
        <div class="span60">
            Hello - I`m a 60% Width
        </div>
        <div class="span40">
            Hello - I`m a 40% Width
        </div>
    </div>

      Replace the number within the class with your own or add additional div container with a spanX class.


      I hope it`s useful for you. This is an example why I needed this grid structure without space between the div container:

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 12 years 7 months ago by Eugen Stranz.
    • Member of the Virtuemart 2 Development Team.

      Take a look at my virtuemart theme which works perfectly with all rockettheme templates.
      http://www.developing-and-design.com/en/joomla/virtuemart-themes/features.html
    #865145
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    • I would suggest to add your stuff in a custom less file ... just convenience
    #865157

  • Re: SOLVED Fluid Grid Classes

    Posted 12 years 7 months ago
    #865179

Time to create page: 0.056 seconds