Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Query format #1

Closed
taneltm opened this issue May 31, 2020 · 2 comments · Fixed by #2
Closed

Query format #1

taneltm opened this issue May 31, 2020 · 2 comments · Fixed by #2
Assignees
@Saunved
Labels
enhancement New feature or request

Comments

@taneltm
Copy link

taneltm commented May 31, 2020

Cool idea!

With some modifications to the query parameter format, it would be easy to write a SublimeText or VSCode plugin around it.

In most cases you might already have some HTML structure in place and it might not be using semantic HTML. You might want to specify the HTML structure and get only CSS as output.

Currently the container can be specified only as a class - can't specify it as body.
At the same time element selectors can't be specified as classes or IDs.
Also WebComponents/CustomElements can't be specified, because they require a dash in their name.

You might also want to apply the grid setup when a certain class is applied to the container element and that class might be toggled via JS when certain conditions are met.

Here's an example:

<body class="desktop-mode">
  <header>
  <div id="file-explorer">...<div>
  <image-viewer></image-viewer>
  <aside class="image-properties"><aside>
  <footer>
</body>

Example of a new query format:

# For desktop browsers
# File explorer, image viewer and image properties could be side-by-side
get-grid --container "body.desktop-mode" --query "header; #file-explorer, image-viewer, aside.image-properties; footer"

# For mobile browsers
# Not enough room, let's display the components below one another
get-grid --container "body.mobile-mode" --query "header; #file-explorer; image-viewer; aside.image-properties; footer"
  • Semicolon for next row
  • Comma for next column

Just throwing out some ideas!
@Saunved Saunved added the enhancement New feature or request label May 31, 2020
@Saunved
Copy link
Owner

Saunved commented May 31, 2020

Those are some great suggestions! I'll try to reply to them one by one here:

  1. Yes, it would be easy to create a plugin for VSCode or SublimeText using the query (once the query format is more stable, of course)
  2. The HTML structure idea is a valid use-case. Changing the separators for columns to accommodate for WebComponents and custom components will definitely be useful
  3. There is an (experimental) emmet flag that can be used to generate HTML using emmet - but it is not mapped to the generated CSS. The solution you have proposed is definitely better in this regard.

What we can do

  • We can use the new format you have suggested and shift to using "commas" for separating columns.
  • No need to change the row separators.
  • We can also add in code to detect HTML tags, classes, and IDs and generate CSS for them (instead of simply having classes like right now). It will definitely help with writing semantic HTML.

I will try to include these in the next release.
Looking forward to making the query much more stable and usable in the future :)

@Saunved Saunved self-assigned this May 31, 2020
@Saunved
Copy link
Owner

Saunved commented May 31, 2020

Hi,
I really liked your ideas and decided to implement them.
You can install the next version of the package to test it out:

npm i get-grid@next -g

Your above query will work now:

get-grid --container "body.desktop-mode" --query "header/ #file-explorer, image-viewer, aside.image-properties/ footer"

Only difference being that I have not changed the row separator. It is still "/".

The highlights and default margin/padding has also been removed in this version.
You can do:

get-grid --container "body.desktop-mode" -Hdq "header/ #file-explorer, image-viewer, aside.image-properties/ footer"

to get the highlights and defaults.
H flag indicates highlights (background color, naming)
d flag indicates defaults (default margin and padding)

I have used the emmet library to resolve the HTML, so semantic HTML can actually be written in get-grid and media queries will be much simpler, considering that the container classes can also be defined.

Feel free to open another issue to suggest more enhancements! :)

@Saunved Saunved closed this as completed May 31, 2020
@Saunved Saunved reopened this Jun 1, 2020
@Saunved Saunved linked a pull request Jun 1, 2020 that will close this issue
get-grid@2.0.0 #2
Merged
@Saunved Saunved closed this as completed in #2 Jun 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Saunved Saunved

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

get-grid@2.0.0 Saunved/get-grid
2 participants
@taneltm @Saunved