DEV Community: Yogesh Devaliya

App Store Screenshot Generator: The Ultimate Guide for Better Downloads (2025)

Yogesh Devaliya — Mon, 21 Apr 2025 05:58:28 +0000

Did you know that only 2% of users click the "Read More" button to learn more about an app? Screenshots are the silent salespeople of your App Store and Play Store listing, and the right app store screenshot generator can transform your download rates. The proof is in the numbers—companies like FiftyThree saw a remarkable 33% increase in downloads after optimizing their app screenshots.

Screenshots play a vital role in App Store Optimization (ASO). Creating professional, eye-catching screenshots for different devices and markets can be challenging. This piece will guide you through the best screenshot tools and practices.

Nakxi helps you create app store / play store screenshots that turn impressions into downloads.

Define Your Screenshot Goals First

Let's set clear goals for your App Store or Play Store screenshots. App Store/Play Store users spend just 7 seconds on a product page [1]. You need to make every second count to showcase your app's value.

We focused on choosing what to highlight first in our set of templates. Studies show all but one of these users view all available screenshots [1]. Your first three or four images should highlight your app's core features and main selling points.

Your screenshots should balance common features with unique selling points that set you apart from competitors [2]. This balance is vital for standing out in busy app stores. The screenshots need to tell your brand's story cohesively instead of showing random features [1].

Technical requirements deserve early attention in your planning phase:

Different device types need different screenshots. Apple has specific size requirements for iPhone and iPad models [3].

There's another reason to define your presentation style early. You'll need to decide between showing your app in ground situations or focusing on the interface. Tools like Nakxi help create realistic mockups. Their pricing ranges from free versions with watermarks to **$9.99 monthly subscriptions.

Testing should be your top priority. Users judge apps quickly based on visuals rather than descriptions [4]. A/B tests are a great way to get insights about different screenshot designs. Apple and Google both provide native A/B testing tools to track which visuals drive more downloads [5].

Setting these goals before generating screenshots helps you save time and avoid mistakes [2]. You'll create visuals that boost downloads instead of just looking good.

Why Choose Nakxi as Your App Screenshot Maker

Your app store screenshot generator choice can make or break your conversion rates. Research shows that 70% of users decide to download based on visuals alone [6].

The first thing to think about is your budget. Free tools like AppScreens let you create simple screenshots. These tools work well but have limits on design choices and customization. Paid options give you better features and support, which leads to more professional results.

Nakxi lets you create one free project where you can choose an unlimited number of assets and start from your favorite ready-made templates.

How easy the tool is to use matters a lot.

*Canva's * easy-to-use interface works great for beginners.
Tools like Figma need more design skills, but give you better customization options.

Here's what to look for when comparing screenshot tools:

Template variety: Nakxi gives you 100+ templates to customize [7].
Device compatibility: The tool should support 35+ devices [8] on both iOS and Android.
Export options: Nakxi helps you resize for all store dimensions at once, saving you hours of work [9].

Nakxi stands out with its pre-built layouts that make creating templates quick and easy. Canva is a solid free option, especially for mobile templates, but it has limitations—it doesn’t support horizontal screen or template design, and you can’t share a frame across multiple artboards.

Best Practices to Generate Screenshots for App Store

Beautiful app store screenshots need the right tools and smart implementation of proven methods. The first three screenshots get maximum visibility according to research [10]. My strategy puts the most captivating visuals right at the start of the sequence.

Visual elements must stay consistent. My process with app store screenshot generators focuses on these key elements:

Device frames (they provide context)
Color palette (aligned with app branding)
Typography and text placement
Layout structure and orientation

Device frames play a vital role by helping users see your app in a real-world context [10]. In most screenshots, iPhone, Android, and iPad apps benefit from device frames. The first screenshot works better with social proof—this is the only exception [10].

The App Store lets you add up to 10 screenshots per listing [11]. Using more than 6 screenshots can boost conversion rates based on testing data [12]. Portrait screenshots deliver better results for most apps, while games typically use landscape orientation [13].

A/B testing helps optimize your screenshots—both Apple and Google provide built-in testing features [14]. Research shows that reducing text from 8–10 words to just 3–4 per screenshot substantially improves performance [10].

Google Play's limit of 8 screenshots differs from Apple's 10 [15]. Plan your visual story carefully when using screenshot generation tools for both platforms.

Conclusion

App screenshots are powerful conversion tools, yet many developers underestimate their effect on success. My experience with screenshot generators and market data analysis shows how strategic screenshot creation directly boosts download rates.

Creating successful app store screenshots needs three essential elements:

Clear goals
The right tools
Solid execution

Smart developers don't rush to create visuals. They begin with defined objectives and choose screenshot generators that match their specific needs. They also follow proven best practices during implementation.

Screenshot optimization requires continuous attention. Market trends change, user priorities evolve, and new devices emerge. Your conversion rates will stay strong when you test different approaches, analyze results, and adapt to changes. Your app's unique story should shine through visuals that connect with target users.

[Boost]

Yogesh Devaliya — Tue, 24 Dec 2024 16:12:10 +0000

Create stunning app screenshots, mockups, and templates with Nakxi.

Yogesh Devaliya ・ Dec 24

#appstore #playstore #mockup #javascript

Create stunning app screenshots, mockups, and templates with Nakxi.

Yogesh Devaliya — Tue, 24 Dec 2024 16:09:35 +0000

We’re excited to introduce Nakxi, our new web application designed to help you easily create eye-catching Play Store and App Store screenshots, templates, mockups, digital assets, social media posts, and more. Explore it now at https://www.nakxi.com!

Ready-Made Templates for Every Need

Check it out today and share your feedback with us!

CSS Gradient Generator Tool

Yogesh Devaliya — Sun, 01 May 2022 09:32:15 +0000

Published CSS Gradient Generator Tool on Design Drastic.
Do check it out and comment your thoughts/suggestions.

Link: CSS Gradient Generator Tool

Make your Linux Terminal Productive & Beautiful.

Yogesh Devaliya — Sat, 04 Sep 2021 06:06:41 +0000

In this article, we will configure the Linux terminal/shell, install the plugins/packages to boost up speed, increase productivity, and change the look and feel of your terminal.

First of all, check the active shell using this command.



echo $SHELL 
or 
echo $0

The below command will display all the available shell.



cat /etc/shells

Follow the steps to setup & configure your Terminal

Install ZSH
Install & Configure Oh-my-zsh
Install Themes
Install Plugins
Fonts & Colors
Setup Starship

The default terminal that comes with Linux(Ubuntu like OS) is Bash(Bourne Again Shell).
In this tutorial, we will first change the shell and configure it and then install/update the plugins & color preferences.

Install Zsh Shell ()

First, check whether zsh is installed or not using this command:



< /etc/shells grep zsh
outout: 
/bin/zsh
/usr/bin/zsh

Installation

For Debian(ubuntu like distros) ```

sudo apt update
sudo apt install zsh


- For Redhat

sudo yum install zsh


- For OpenSuse

zypper install zsh


- For Arc Linux or Manjaro

pacman -S zsh


- For Fedora

dnf install zsh

- For free bsd

pkg install zsh

- For macOS

brew install zsh

or you can download it from source **http://zsh.sourceforge.net/Arc/source.html**

Official Installation Doc: **https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH**

Check zsh version: ```zsh

 --version

Zsh has been installed successfully.

Now, make zsh your default terminal:



chsh -s $(which zsh)

If you want to switch back to the default bash or any other terminal, then run this command.



chsh -s /bin/bash or exec bash
or
chsh -s /bin/zsh or exec zsh

then restart the terminal.

Install oh my zsh

Oh-my-zsh is an open-source framework for managing Zsh configuration.

Install via Curl



sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install via wget



sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

Manual Installation



curl -Lo install.sh https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh

Check the variable of the .zshrc file to confirm that zsh is activated.

Open zshrc file: > sudo nano ~/.zshrc
export ZSH="$HOME/.oh-my-zsh"

Make sure the above variable is set inside the .zshrc file. If it's not there then edit the file and add the above line.

To apply all the edited changes in the bashrc/zshrc file you must have to run source ~/.bashrc or ```source

~/.zshrc

Next, we will install the omz plugins and themes.

Themes

The Theme(ZSH_THEME) is a variable of the zshrc(omz) file. To add or update the theme, you've to first install(if theme is not installed) the theme and then update the theme(ZSH_THEME) variable.

The oh-my-zsh comes with predefined themes. You can set them by setting the ZSH_THEME variable.

The default and popular themes of omzs are robbyrussell and agnoster that come with omz installation.

Set the robbyrussell theme



ZSH_THEME="robbyrussell"

Agnoster theme



ZSH_THEME="agnoster"

There are many more theme options available with Oh-my-zsh.
For example Pure, Avit, Apple, Bira, etc...

Check the full list of Oh-My-Zsh Themes: https://github.com/ohmyzsh/ohmyzsh/wiki/Themes

Apart from that, you can install external themes as well. Some of the popular themes are Powerlevel10k, Powerlevel9k, Spaceship, Bullet-Train, etc...

Powerlevel10k

Powerlvel10k is a fully customizable and more advanced theme of zsh.

Installation

For Oh my zsh



git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

set the theme in ZSH_THME variable in the .zshrc file.



ZSH_THEME="powerlevel10k/powerlevel10k"

Configure Powerlevel10k

Type command: p10 configure to start Powerlevel10k configuration.

Or else you can edit the configuration file: ~/.p10k.zsh

For more details: https://github.com/romkatv/powerlevel10k

Spaceship

Another powerful theme is Spaceship. It comes with many features and an extremely customizable zsh prompt theme.

Installation

For Oh My Zsh



git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

Symlink spaceship. zsh-theme to your oh-my-zsh custom themes directory:



ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

Then set the ZSH_THEME variable in .zshrc



ZSH_THEME="spaceship"

For more details: https://denysdovhan.com/spaceship-prompt/

Plugins

The Plugins is an set of variable(array) that contains a list of activated plugin values in the zshrc(omz) file. To add or update the plugins, you've to first install(if not installed) the plugin and then update the plugins variable.


 .zshrc
plugins=(git node autojump ... )

The values of the plugins variable should be separated by space, not by a comma.
Now, install some of the useful plugins.
Git
Just add the word git in plugins var.

plugins=(git ...)


**zsh-autosuggestions**

For Oh-My-Zsh

First, clone the directory using git

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

and activate the plugin

plugins=(... zsh-autosuggestions)

Or Manual Installation

git clone https://github.com/zsh-users/zsh-autosuggestions ~/.zsh/zsh-autosuggestions

and add the following line to ~/.zshrc

source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh

and restart the terminal.

**zsh-syntax-highlighting**
**Installation**

For Zsh

Clone the git repo

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

Then enable the plugin

source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh


For Oh-My-Zsh

Clone the repo

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

And add the zsh-syntax-highlighting value in plugins variable

plugins=(... zsh-syntax-highlighting)

And restart the terminal.

**Before**

![](https://designdrastic.com/images/articles/terminal-setup/hl3.png)

![](https://designdrastic.com/images/articles/terminal-setup/hl2.png)

**After**

![](https://designdrastic.com/images/articles/terminal-setup/hl4.png)

![](https://designdrastic.com/images/articles/terminal-setup/hl5.png)

**z or Zsh-z**

Z allows you to jump quickly to the directory that you visited most in the past. Z will remember the path you've entered frequently and helped you to jump around them with few keystrokes. 

Z uses regular expression.

To enable the z plugin, assing z to your plugin variable.

plugins=(... z )

![Plugin:Z](https://designdrastic.com/images/articles/terminal-setup/z.gif)

> For more oh-my-zsh plugins: **https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins**

### **Terminal Preferences**
Install the **Patched Fonts** for the terminal. The patched font will be used to display characters, glyph, icons, arrow effects, emojis. 

**Install Powerline fonts**

sudo apt-get install fonts-powerline

For more options: **https://github.com/powerline/fonts#quick-installation**

**Download and Install the Powerline/Nerd font**
* [Source Code Pro](https://github.com/powerline/fonts/tree/master/SourceCodePro)
* [Fura/Fira Mono Powerline](https://github.com/powerline/fonts/tree/master/FiraMono)
* [Hack](https://github.com/powerline/fonts/tree/master/Hack)
* [Other Poweline Fonts](https://github.com/powerline/fonts)
* [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts)

Then select the preferable front in custom font inside the text tab in Preferences.
[](https://designdrastic.com/images/articles/terminal-setup/preference-text.png)

**Change the colors(color scheme) of the Terminal**
Open the preferences and select the second tab=>  Colors. 

Available Buil-in Schemes are:
[](https://designdrastic.com/images/articles/terminal-setup/built-in-schemes.png)
Tango & Solarized are recommended.

You can also customize the colors according to your need in the custom tab.

Next, you can make the terminal productive and more customizable with **Starship**

### **Starship**
**Install and configure Starship**
The Starship is "The minimal, blazing-fast, and infinitely customizable prompt for any shell!"

**Installation**
Using curl

curl -fsSL https://starship.rs/install.sh | bash


With Brew

brew install starship


With Scoop

scoop install starship


After installation, add the below line to initialize the **Starship**

For Bash(~/.bashrc)

eval "$(starship init bash)"


For Zsh(~/.zshrc)

eval "$(starship init zsh)"


For Fish(~/.config/fish/config.fish)

starship init fish | source


**Configuration**
Starship uses a TOML file for configuration. 

TOML Doc: **https://github.com/toml-lang/toml**

To get started configuring starship, create the config file starship.toml inside .config directory. 

**starship.toml**

add_newline = false
symbol = "➜"
[language]
symbol='*'
.
.
.

For prompt configuration visit: **https://starship.rs/config/#prompt**
![](https://raw.githubusercontent.com/starship/starship/master/media/demo.gif)

### **Tmux/Tilix**
tmux is a program that runs in a terminal and allows multiple other terminal programs to be run inside it.

Tilix is similar to Tmux. It is a tiling terminal emulator. Tmux/Tilix can split your emulator window into multiple terminal panes. 
![](/images/articles/terminal-setup/tilix.png)

I hope you guys find the article helpful.

Setup VS Code for Designer and Front-end Developers

Yogesh Devaliya — Mon, 30 Aug 2021 04:11:27 +0000

VS Code is one of the most popular, free, and favorite code editors among all the others available in the market.

VS Code has a vast set of features and customization options and tons of extensions.

I will present to you my code editor configuration and settings for the work.

In this article, I will share with you how to customize the VS Code for Front-end developers and designers.

Steps:

Installation
Set Color theme, Font and File Icon Theme
Tools & Languages(Lang Highlighter and Autocomplete)
Install extensions/plugins
Keybindings & Shortcuts

Installation

Download and install VS Code from Official website: https://code.visualstudio.com/Download

The default VS Code looks simple, neat, and clean.

How to open a project in VS Code.

Open the terminal/cmd
Navigate to the project directory
Run command code .

Next, we'll set up the color theme, font, and theme icons.

🎨 Color Theme

One of my all-time favorite color themes is Atom's One Dark Pro.

Installation:

Press Ctrl + P and type the command ext install zhuangtongfa.Material-theme
Or press the Ctrl + Shift + X and search for the color theme One Dark Pro

My VS Code One Dark Pro theme Screenshot ==>

Looks great, isn't it?

The other color themes which I liked…

Material Theme Palenight
Dracula Official Dracula

Material Theme(Palenight)

Dracula Theme

🚀 Fonts

The most important thing after the theme is font. The proper selection of font will give you a more decent, elegant & modern look and feel.

Use the Programming Monospaced fonts(which supports ligatures) for development purposes.

Currently, I am using Fira Code which also supports the ligatures.

Fira Code Installation

Download the font family from Google Fonts: https://fonts.google.com/specimen/Fira+Code extract and install it.

Now, set the Fira Code as VS Code font.

Open the settings(Ctrl + ,) and in the search section enter Editor: Font Family and add the first value as ‘Fira Code’ inside the family list.

You can also set the font family in the settings.json

"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",

Next, we will enable ligatures.

ligatures supports will convert the fonts into symbols

Default fonts

Default Symbols

Font ligatures

ligatures supported symbols

To enable ligatures you need to enable the settings from the settings.json file.

Open the settings(ctrl + p) & search settings.json and open the file.

Then add this line

"editor.fontLigatures": true,

Here is my settings.json file

{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}

The other monospace programming fonts you can use that supports the ligatures are…

🎠 File Icons

File icons are great. Using file icons to identify & differentiate between the file and folders and file types.

Currently, I am using the Material Theme Icons

To install the File icon(material theme icons)

Press the ctrl + p and type command ext install Equinusocio.vsc-material-theme-icons
Also, you can search and install the File icon theme from extensions.

Other file icon themes are…

Tools and Languages

VSCode has varieties of tools, compilers, highlighting, formatters, etc…

We will install some of them to enhance the development speed and performance.

SASS (Ctl + P & type command ext install Syler.sass-indented) Useful for SASS syntax highlighting, Autocomplete & formatter.
Live Sass Compiler Compile Sass or Scss to CSS in realtime with a live browser reload.

language-stylus Language Highlighting for Stylus, Color preview, Syntax highlighting Symbols provider Completion for selectors, properties, values, variables, functions, etc.

ES7 React/Redux/GraphQL/React-Native snippets ES7 syntax and JS/React Snippets
VUE Syntax Highlighting for Vue js
Vutur Vue tooling for VS Code

Install Extensions/Plugins

We will install the most useful and popular plugins alphabetically.

Auto Rename Tag (3M+ downloads*)* Auto rename paired HTML/XML tag Commnd: ext install formulahendry.auto-rename-tag

Auto Close Tag(3M+ downloads*)* Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text command: ext install formulahendry.auto-close-tag

AutoFileName Autocomplete file names command: ext install JerryHong.autofilename

Beautify(5M+ downloads*)* Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. command: ext install HookyQR.beautify
Bracket Pair Colorizer(3.4M+ downloads*)* Colorize the matching brackets. command: ext install CoenraadS.bracket-pair-colorizer

Bracket Pair Colorizer

Bookmarks (1M+ downloads*)* This extension is used to mark the point on the file and jump to them. command: ext install alefragnani.Bookmarks

Color Highlight (1.1M+ downloads*)* Highlight colors in VSCode command: ext install naumovs.color-highlight

Color Info (320k+ downloads*)* Provides quick information about CSS colors command: ext install bierner.color-info
CSS Peek (1M+ downloads*)* Allow peeking to CSS ID and class strings as definitions from Html files to respective CSS. Allows peek and goto definition. Hover over the class name to display the CSS properties. command: ext install pranaygp.vscode-css-peek

DotENV(1.1M+ downloads*)* Syntax for .env files command: ext install mikestead.dotenv
ESLint (10M+ downloads*)* Integrates ESLint JavaScript into VS Code. command: ext install dbaeumer.vscode-eslint
HTML CSS Support
- CSS support for HTML command: ext install ecmel.vscode-html-css
htmltagwrap Wraps selected code with HTML tags command: ext install bradgashler.htmltagwrap

HTML snippets HTML5 tag snippets command: ext install abusaidm.html-snippets
Highlight Matching Tag Highlight opening and closing brackets. command: ext install vincaslt.highlight-matching-tag

IntelliSense for CSS class names in HTML CSS classname auto completion command: ext install Zignd.html-css-class-completion

Import Cost Display import/require file size in the editor itself. command: ext install wix.vscode-import-cost

indent-rainbow Colorize indentation command: ext install oderwat.indent-rainbow

Image Preview Show image preview in CSS file on hover command: ext install kisstkondoros.vscode-gutter-preview
JavaScript (ES6) code snippets (3.8M+ downloads) Code snippets for ES6 command: ext install xabikos.JavaScriptSnippets
Live Server Launch local dev server files in browser with live reload & update the content without manual refreshing command: ext install ritwickdey.LiveServer

Prettier - Code formatter(7.7M+ downloads*)* Code formatter command: ext install esbenp.prettier-vscode
Peacock Customize workspace color command: ext install johnpapa.vscode-peacock

Path Intellisense(3.3M+ downloads*)* File name Autocompletes command: ext install christian-kohler.path-intellisense

Settings Sync Sync settings, plugins, keybindings, themes, icons, etc… using Github gist. command: ext install Shan.code-settings-sync
Turbo Console Log Write meaningful log messages easily and fast. command: ext install ChakrounAnas.turbo-console-log

TabNine All language auto compiler command: ext install TabNine.tabnine-vscode

You can also configure the settings text file.

🌈 Myy configuration

settings.json

{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.editor.highlightModifiedTabs": true,
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}

**** More frequent and useful shortcuts(keybinding)**

Key binding / Shortcuts	Function / Actions
Alt + Z	Toggle Word Wrap
Ctrl + D	Select the Word and matched words
Ctrl + ,	Open Settings
Ctrl + `	Open Terminal
Ctrl + P	Open file explorer/Execute commands
Ctrl + Shift + P	Command Palette
Ctrl + Shift + (Left/Right) Arrow	Select the Word
Alt + Arrow(up/down)	Move the line to up or bottom
Alt + Shift + (Up/Down) Arrow	Copy the lines for multiple edits.
Ctrl + /	To comment uncomment
Ctrl + N	New tab
Ctrl + F	Find
Ctrl + Shift + T	Reopen the previous tab
Ctrl + Tab & Ctrl + Shift + Tab	Switch the tab

VSCode Keyboard shortcuts for Linux ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

VSCode Keyboard shortcuts for Windows ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VSCode Keyboard shortcuts for MacOS ==> https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Design drastic post => https://designdrastic.com/article/setup-vs-code-for-designer-and-front-end-developers

Thanks for reading. I hope this will help you to improve the performance, speed, and productivity of your editor.

Create a dynamic grid/layout using CSS variables.

Yogesh Devaliya — Wed, 18 Aug 2021 15:04:37 +0000

You can create a layout in many ways. Using Grid Or Flex to create a layout is more advanced and customizable.

If your layout is dynamic and complex then you can use this approach to design your layout instead of creating the custom classes.

Traditional approach:
Let's assume that you want to create a layout like a cover image.
For that you have to create a custom class like this:

HTML

<div class="custom-grid-1"></div>
<div class="custom-grid-2"></div>

CSS

.custom-grid-1 {
   display: grid;
   grid-template-columns: 1fr 1fr 2fr;
   grid-template-rows: auto;
}
.custom-grid-2 {
   display: grid;
   grid-template-columns: 3fr, 1fr;
   grid-template-rows: auto;
}

Now, instead of creating multiple classes for the layout, we will create a single grid class that will have a dynamic CSS variables to set the fractional unit(fr) and other properties.

In HTML, we will set the variable values in the style attribute.

HTML

<div class="grid" style="--col: 1fr 1fr 2fr; --row: auto;"></div>
<div class="grid" style="--col: 3fr 1fr; --row:auto;"></div>

Then we will create a .grid class in CSS.

CSS

.grid {
  display: grid;
  grid-template-columns: var(--col);
  grid-template-rows: var(--row);
}

By using this approach you can create any dynamic & complex grid/layout without creating a multiple classes.

Same way you can assign any properties in the grid class using CSS variables.

Share your thoughts in comment section.