• Stars
    star
    144
  • Rank 255,590 (Top 6 %)
  • Language
    Python
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Write CSS faster

vim-hyperstyle

Type faster by shorthand that will auto-expand as you type. Supports less, sass, scss, stylus, and plain CSS.

Status


Expansions

Expansions intelligently happen as you type. Unlike emmet, there are no hotkeys required—expansion will happen as you type whenever they make sense.

  • Properties will be auto-completed:
    m:margin:

  • You can put numeric next to property shortcuts:
    z1⏎z-index: 1;

  • Values will be auto-completed:
    float:lfloat: left

  • Default units will be added:
    border-radius: 4⏎border-radius: 4px;

  • Shortcuts for common statements are available:
    fl⏎float: left;

  • Semicolons are inserted automatically so you can write CSS in one go:
    dib m0a

  • Semicolons are omitted for .styl and .sass

  • ...and lots more goodies


Examples

Shortcut Expansion
dib display: inline-block;
m0 margin: 0;
m0a margin: 0 auto;
m-15 margin: -15px;
m:auto margin: auto;
fle 1 auto flex: 1 auto;
float left float: left;

View full reference →


Installation

Using vim-plug:

Plug 'rstacruz/vim-hyperstyle'

Python support is required. For Neovim:

:help nvim-python

For OSX/Homebrew: (info)

brew install macvim --with-cscope --with-lua --override-system-vim \
  --with-luajit --with-python3 --with-python

Options

  • To generate statements with no colons in Stylus, set let g:hyperstyle_use_colon=0.

Caveats

  • Stylus is assumed to be in indented syntax (no braces).

Thanks

vim-hyperstyle © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

More Repositories

1

nprogress

For slim progress bars like on YouTube, Medium, etc
JavaScript
25,552
star
2

cheatsheets

Cheatsheets for web development - devhints.io
SCSS
13,674
star
3

jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
JavaScript
7,328
star
4

rscss

Reasonable System for CSS Stylesheet Structure
3,894
star
5

flatdoc

Build sites fast from Markdown
CSS
2,679
star
6

webpack-tricks

Tips and tricks in using Webpack
2,359
star
7

sparkup

A parser for a condensed HTML format
Python
1,566
star
8

backbone-patterns

Common Backbone.js usage patterns.
760
star
9

remount

Mount React components to the DOM using custom elements
JavaScript
680
star
10

sinatra-assetpack

Package your assets transparently in Sinatra.
CSS
542
star
11

jsdom-global

Enable DOM in Node.js
JavaScript
472
star
12

hicat

Command-line syntax highlighter
JavaScript
405
star
13

kingraph

Plots family trees using JavaScript and Graphviz
JavaScript
390
star
14

vim-closer

Closes brackets
Vim Script
337
star
15

scour

Traverse objects and arrays with ease
JavaScript
308
star
16

mocha-jsdom

Simple jsdom integration with mocha
JavaScript
254
star
17

css-condense

[unsupported] A CSS compressor that shows no mercy
JavaScript
206
star
18

swipeshow

The unassuming touch-enabled JavaScript slideshow
JavaScript
191
star
19

rsjs

Reasonable System for JavaScript Structure
181
star
20

vim-coc-settings

My Vim settings for setting it up like an IDE
Vim Script
164
star
21

startup-name-generator

Let's name your silly startup
JavaScript
164
star
22

onmount

Safe, reliable, idempotent and testable behaviors for DOM nodes
JavaScript
156
star
23

psdinfo

Inspect PSD files from the command line
JavaScript
147
star
24

vim-from-scratch

Rico's guide for setting up Vim
144
star
25

js2coffee.py

JS to CoffeeScript compiler. [DEPRECATED]
Python
127
star
26

firefox-stealthfox

Firefox customization for stealth toolbars
CSS
122
star
27

mocha-clean

Clean up mocha stack traces
JavaScript
107
star
28

jquery-stuff

A collection of small jQuery trinkets
JavaScript
96
star
29

npm-pipeline-rails

Use npm as part of your Rails asset pipeline
Ruby
95
star
30

navstack

Manages multiple screens with mobile-friendly transitions
JavaScript
94
star
31

bootstrap-practices

List of practices when using Bootstrap in projects
90
star
32

details-polyfill

Polyfill for the HTML5 <details> element, no dependencies
JavaScript
89
star
33

dom101

DOM manipulation utilities
JavaScript
82
star
34

unorphan

Removes text orphans
JavaScript
81
star
35

expug

Pug templates for Elixir
Elixir
80
star
36

stylelint-rscss

Validate CSS with RSCSS conventions
JavaScript
74
star
37

feh-blur-wallpaper

Blur your desktop wallpaper when windows are open
Shell
73
star
38

pomo.js

Command-line timer, great for Pomodoros
JavaScript
73
star
39

sinatra-backbone

Neat Backbone.js integration with Sinatra.
Ruby
72
star
40

flowloop

A Pomodoro-like timer for hyper-productivity
JavaScript
71
star
41

vimfiles

My VIM config files.
Lua
63
star
42

bookmarks

My bookmarks
63
star
43

my_qmk_keymaps

Keymaps for keyboards
C
59
star
44

typish

Typewriter simulator
JavaScript
58
star
45

iconfonts

Fine-tuned icon fonts integration for Sass, Less and Stylus
CSS
54
star
46

pre.js

Efficient, resilient resource preloader for JS/CSS
JavaScript
54
star
47

tape-watch

Rerun tape tests when files change
JavaScript
53
star
48

tinkerbin

Tinkerbin.com
JavaScript
52
star
49

vim-fastunite

Search for files fast
Vim Script
48
star
50

collaborative-etiquette

A manifesto for happy Open Source projects
46
star
51

decca

Render interfaces using pure functions and virtual DOM
JavaScript
45
star
52

vim-opinion

My opinionated vim defaults
Vim Script
44
star
53

modern-development

Using agile methods to build quality web applications
CSS
43
star
54

til-2013

Old version of http://ricostacruz.com/til (2015-2018)
CSS
42
star
55

ion

[deprecated] Ruby/Redis search engine.
Ruby
41
star
56

timetip

Deliciously-minimal time tracker for the command-line
JavaScript
40
star
57

vim-xtract

Extract the selection into a new file
Vim Script
39
star
58

bump-cli

Command-line version incrementer
JavaScript
39
star
59

halla

Native Slack wrapper app without the bloat
JavaScript
38
star
60

newsreader-sample-layout

CSS
36
star
61

ento

Simple, stateful, observable objects in JavaScript
JavaScript
36
star
62

cron-scheduler

Runs jobs in periodic intervals
JavaScript
35
star
63

promise-conditional

Use if-then-else in promise chains
JavaScript
34
star
64

ractive-touch

Touch events for Ractive
JavaScript
33
star
65

jquery.unorphan

[deprecated] Obliterate text orphans.
JavaScript
33
star
66

git-update-ghpages

Simple tool to update GitHub pages
Shell
33
star
67

greader

[UNSUPPORTED] Google Reader API client for Ruby
Ruby
32
star
68

penpad

Design and document web UI components
TypeScript
32
star
69

typecat

TypeScript
31
star
70

react-meta-elements

Sets document title and meta tags using React elements or hooks
TypeScript
31
star
71

vim-ultisnips-css

[deprecated] Write CSS in VIM faster.
Ruby
31
star
72

tape-plus

Nested tape tests with before/after, async, and promise support
JavaScript
30
star
73

taskpaper.js

Taskpaper parser in JavaScript
JavaScript
28
star
74

frontend-starter-kit

Rico's opinionated Metalsmith frontend kit
JavaScript
28
star
75

homebrew-backup

Back up your Homebrew profile
Shell
28
star
76

fishfiles

my fish-shell config files
Shell
28
star
77

passwordgen.js

Password generator for the command line
JavaScript
28
star
78

reacco

Generate documentation from README files.
Ruby
26
star
79

ghub

Open this project in github
Shell
26
star
80

sass_icon_fonts

Sass 3.2 integration with modern icon fonts.
CSS
26
star
81

lidoc

[Deprecated] Literate-programming style documentation tool.
CoffeeScript
24
star
82

rspec-repeat

Repeats an RSpec example until it succeeds.
Ruby
24
star
83

lofi

VHS music machine from the 80's
JavaScript
24
star
84

sinatra-template

Ruby
24
star
85

fish-asdf

Fish shell integrations for asdf version manager
Shell
24
star
86

wiki

Stuff
23
star
87

arch-installer

Install UI for Arch Linux
Shell
22
star
88

slack-emoji-magic

Magic: the Gathering emojis
Makefile
21
star
89

node-hledger

Node.js API for hledger
JavaScript
21
star
90

ractive-promise-alt

Adaptor for Ractive.js to support promises
JavaScript
21
star
91

webpack-starter-kit

Baseline configuration for Webpack
JavaScript
21
star
92

vimbower

Use bower, git and pathogen to manage your vim setup
21
star
93

til-2020

Today I learned blog of @rstacruz
TypeScript
21
star
94

phoenix_expug

Expug integration for Phoenix
JavaScript
20
star
95

cssutils

Collection of Sass utility mixins and other goodies.
CSS
20
star
96

cdnjs-command

Command line helper for cdnjs.com
Ruby
20
star
97

responsive-modular-scale.css

Responsive typography using CSS variables
20
star
98

curlformat

CLI utility to clean up your "Copy as cURL" strings
JavaScript
19
star
99

ractive-loader

ractive template loader for webpack
JavaScript
19
star
100

ajaxapi

Minimal AJAX library for APIs. Supports promises
JavaScript
18
star