Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mark Roffey 31 posts 184 karma points
    Apr 07, 2021 @ 09:54
    Mark Roffey
    0

    Using a css grid in a custom property editor

    Can anybody explain how I can add a grid layout into a custom property editor.

    I thought that bootstrap.min.3.0.1 was being used, but doesn't work. Do I need to inject my own bootstrap version into it, or can I hook into Umbraco version?

    <div class="container">
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
    </div> 
    
  • Søren Gregersen 441 posts 1884 karma points MVP 2x c-trib
    Apr 07, 2021 @ 21:25
    Søren Gregersen
    1

    Hi,

    I'm not really sure what flavour grid is used.

    The classes are .row for 940px wide rows, .row-fluid for 100% wide rows .span1 to .span12 to for columns spanning 1 to 12 rows. .offset1 to .offset12 for offsetting columns 1 to 12 rows.

    <div class="row-fluid">
        <div class="span3">3 column, no offset</div>
        <div class="span2 offset2">2 columns wide, 2 columns offset</div>
    </div>
    

    you can find the source here https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/lib/bootstrap/less/grid.less and mixins here https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/lib/bootstrap/less/mixins.less

    HTH :)

  • Mark Roffey 31 posts 184 karma points
    Apr 08, 2021 @ 08:30
    Mark Roffey
    0

    Yeah comparing it to the bootstrap repo, looks like they've removed any grid code from their impementation (both 3.10 and 2.0.1 are referenced in Umbraco).

    https://github.com/twbs/bootstrap/blob/v3.1.0/less/grid.less

    https://github.com/twbs/bootstrap/blob/v2.0.1/less/grid.less

Please Sign in or register to post replies

Write your reply to:

Draft