Skip to content

Instantly share code, notes, and snippets.

View toomuchdesign's full-sized avatar

Andrea Carraro toomuchdesign

View GitHub Profile
@toomuchdesign
toomuchdesign / cloudSettings
Last active September 25, 2020 10:32
VSC settings
{"lastUpload":"2020-09-25T10:32:00.268Z","extensionVersion":"v3.4.3"}
/*
* Elements background overlays
*
* Usage:
* <div class="an-element u-bgOverlay"></div>
* <div class="an-element u-bgOverlay u-bgOverlay--dotted"></div>
*/
:root {
--overlayOpacity: 0.5;
--overlayColor: rgba(0, 0, 0, var(--overlayOpacity));
@toomuchdesign
toomuchdesign / custom-bootstrap-3-grid.sass
Created May 1, 2016 11:11
Add a custom breakpoint to Bootstrap-SASS 3
// Add a custom "xxs" breakpoint into Boostrap 3
// Use the same apporoach to add any new breakpoint
//
// Instructions:
// 1 - Copy Bootstrap's entrypoint "/assets/stylesheets/_bootstrap.scss" into your styles folder
// 2 - Setup your SASS config to be able to resolve all Bootstrap's @import
// 3 - Replace default @import "bootstrap/grid" with this file
// 4 - Edit this file and setup new and default breakpoints (Bootstrap comes with xs, sm, md, lg breakpoints)
// 5 - Recompile bootstrap!
@toomuchdesign
toomuchdesign / layouts-development-guidelines-ita.md
Last active August 29, 2015 14:08
A work in progress guideline for the production of good website layouts.

Linee guida sviluppo layout progetti web

Concetti generali

I mockup saranno introdotti da un diagramma di flusso che, partendo ipoteticamente dalla Homepage, rappresenti quali e quanti tipi di layout il progetto utilizza e come questi sono collegati tra loro.

Ogni tipo di pagina dovrà essere identificato con un nome univoco.

Se responsive, i layout saranno sviluppati con logica Mobile first.

Ogni layout di pagina sarà accompagnato da i relativi reflow di contenuto dal più piccolo al più grande. Quando necessario è importante simulare non solo le 2 dimensioni finali (piccolo - grande) ma anche reflow intermedi.