Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Daniel Mascena danielmascena

🎯
Focusing
View GitHub Profile
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* CSS Flexible Layout Module - flex property
*/
* { transition: all 2s; box-sizing: border-box;}
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
font-size: 1.4em;
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module
View dabblet.css
/**
* CSS Flexible Layout Module
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - extra div
View dabblet.css
/**
* CSS Flexible Layout Module - extra div
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@danielmascena
danielmascena / dabblet.css
Last active Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - flexbox styling
View dabblet.css
/**
* CSS Flexible Layout Module - flexbox styling
*/
* { transition: all 2s; }
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* CSS Flexible Layout Module - flex property
*/
* { transition: all 2s; box-sizing: border-box;}
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
font-size: 1.4em;
@danielmascena
danielmascena / dabblet.css
Created Jul 14, 2017 — forked from benfrain/dabblet.css
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* CSS Flexible Layout Module - flex property
*/
* { transition: all 2s; box-sizing: border-box;}
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
font-size: 1.4em;
View table.css
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
View css-selectors.md

CSS Selectors Cheatsheet

Element selectors

Element -- selects all h2 elements on the page

h2 {
    foo: bar;
@danielmascena
danielmascena / README.md
Created Apr 10, 2017 — forked from addyosmani/README.md
108 byte CSS Layout Debugger
View README.md

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

View SassMeister-input-HTML.html
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
<div class="col-sm-12 col-md-6 col-lg-3"><p>1</p></div>
</div>
</div>
You can’t perform that action at this time.