Git Product home page Git Product logo

Comments (2)

walterdavis avatar walterdavis commented on June 17, 2024

Here's what I've been able to get going as a start. It's not perfect, in that you can't mix different column widths within the row and have the left margin stay constant. I'm not sure that's even possible given where Sscaffold starts things off in this construction. But in my example above, and in my likely use of this feature, I'm splatting N number of same-width children into the container row, so this should work for me.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Wrap</title>
  <link rel="stylesheet" href="https://scripty.walterdavisstudio.com/sscaffold.min.css">
  <style type="text/css">
    html { font-size: .5em; }
    .columns {
      background-color: #ffc;
      border: 1px solid #ccc;
      /*just for visibility*/
     }
     .row {
       border-bottom: 1px solid red; /*just for visibility*/
     }
    .wrap {
      flex-wrap: wrap;
    }
    .wrap .columns.one:nth-child(12n+1),
    .wrap .columns.two:nth-child(6n+1),
    .wrap .columns.three:nth-child(4n+1),
    .wrap .columns.four:nth-child(3n+1),
    .wrap .columns.six:nth-child(2n+1),
    .wrap .columns.twelve:nth-child(1n+1) {
      margin-left: 0;
    }
  </style>
</head>
<body>
  <main>
    <div class="row wrap">
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
      <div class="columns one">One</div>
    </div>
    <div class="row wrap">
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
      <div class="columns two">Two</div>
    </div>
    <div class="row wrap">
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
      <div class="columns three">Three</div>
    </div>
    <div class="row wrap">
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
      <div class="columns four">Four</div>
    </div>
    <div class="row wrap">
      <div class="columns six">Six</div>
      <div class="columns six">Six</div>
      <div class="columns six">Six</div>
    </div>
    <div class="row wrap">
      <div class="columns twelve">Twelve</div>
      <div class="columns twelve">Twelve</div>
    </div>
  </main>
</body>
</html>

Any thoughts about how I could improve this approach?

from sscaffold-css.

walterdavis avatar walterdavis commented on June 17, 2024

Without my additions:
image

Note how the overflow columns are just mashed into the row, not wrapped to the next line. Eventually this becomes unreadable.

With:
image

from sscaffold-css.

Related Issues (11)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.