GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dzhavat → Css Flexbox Cheatsheet

dzhavat / Css Flexbox Cheatsheet

Licence: mit
VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.

Programming Languages

typescript
32286 projects

Labels

csshacktoberfestvscodevscode-extensioncheatsheetflexbox

Projects that are alternatives of or similar to Css Flexbox Cheatsheet

Vscode Stylelint
Official Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 141 (+62.07%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Doxdocgen
Generate doxygen documentation from source code in VS Code
Stars: ✭ 127 (+45.98%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (+93.1%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Vscode Emacs Mcx
Awesome Emacs Keymap - VSCode emacs keybinding with multi cursor support
Stars: ✭ 135 (+55.17%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Svn Scm
SVN support for VS Code
Stars: ✭ 172 (+97.7%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Vscode Csscomb
🔌 VS Code plugin for CSScomb — CSS coding style formatter.
Stars: ✭ 63 (-27.59%)
Mutual labels:  vscode, vscode-extension
Vscode Git Semantic Commit
💬 A Visual Studio Code extension which enables to commit simply by the semantic message conventions
Stars: ✭ 65 (-25.29%)
Mutual labels:  vscode, vscode-extension
Vscode Map Preview
VSCode map preview extension
Stars: ✭ 70 (-19.54%)
Mutual labels:  vscode, vscode-extension
Ngrok For Vscode
A VSCode extension to control ngrok
Stars: ✭ 75 (-13.79%)
Mutual labels:  vscode, vscode-extension
Vscode Bcdn
A Plugin for easy bootstrap markup and template
Stars: ✭ 58 (-33.33%)
Mutual labels:  hacktoberfest, vscode-extension
Azure Iot Developer Kit
A curated list of awesome Azure IoT Developer Kit projects and resources.
Stars: ✭ 73 (-16.09%)
Mutual labels:  vscode, vscode-extension
Vscode Catch2 Test Adapter
Catch2, Google Test and doctest Adapter for the VSCode
Stars: ✭ 74 (-14.94%)
Mutual labels:  vscode, vscode-extension
Vscode Sftp
Super fast sftp/ftp extension for VS Code
Stars: ✭ 1,121 (+1188.51%)
Mutual labels:  vscode, vscode-extension
Vscode Svgviewer
SVG Viewer for Visual Studio Code
Stars: ✭ 60 (-31.03%)
Mutual labels:  vscode, vscode-extension
Vscode Rsync
rsync extension for visual studio code
Stars: ✭ 68 (-21.84%)
Mutual labels:  vscode, vscode-extension
Vscode Org Mode
Emacs Org Mode for Visual Studio Code
Stars: ✭ 1,096 (+1159.77%)
Mutual labels:  vscode, vscode-extension
Cform Vscode
CloudFormation extension for Visual Studio Code
Stars: ✭ 73 (-16.09%)
Mutual labels:  vscode, vscode-extension
Vscode Standard
VS Code extension for JavaScript Standard Style (`standard`) with automatic fixing
Stars: ✭ 78 (-10.34%)
Mutual labels:  vscode, vscode-extension
Glassit Vsc
VS Code Extension to set window to transparent on Windows platform.
Stars: ✭ 77 (-11.49%)
Mutual labels:  vscode, vscode-extension
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (-8.05%)
Mutual labels:  vscode, vscode-extension
View All Similar Projects ➔

CSS Flexbox Cheatsheet (link)

VS Code extension that lets you open a flexbox cheatsheet directly in the editor.

Features

The cheatsheet can be opened in a few ways:

  • Press Ctrl + Shift + P (Win, Linux) / Cmd + Shift + P (Mac) and search for the Open CSS Flexbox Cheatsheet command.
  • Press Ctrl + K K (Win, Linux) / Cmd + K K (Mac) keyboard shortcut.
  • Hover any display: flex declaration and click the Open CSS Flexbox Cheatsheet link in the popup.

Besides the Open CSS Flexbox Cheatsheet link in the hover popup, there’s also an image shown for each flexbox property. This aims to make it easier to understand how each property works without opening the cheatsheet. This is available for the following file types:

  • CSS
  • Less
  • Sass
  • Scss

Most properties also have interactive playgrounds that are part of the cheatsheet.

Settings

After opening the cheatsheet, you can select the directionality to be used in the interactive playgrounds. This is especially useful for languages that write from right-to-left. Learn more.

Colors

The colors of the cheatsheet automatically adapt to the selected theme. The font is based on the user’s preferred font.

Support my work

If you find this extension useful and would like to support my work, you can buy me a cup of tea. Thank you!

Buy Me A Cup Of Tea

Demo

Using the Open CSS Flexbox Cheatsheet command

Demo using "Open CSS Flexbox Cheatsheet" the command

Clicking the Open CSS Flexbox Cheatsheet link on hover

Demo opening the cheatsheet by clicking the "Open CSS Flexbox Cheatsheet" command

Trying the interactive playgrounds

Trying the interactive playgrounds

Changing directionality in the interactive playgrounds

Demo changing directionality

Showing an image on hover

Demo showing an image on hover

Credit

The cheatsheet in this extension is based on the excellent Flexbox Cheatsheet by Darek Kay.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].