Skip to content

Instantly share code, notes, and snippets.

@Ondreas
Ondreas / data.json
Created May 9, 2024 14:09 — forked from aerrity/data.json
Sample user data
{
"results": [
{
"name": {
"title": "miss",
"first": "sara",
"last": "cavalcanti"
},
"picture": {
"large": "https://randomuser.me/api/portraits/women/8.jpg",
@Ondreas
Ondreas / css-ios-pwa-viewport.css
Created December 7, 2020 18:57 — forked from cvan/css-ios-pwa-viewport.css
CSS for env(safe-area-inset-top) for iOS "Add to Homescreen" / PWA; standalone styles
@supports (padding-top: constant(safe-area-inset-top)) {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
}
@media (display-mode: fullscreen) {
body {
padding: 0;
}
@Ondreas
Ondreas / prefixed-properties.md
Created October 31, 2020 15:16 — forked from p3t3r67x0/prefixed-properties.md
Be aware that every rendering engine has its own implementation of prefixed properties. As extensions are made part of the standard, the unprefixed identifier is then substituted.

Prefixed style properties

-ms-accelerator

The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-ms-accelerator: false | true
@Ondreas
Ondreas / prefixed-office-properties.md
Created October 31, 2020 15:15 — forked from p3t3r67x0/prefixed-office-properties.md
MS Office prefixed style properties can be used for older versions of MS Excel, MS PowerPoint or MS Word when you want to save a document, presentation, workbook, or worksheet as a web document, or even in older versions for MS Outlook.

MS Office prefixed style properties

mso-ansi-font-size

Note: Office only

mso-ansi-font-size: large | larger | <length> | medium | <percentage> | small | smaller | x-large | x-small | xx-large | xx-small
@Ondreas
Ondreas / pseudo_elements.md
Created October 31, 2020 11:17 — forked from p3t3r67x0/pseudo_elements.md
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

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] {
@Ondreas
Ondreas / form-reset.scss
Last active May 1, 2020 14:19 — forked from nathansmith/1_form-reset.scss
[Comprehensive Form Reset] #sass #reset #css
// `Default font for form elements.
//----------------------------------------------------------------------------------------------------
$form-font-stack: Arial, "Liberation Sans", FreeSans, sans-serif !default;
$form-font-size: 13px !default;
// `Form Element Reset.
//----------------------------------------------------------------------------------------------------
input::ms-clear,
@Ondreas
Ondreas / env_variables.md
Created May 15, 2019 15:10
What the hell is env variables and how to add to path
@Ondreas
Ondreas / SassMeister-input.scss
Created July 18, 2017 22:59 — forked from lunelson/SassMeister-input.scss
Fork of Tomeij's Animation mixin
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@mixin animation($args...) {
$name: unique-id(); // name for @keyframes
$args: join((), $args, 'space'); // conform args as SSV
animation: $name + ' ' + $args;
@keyframes #{$name} {

Useful Git commands

This is just stuff that I have put down that I find I use a lot of the time for my own reference.

Latest changes from repo to your machine

$ git pull
@Ondreas
Ondreas / SassMeister-input.scss
Created November 4, 2016 08:01
Precise control over responsive typography for Sass
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//