# SpectreCSS Snippets


[![GitHub issues](https://img.shields.io/github/issues/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge)](https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets/issues) [![GitHub forks](https://img.shields.io/github/forks/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge)](https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets/network) [![GitHub stars](https://img.shields.io/github/stars/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge)](https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets/stargazers) [![GitHub license](https://img.shields.io/github/license/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge)](https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets/blob/main/LICENSE) ![GitHub repo size](https://img.shields.io/github/repo-size/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge) ![Package Control](https://img.shields.io/packagecontrol/dt/SpectreCSS%20Snippets?style=for-the-badge) ![GitHub last commit](https://img.shields.io/github/last-commit/code-reaper08/SpectreCSS-Sublime-Snippets?style=for-the-badge) 



<div align="center">

**A handy SpectreCSS snippet package for SublimeText**

</div>

**Thanks for 40 downloads**

## SpectreCSS Snippets:

SpectreCSS is a minimalistic CSS-only framework, which caught my eye, when i was searching for a pure CSS framework, giving me more flexibility and customization ability. When doing SpectreCSS, I got an idea to accomodate all the possible abilities of SpectreCSS into a ST package. I think SpectreCSS by itself is easy and smart, this autocomplete package will add to its simplicity by providing ready to use snippets at your disposal.

## Installation:

### Package Control ![recommended](https://img.shields.io/badge/method-recommended-blue "Use this")

The easiest way to install the **SpectreCSS Snippets** is by using [Package Control](https://packagecontrol.io/). Installing it [is documented here](https://packagecontrol.io/installation).

- Open Package Control (or hit Ctrl+Shift+P or Cmd+Shift+P)
- Type _install_ and hit enter
- Type **SpectreCSS Snippets** and hit enter again

---

## Downloading the Archive

> Use this method if you don’t have Package Control or Git

- Open [https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets](https://github.com/code-reaper08/SpectreCSS-Sublime-Snippets) in your browser
- On the right hand side there is a _Download ZIP_ button – click it
- Go to _Preferences_ and _Browse packages…_ which opens the Packages directory
- Extract the archive inside the Packages directory

To find out where the Packages directory is, you can go to _Preferences_ and _Browse packages…_. This will open the directory in your file explorer.

## Functions at your disposal:

### CDN

| Trigger word | function  |
| ------------ | :-------: |
| sp-cdn       | CDN links |

### Typography functions

| Trigger word |    function     |
| ------------ | :-------------: |
| sp-bq        |   blockquote    |
| sp-dl        | descriptionlist |
| sp-h1        |   H1 heading    |
| sp-ol        |   orderedList   |
| sp-p         |    Paragraph    |
| sp-ul        |  UnoderedList   |

### Table functions

| Trigger word    |     function     |
| --------------- | :--------------: |
| sp-table        |  default table   |
| sp-table-scroll | Scrollable table |
| sp-table-s      |  Striped Table   |

### Semantic functions

| Trigger word |            function             |
| ------------ | :-----------------------------: |
| sp-abbr      |          abbreviation           |
| sp-b         |              Bold               |
| sp-cite      |            Citation             |
| sp-code      |            Type-Code            |
| sp-del       |          Deleted text           |
| sp-em        |          Emphasis text          |
| sp-mark      |        Highlighted text         |
| sp-ins       |          Inserted text          |
| sp-it        |             Italics             |
| sp-kbd       |           KeyBindings           |
| sp-rby       | Ruby(For East-Asian typography) |
| sp-out       |          Sample output          |
| sp-strike    |          Strikethrough          |
| sp-sub       |        Subscripted text         |
| sp-sup       |       Superscripted text        |
| sp-time      |              Time               |
| sp-uline     |         Underlined text         |
| sp-var       |            Variables            |

### Navbar function

| Trigger word |    function    |
| ------------ | :------------: |
| sp-nav       | Navbar default |

### Media functions

| Trigger word |      function      |
| ------------ | :----------------: |
| sp-cap       |     figcaption     |
| sp-i-con     | Auto cropped Image |
| sp-i-cov     |    Image covers    |
| sp-img       |  Responsive image  |
| sp-v         |  Responsive video  |

### Layout functions

| Trigger word | function  |
| ------------ | :-------: |
| sp-col-12    | Column 12 |
| sp-col-9     | Column 9  |
| sp-col-6     | Column 6  |
| sp-col-3     | Column 3  |

### Language functions

| Trigger word |             function             |
| ------------ | :------------------------------: |
| sp-chs       | chinese Simplified font support  |
| sp-cht       | chinese traditional font support |
| sp-j         |      japanese font support       |
| sp-ko        |       Korean font support        |

### Lable functions

| Trigger word |    function     |
| ------------ | :-------------: |
| sp-l         |  Label default  |
| sp-lerr      |   Label error   |
| sp-lp        |  Label primary  |
| sp-lsec      | Label secondary |
| sp-lsuc      |  Label success  |
| sp-lwarn     |  Label warning  |

### Form functions

| Trigger word |        function        |
| ------------ | :--------------------: |
| sp-fchk      |     Form checkbox      |
| sp-fcolor    |      Color input       |
| sp-fdate     |       Date input       |
| sp-femail    |      Email input       |
| sp-ffile     |       File input       |
| sp-fhor      | Horizontal sample form |
| sp-finp      |       Form input       |
| sp-fload     |     Input loading      |
| sp-fnum      |      Number input      |
| sp-fpass     |     Password input     |
| sp-fr        |      Radio input       |
| sp-fsearch   |      Search input      |
| sp-fs        |      Form select       |
| sp-fswitch   |      Form switch       |
| sp-ftel      |    Telephone input     |
| sp-ftxt      |       Text area        |
| sp-furl      |       URL input        |

### Component functions

| Trigger word |         function          |
| ------------ | :-----------------------: |
| sp-acc       |         accordian         |
| sp-ava       |          Avatar           |
| sp-bdg       |       Badge default       |
| sp-bdg-btn   |     Badge with button     |
| sp-bc        |        Breadcrumbs        |
| sp-card      |       Card default        |
| sp-chips     |       Chips default       |
| sp-empty     |        Empty state        |
| sp-mod       |         Modal box         |
| sp-nav       |            Nav            |
| sp-pg1       |   Pagination with pg_no   |
| sp-pg2       | Pagination prev-next type |
| sp-pnl       |           panel           |
| sp-bpop      |      Bottom popover       |
| sp-lpop      |       Left popover        |
| sp-rpop      |       Right popover       |
| sp-tpop      |        Top popover        |
| sp-sl-t      |   Slider with tool tip    |
| sp-sl        |      Slider default       |
| sp-stp       |           Steps           |
| sp-tile1     |        Tiles type1        |
| sp-ftile     |         File tile         |
| sp-tt        |          Tooltip          |

### Code function

| Trigger word |   function   |
| ------------ | :----------: |
| sp-codem     | Code snippet |

### Button functions

| Trigger word  |         function         |
| ------------- | :----------------------: |
| sp-btn-menu   |    Menu Action button    |
| sp-btn-menu-c | Menu Action Round button |
| sp-btn        |      Button default      |
| sp-btn-dis    |     Disabled button      |
| sp-btn-e      |    Error button (red)    |
| sp-btn-grp    |       Button group       |
| sp-btn-lnk    |       Link button        |
| sp-btn-load   |      Loading button      |
| sp-btn-p      |      Primary button      |
| sp-btn-s      |  Success button (green)  |

## License:

```
MIT License

Copyright (c) 2021 Vishwa.R

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```