MesmericDigital

##Sass Functions Cheat Sheet

1. RGB Functions
2. HSL Functions
3. Opacity Functions
4. Other Color Functions
5. List Functions
6. Map Functions
7. Selector Functions
8. String Functions

MesmericDigital

/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

MesmericDigital

Instructions

CloudFlare is an awesome reverse cache proxy and CDN that provides DNS, free HTTPS (TLS) support, best-in-class performance settings (gzip, SDCH, HTTP/2, sane Cache-Control and E-Tag headers, etc.), minification, etc.

1. Make sure you have registered a domain name.
2. Sign up for CloudFlare and create an account for your domain.
3. In your domain registrar's admin panel, point the nameservers to CloudFlare's (refer to this awesome list of links for instructions for various registrars).
4. From the CloudFlare settings for that domain, enable HTTPS/SSL and set up a Page Rule to force HTTPS redirects. (If you want to get fancy, you can also enable automatic minification for text-based assets [HTML/CSS/JS/SVG/etc.], which is a pretty cool feature if you don't want already have a build step for minification.)
5. If you

MesmericDigital

Here are a list of headless browsers that I know about:

• [HtmlUnit][1] - Java. Custom browser engine. JavaScript support/DOM emulated. Open source.
• [Ghost][2] - Python only. WebKit-based. Full JavaScript support. Open source.
• [Twill][3] - Python/command line. Custom browser engine. No JavaScript. Open source.
• [PhantomJS][4] - Command line/all platforms. WebKit-based. Full JavaScript support. Open source.
• [Awesomium][5] - C++/.Net/all platforms. Chromium-based. Full JavaScript support. Commercial/free.
• [SimpleBrowser][6] - .Net 4/C#. Custom browser engine. No JavaScript support. Open source.
• [ZombieJS][7] - Node.js. Custom browser engine. JavaScript support/emulated DOM. Open source.
• [EnvJS][8] - JavaScript via Java/Rhino. Custom browser engine. JavaScript support/emulated DOM. Open source.

MesmericDigital

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

MesmericDigital

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.8)',

MesmericDigital

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

• SUIT CSS naming conventions + SUIT CSS design principles;
• PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
• Flexbox is awesome. No need for grid framework;
• Normalize.css, base styles and variables are solid foundation for all components;

MesmericDigital

// CSS Color Names
// Compiled by @bobspace.
//
// A javascript object containing all of the color names listed in the CSS Spec.
// This used to be a big array, but the hex values are useful too, so now it's an object.
// If you need the names as an array use Object.keys, but you already knew that!
// 
// The full list can be found here: https://www.w3schools.com/cssref/css_colors.asp
// Use it as you please, 'cuz you can't, like, own a color, man.

MesmericDigital

// --------------------------------------------------
// Flexbox SASS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;

MesmericDigital

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>