get-grid

    2.0.5 • Public • Published

    Install the tool from npm:

    npm i get-grid -g

    You should probably read this article on dev.to to find out more about get-grid.

    How to use get-grid

    Creating grids using rows and columns

    • Create a grid with 4 rows having 3 columns each:
    get-grid -c3 -r4
    • Create a grid with 3 rows and 3 columns, and specify a container:
    get-grid -c3 -r3 --container "article.gallery"

    Creating grids using the query

    The "query" is a way of representing a CSS grid on the CLI. Each row of the grid is separated using "/" (forward slash) and each column is separated using a "," (comma)

    Some examples to help you get started

    • Create a simple webpage layout:
    get-grid -dH --query "header/aside,.content,.content/footer" 

    You can read the above query as: "On the 1st row, create a header. On the 2nd row create one-third of an aside, and two thirds of .content. On the last row, create a footer."

    You can use "-d" and "-H" flags to add default margin/padding and add background, naming respectively.

    • You can use IDs, classes, web components, semantic HTML
    get-grid -dH --query "header/aside#left-aside,article,article,custom-widget/footer.social-media/footer.links"
    • Holy-grail using get-grid
    get-grid -dH --query "header/aside.left-aside,.content,.content,aside.right-aside/footer"
    • Another common layout (say, for mobile)
    get-grid -dH --container "div.mobile-site" --query "header/nav#menu/.content/footer"

    If a row contains only 1 column that spans the full width, there is no need to specify it more than once. However, if a row contains more than 1 column, all the columns must be explicitly specified. There is work in progress to take care of such repeats.

    You can read about more options by looking at the help

    get-grid --help

    There are options to output directly to console, to geto only the style or only the HTML, etc.


    Contributing / testing

    If you would like to contribute, you will have to understand how commander.js works since we are using that to create the CLI. I have tried documenting the functions in the app.js file. Feel free to optimize code, report bugs, or add new features.

    Specific areas where you can contribute:

    1. Improve the existing tests
    2. Create extensions/plugins for popular IDEs (to create CSS grids inside the IDE itself)
    3. Add more predefined templates to the tool

    To run the tool locally, you can simply run:

    npm i . -g

    If npm throws an error, change the package version number in the package.json file and retry.


    You can run tests using

    npm run test

    or

    npm run coverage

    to get a coverage report for the test.

    Install

    npm i get-grid

    DownloadsWeekly Downloads

    2

    Version

    2.0.5

    License

    ISC

    Unpacked Size

    30.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • saunved