I’m a real back-end programmer doing side projects in my spare time, such as a Chrome plugin called Anyshortcut that I’ve been working on for the last two years. Previous post introduction: /t/415551

From the beginning of the front-end knowledge, design knowledge, to a bit by bit to learn and adhere to the Anyshortcut official website to the point I am quite satisfied. A couple of days ago I saw the author of Bulma. CSS recommended Anyshortcut to the official website of Bulma. CSS.

If you are interested, you can check out my official website anyshortcut.com

Front-end technologies used:

  • bluma.css
  • Vue 2.x
  • Vue router

Design tools

  • Sketch
  • Photoshop (My girlfriend helped me design the logo, made some pictures and decided the main color, and most of the other ideas were my own design)
  • Ink knife prototype tool

Some pages that need to be logged in to see

Details about the shortcut keys bound to the user

After the user successfully subscribes

The user’s payment method, i.e. credit card details

User updates credit card

User’s coupon code page

Personal experience

  • The most important thing is to read more foreign SaaS websites, learn more, constantly improve their aesthetic, Dribbble, Behance and other websites for inspiration
  • First decide on the main color, choose at least two fonts, one suitable for headlines, one is plain text font, and then decide on several headings of the size and color. Like heading, title, subtitle, text, subtext, whatever
  • Choose Fonts, go directly to Google Fonts, try to choose sans Serif Fonts, Google Fonts are not blocked in China, feel free to use
  • Start by using some prototyping tools like the ink knife I’ve been using.
  • Be sure to use a mature CSS framework such as Bootstrap, Bulma. CSS, or spectre.css written by a Native. If not compatible with IE series, use Flexbox layout
  • Use SVG as much as possible
  • For UI controls that can’t be written, go to Github or Codepen and use them yourself in Codepen or Web Maker, and then integrate them into your own projects.

Why Bulma?

Pure.css was originally intended, but it felt like the project hadn’t been updated in years, so I gave it up. Then I changed to Bootstrap 4, which was still in beta at that time. The biggest problem was that it was not convenient for Customize. The official customize page was not released, and THEN I saw Bulma. CSS. So I switched from bootstrap to Bulma. I was later to know this excellent CSS framework.