Skip to content

Instantly share code, notes, and snippets.

💭
Working on Bedrock

Wolfr Wolfr

💭
Working on Bedrock
Block or report user

Report or block Wolfr

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View _colors.scss
/* ==========================================================================
Colors
Only define colors here. Don't use sass color functions, stick to hex values,
or the color component in styleguide won't regenerate automatically anymore.
========================================================================== */
/* Red
========================================================================== */
$material-color-red-50: #ffebee;
View colors.pug
each category in colorCategories
h4= category.name
ul.br-color-swatch-list
each color in category.colors
li.br-color-swatch-item
.br-color-swatch-preview(style=`background-color: ${color.value}`)
.br-color-swatch-data
.swatch-name= color.name
.swatch-value= color.value
View typography.pug
- var veryShortContent = 'Lorem ipsum';
- var shortContent = 'Lorem ipsum dolor sit amet';
- var longContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(5).trim()
- var samples = [];
- samples.push({name: 'Headline 1', code: '<h1 class="mdc-typography--headline1">' + veryShortContent + '</h1>', extraClass: contentClass})
- samples.push({name: 'Headline 2',code: '<h2 class="mdc-typography--headline2">' + veryShortContent + '</h2>', extraClass: contentClass})
- samples.push({name: 'Headline 3', code: '<h3 class="mdc-typography--headline3">' + shortContent + '</h3>', extraClass: contentClass})
- samples.push({name: 'Headline 4', code: '<h4 class="mdc-typography--headline4">' + shortContent + '</h4>', extraClass: contentClass})
- samples.push({name: 'Headline 5', code: '<h5 class="mdc-typography--headline5">' + shortContent + '</h5>', extraClass: contentClass})
- samples.push({name: 'Headline 6', code: '<h6 class="mdc-typ
View button-mixin.pug
//- Button 1.1
//- 1.1: Added disabled state
mixin c-button(options, attributes)
- var DEFAULT_OPTIONS = {};
- DEFAULT_OPTIONS.label = 'Button label' // string
- DEFAULT_OPTIONS.skin = 'default' // string
- DEFAULT_OPTIONS.size = false // string
- DEFAULT_OPTIONS.href = false // string
- DEFAULT_OPTIONS.icon = false // boolean
- DEFAULT_OPTIONS.disabled = false // boolean
@Wolfr
Wolfr / error.pug
Created Jan 18, 2018
Bedrock tutorial - Error for sign-in template
View error.pug
if error
.u-spacer-bottom
.c-alert.c-alert--danger
p Wrong username/password combination.
@Wolfr
Wolfr / sign-in-start.pug
Created Jan 18, 2018
Bedrock tutorial - Sign in start state
View sign-in-start.pug
extends /templates/_layouts/master
block append pageVariables
- var moduleTitle = 'Sign In'
block body
.o-flex.o-flex--center.u-maximize-height
.c-panel.c-panel--small
.c-panel__header
h2.c-panel__title Sign In
@Wolfr
Wolfr / block-append.pug
Created Jan 18, 2018
Block appending vars
View block-append.pug
block append pageVariables
- var moduleTitle = 'Sign In'
- var htmlClass = 'u-maximize-height'
- var bodyClass = 'u-maximize-height'
@Wolfr
Wolfr / sign-in--error.pug
Created Jan 18, 2018
Sign in error - Bedrock tutorial
View sign-in--error.pug
extends sign-in
block append pageVariables
- var error = true
@Wolfr
Wolfr / sign-in.pug
Created Jan 18, 2018
Sign in - Bedrock tutorial
View sign-in.pug
extends /templates/_layouts/master
block append pageVariables
- var moduleTitle = 'Sign In'
- var htmlClass = 'u-maximize-height'
- var bodyClass = 'u-maximize-height'
block body
.o-flex.o-flex--center.u-maximize-height
.c-panel.c-panel--small
View arrow-down-figma.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
You can’t perform that action at this time.