The JSFiddle layouts - can be used as a tooltip for a more convenient viewing of your creation on JSFiddle.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
layouts
CHANGELOG.md
LICENSE
README.md
style.css
style.css.map
style.min.css
style.min.css.map
style.scss

README.md

JSFiddle Recommended Layouts

license changelog layout

Hello! I want to introduce a small tool based on the jsfiddle project layouts - JSFiddle-layouts. The grid data can be used as a tool for users, for a more convenient viewing of your creation on JSFiddle. For ease of use, the grid is divided into 4 containers. Choose the container you need and paste it into your project on the site jsFiddle.net.

See on JSFiddle

Download

style.css style.min.css

Application

  1. insert in Resources - URL a code snippet or link on the JSFiddle website
  2. copy the desired fragment of the html grid and install it into your project:
    <!-- jsfiddle-layouts.css -->
    <div class="rec">
        <em>Recommended layout</em>
    </div>
    <!--/ jsfiddle-layouts.css -->

+ add

    <div class="layout">
        <label>
            <input name="editor_mode" type="radio" value="grid_4">
            <span class="gridMode grid_4"></span>
            Right results
        </label>
    </div>

= result

    <!-- jsfiddle-layouts.css -->
    <div class="rec">
        <em>Recommended layout</em>
        <div class="layout">
            <label>
                <input name="editor_mode" type="radio" value="grid_4">
                <span class="gridMode grid_4"></span>
                Right results
            </label>
        </div>
    </div>
    <!--/ jsfiddle-layouts.css -->

To change the layout, edit the grid_4 digit to 1, 2 or 3, and the span content to Classic, Columns, Bottom results.
layout

See on JSFiddle

Change the text color from black to white - add class invers

    <!-- jsfiddle-layouts.css -->
    <div class="rec invers">
      <em>Recommended layout</em>
      <div class="layout">
        <label>
            <input name="editor_mode" type="radio" value="grid_1">
            <span class="gridMode grid_1"></span>
            Classic
        </label>
      </div>
    </div>
    <!--/ jsfiddle-layouts.css -->

You can also copy all the code and specify the recommended fragment in it by adding the active class

    <!-- jsfiddle-layouts.css -->
    <div class="rec">
        <em>Recommended layout</em>
        <div class="layout">
          <label>
            <input name="editor_mode" type="radio" value="grid_1">
            <span class="gridMode active grid_1"></span>
            Classic
          </label>
        </div>
        <div class="layout">
          <label>
            <input name="editor_mode" type="radio" value="grid_2">
            <span class="gridMode grid_2"></span>
            Columns
          </label>
        </div>
        <div class="layout">
          <label>
            <input name="editor_mode" type="radio" value="grid_3">
            <span class="gridMode grid_3"></span>
            Bottom results
          </label>
        </div>
        <div class="layout">
          <label>
            <input name="editor_mode" type="radio" value="grid_4">
            <span class="gridMode grid_4"></span>
            Right results
          </label>
        </div>
        <small>JSFiddle-layouts — <a href="https://github.com/madeas/JSFiddle-layouts" title="JSFiddle Recommended Layouts" target="_blank">GitHub</a></small>
    </div>
    <!--/ jsfiddle-layouts.css -->

On example of an active class grid_1

See on JSFiddle

JSFiddle-Layouts

Русская документация »