To Install Tailwind:Open your project in Visual Studio Code. Go to Terminal > New Terminal Type npm install -D tailwindcss To Initialize your project, type Then create two folders inside your project. Name them build and src In the SRC folder, make a file called input.css In the BUILD folder, make a file called index.html In tailwind.config.js, edit […]
Category: Tools & Generators
Categories
Useful Tools 2020
Omatsuri: tons of useful utilities like CSS triangle generator, gradient generator, color shades generator, svg compressor, fake data generator, symbols collection, css cursors, javascript event keycode values, pokemon ipsum, etc. Tiny-Helpers.dev: massive collection of single purpose online tools for devs. CSS Shadows Generator: like using Illustrator, but for box-shadows Cubic-Bezier.com: for custom css animation or […]
This video does a great job explaining introductory regular expressions: Character Meaning Example * Match zero, one or more of the previous Ah* matches “Ahhhhh” or “A“ ? Match zero or one of the previous Ah? matches “Al” or “Ah“ + Match one or more of the previous Ah+ matches “Ah” or “Ahhh” but not […]
Categories
Making Emmet Work in PHP
If you’re in a PHP file, the Emmet shortcuts don’t initially work. To make them work, however, we just need to edit an Atom configuration file. Open the command palette: command-shift-p. Type in the following to search for the file: keymap.cson Press Return when that result shows up. After the commented out section, paste the […]
The idea behind build tools is to automate as much as possible the mundane and repetitive tasks in the production of software (such as a website or application). Such tasks can include things like: compiling SASS or LESS files into CSS on save compressing images reloading pages in browsers on save adding vendor prefixes to […]
Categories
ATOM Packages
A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality. Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so […]
Categories
Using the iPhone Simulator
To get to the iPhone simulator on your own Mac (sorry, Windows users), you need to install Xcode. If you are in a Langara or Emily Carr lab, it should be there already. To use the simulator, don’t open Xcode. Instead, navigate to it and then right-click (or control-click). That will bring up a contextual […]
A brief, but insightful, intro to color theory. Another discussion. Coolors.co An excellent and very intuitive app for generating color schemes, which you can save, download, share, or export in a number of formats including URL, PNG, or SCSS. Click the spacebar, generate a new theme. Lock colors you want to keep, click the spacebar, […]
This exercise is meant to help you familiarize yourself with the Chrome Developer Tools by examining and modifying the code that makes up any webpage. The Developer Tools allow us to do things like the following: see what html goes into any element in the page examine the nesting of html elements see what css […]
Categories
Online Color Pickers
Adobe Color CC. Create, save, download or browse palettes. Material Palette: Pick two colors. App generates palette. Coolors: Similar to Adobe Color. Coleure: Some useful comparison features.