Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>TcSS SnippetsNew to Visual Studio Code? Get it now.
TcSS Snippets

TcSS Snippets

Thasin Mahmud

|
265 installs
| (0) | Free
Simple TcSS snippet generator.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

TcSS Snippets README

This extension will generate code for you minimizing your coding time & saving a huge amount of work. All you have to do is type in t-- + TAB and your up and running with a full template.

Gif

Clicking the down arrow ⬇️ will let you see all the different snippet commands in editor.

Gif2

Check out all the other commands given below. Hope this helps improve your TcSS journey.

Commands

Boilerplate:

Command Information
t-- Generates a boilerplate with latest TcSS CDN.
                                                                                                          

Navbars:

Command Information
t--nsn Generates a non sticky nav bar.
t--sn Generates a sticky nav bar.
                                                                                                          

Navbar Elements:

Command Information
t--n-txtLogo Generates a text logo.
t--n-imgLogo Generates a image logo.
t--n-noLogo Generates logo filer. (no logo)
t--n-searchFrm Generates a search form.
t--n-noSearchFrm Generates search form filer. (no search form)
                                                                                                          

Navbar Links Sticky:

Command Information
t--sn-mainLink-1 Generates a main link.
t--sn-mainLink-2 Generates 2 main links.
t--sn-mainLink-3 Generates 3 main links.
t--sn-mainLink-4 Generates 4 main links.
t--sn-mainLink-5 Generates 5 main links.
t--sn-subLinkGrp Generates a sub link group.
t--sn-subLink-1 Generates a sub link.
t--sn-subLink-2 Generates 2 sub links.
t--sn-subLink-3 Generates 3 sub links.
t--sn-subLink-4 Generates 4 sub links.
t--sn-subLink-5 Generates 5 sub links.
t--sn-exSubLinkGrp Generates a extra sub link group.
t--sn-exSubLink-1 Generates a extra sub link.
t--sn-exSubLink-2 Generates 2 extra sub links.
t--sn-exSubLink-3 Generates 3 extra sub links.
t--sn-exSubLink-4 Generates 4 extra sub links.
t--sn-exSubLink-5 Generates 5 extra sub links.
t--sn-ham Generates a hamburger menu button.
                                                                                                          

Navbar Links Non Sticky:

Command Information
t--nsn-mainLink-1 Generates a main link.
t--nsn-mainLink-2 Generates 2 main links.
t--nsn-mainLink-3 Generates 3 main links.
t--nsn-mainLink-4 Generates 4 main links.
t--nsn-mainLink-5 Generates 5 main links.
t--nsn-subLinkGrp Generates a sub link group.
t--nsn-subLink-1 Generates a sub link.
t--nsn-subLink-2 Generates 2 sub links.
t--nsn-subLink-3 Generates 3 sub links.
t--nsn-subLink-4 Generates 4 sub links.
t--nsn-subLink-5 Generates 5 sub links.
t--nsn-ham Generates a hamburger menu button.
                                                                                                          

Frames:

Command Information
t--fr1-all Generates all frame 1 elements.
t--fr2-left Generates left sided frame 2.
t--fr2-right Generates right sided frame 2.
                                                                                                          

Frame 01 Elements:

Command Information
t--fr1 Generates frame 01 template.
t--fr1-gf Generates gap filler.
t--fr1-ts Generates top/main section.
t--fr1-ms11 Generates mid section, ratio(1:1).
t--fr1-ms21 Generates mid section, ratio(2:1).
t--fr1-ms12 Generates mid section, ratio(1:2).
t--fr1-ms31 Generates mid section, ratio(3:1).
t--fr1-ms13 Generates mid section, ratio(1:3).
t--fr1-ms111 Generates mid section, ratio(1:1:1).
t--fr1-msr1 Generates mid section, round left.
t--fr1-ms1r Generates mid section, round right.
t--fr1-ms1s2 Generates mid section, right side 2 sections.
t--fr1-mss21 Generates mid section, left side 2 sections.
t--fr1-ms Generates mid section.
t--fr1-fs Generates footer section.
                                                                                                          

Frame 02 Elements:

Command Information
t--fr2-lsb Generates left navigation link with sub links.
t--fr2-lb Generates left navigation link.
t--fr2-rsb Generates right navigation link with sub links.
t--fr2-rb Generates right navigation link.
                                                                                                          

Form Elements:

Command Information
t--frm-inp Generates input element.
t--frm-inp15 Generates input element, type-15.
t--frm-radio Generates radio element.
t--frm-check Generates checkbox element.
t--frm-radio-f Generates radio family element.
t--frm-check-f Generates checkbox family element.
t--frm-selector Generates selector.
t--frm-selector4 Generates selector, type-4.
t--frm-file Generates file upload button.
t--frm-btns Generates all buttons.
                                                                                                          

Tables:

Command Information
t--tbl-b Generates basic table.
t--tbl-bBlue Generates basic blue table.
t--tbl-bBlack Generates basic black table.
t--tbl-bDark Generates basic dark table.
t--tbl-clBlue Generates classic blue table.
t--tbl-clBlack Generates classic black table.
t--tbl-caBlack Generates calendar black table.
t--tbl-caBlue Generates calendar blue table.
t--tbl-mBlack Generates modern black table.
t--tbl-mBlue Generates modern blue table.
t--tbl-stBlack Generates stacked black table.
t--tbl-stBlue Generates stacked blue table.
t--tbl-shBlack Generates shredded black table.
t--tbl-shBlue Generates shredded blue table.
t--tbl-zigzag Generates zigzag table.
                                                                                                          

Scrollers:

Command Information
t--scrlr-v Generates vertical scroller.
t--scrlr-h Generates horizontal scroller.
                                                                                                          

Patterns:

Command Information
t--ptrn-png Generates png pattern.
t--ptrn-box Generates box pattern.
t--ptrn-check Generates check board pattern.
t--ptrn-ruby Generates ruby pattern.
t--ptrn-clover Generates clover pattern.
t--ptrn-rainbow Generates rainbow pattern.
t--ptrn-target Generates target pattern.
t--ptrn-net Generates net pattern.
t--ptrn-shade Generates shade pattern.
                                                                                                          

Release Notes

  • Extension version is proportional to the framework version. [Meaning extension version 1.0.0 is responsible for framework version 1.0.0.]

1.0.0

Initial release of TcSS Snippets Extension.

Known Issues

No known issues so far.

Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft