Skip to content

Commit

Permalink
Feature/baseline styles. Closes #292 (#299)
Browse files Browse the repository at this point in the history
* create /utilities /variables and /mixins directory

* add @include margin-padding-reset;

* add @include list-reset;

* eol

* add custom breakpoints and logic

* use rem-calc()

* import comments partial

* add comments partial

* @import variables and mixins

* add header description

* enhance comments

* switch to foundation’s .show-for-sr class

* create functions dir

* bring over some helper functions from Bourbon v5

* bring over some mixins from Bourbon v5

* import new mixins

* import new functions

* add default wordpressy stuff

* add in some helper sass for video/images etc…

* import new base partials

* misc. clean ups

* refactor header.php

* search form…foundation style

* use correct escaping function

* echo button text

* style the hamburger nav. comment improvements.

* add _header/_footer partials

* @import header/footer partials

* use the hamburger nav class and mixin

* deal with the admin bar

* set grid to 960

* add basic margins to header/footer

* use foundation global padding/margins

* add word break mixin

* update sasslint rules for foundation

* use foundation globals on comments

* center site info and align the text

* clean ups and wp screen reader class

* foundation components disabled by default…only turn on what you need

* add _content partial for baseline singlular styles

* swap out .screen-reader-text for .show-for-sr

* comiple styles and scripts ♻️

* remove url to itself

* add _s_display_card

* remove row

generally speaking, global content blocks are full-width, and you apply .row to the content

* use wds standard comments

* remove .fluid-embed

Foundation already has a responsive-media class

* add global content blocks

these are for the fifty/fifty blocks

* add _s_display_block_options

it’s great to have block options available by default…

* add baseline set of acf field groups

This will help new projects that use flexible content get started quickly, since these three global content blocks are on every project

* update fifty/fifty blocks with new field names

* update generic content markup

* add baseline hero styles

from our code pen, but converted to foundation

* add _content-blocks.scss

This is for globaly things, like adding a bottom margin to each block or whatever

* @import new partials

* register a full-width image size

* this should not have a column

since content block containers should be full-width by default, let’s remove .column

* give each content block a .content-block class

this is so we could give each block global styles

* convert codepen hero markup to foundation

* comments and heros are actually “sections”

move these to the correct folder

* add _fifty-fifty.scss

in case we need to add some global styles to these content blocks

* don’t delay tinymce init

this requires extra clicks, and is confusing

* remove _fifty-fifty.scss

don’t even need global styles - foundation grid/styles work out of the box 💥

* use more foundation presentational classes

i want to keep the sass as unopinionated as possible

* slim down up the hero sass

keep the opinions to yourself

* add video support to block options

if a client wants to add a video background to a hero, or generic block they can.

* remove uneeded variables

these are handled in the block options now

* make a note about video backgrounds

just be explicit about where video backgrounds should be used

* move .row container

in order to support full-width background options (yes, it does happen) move the  .row out of the block options function

* use global padding

this is about as opinionated as i want to get

* move generic content into a column

* make the four footer widgets responsive

i love foundation… two presentational classes and we have 4 responsive widgets

* javascript includes

needed to activate the accordion menu, we do not need dropdown.js by default

* compile styles/scripts ♻️

* better responsive widget styles

* add custom css class field to block options

* grab custom css class field and use it
  • Loading branch information
gregrickaby authored Jun 20, 2017
1 parent 7a475be commit bcaa860
Show file tree
Hide file tree
Showing 54 changed files with 3,685 additions and 9,932 deletions.
10 changes: 2 additions & 8 deletions .sass-lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,8 @@
# File Options
files:
ignore:
- 'sass/vendor/**/*.scss'
- 'sass/tests/**/*.scss'
- 'bourbon/app/**/*.scss'
- 'bourbon-neat/app/**/*.scss'
- './assets/foundation/_settings.scss'
- './assets/sass/style.scss'
- './assets/sass/base/_scaffolding.scss'
- './assets/sass/plugins/_gravity-forms.scss'
- './assets/sass/utilities/mixins/_omega-reset.scss'

# Rule Configuration
rules:
Expand All @@ -31,7 +25,7 @@ rules:
mixins-before-declarations:
- 1
-
exclude: ['grid-media'] # allow @include grid-media();
exclude: ['breakpoint'] # allow @include breakpoint();

# Line Spacing
empty-line-between-blocks:
Expand Down
37 changes: 19 additions & 18 deletions Gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,35 @@ const autoprefixer = require( 'autoprefixer' ),
paths.foundationJS + 'foundation.util.mediaQuery.js',

// Optional Foundation components.
// To disable, just comment them out.
paths.foundationJS + 'foundation.abide.js',
paths.foundationJS + 'foundation.accordion.js',
// To enable, just uncomment and re-run `gulp scripts`.

// paths.foundationJS + 'foundation.abide.js',
// paths.foundationJS + 'foundation.accordion.js',
paths.foundationJS + 'foundation.accordionMenu.js',
paths.foundationJS + 'foundation.drilldown.js',
paths.foundationJS + 'foundation.dropdown.js',
// paths.foundationJS + 'foundation.drilldown.js',
// paths.foundationJS + 'foundation.dropdown.js',
paths.foundationJS + 'foundation.dropdownMenu.js',
paths.foundationJS + 'foundation.equalizer.js',
paths.foundationJS + 'foundation.interchange.js',
paths.foundationJS + 'foundation.magellan.js',
// paths.foundationJS + 'foundation.equalizer.js',
// paths.foundationJS + 'foundation.interchange.js',
// paths.foundationJS + 'foundation.magellan.js',
paths.foundationJS + 'foundation.offcanvas.js',
paths.foundationJS + 'foundation.orbit.js',
// paths.foundationJS + 'foundation.orbit.js',
paths.foundationJS + 'foundation.responsiveMenu.js',
paths.foundationJS + 'foundation.responsiveToggle.js',
paths.foundationJS + 'foundation.reveal.js',
paths.foundationJS + 'foundation.slider.js',
paths.foundationJS + 'foundation.sticky.js',
paths.foundationJS + 'foundation.tabs.js',
paths.foundationJS + 'foundation.toggler.js',
paths.foundationJS + 'foundation.tooltip.js',
// paths.foundationJS + 'foundation.reveal.js',
// paths.foundationJS + 'foundation.slider.js',
// paths.foundationJS + 'foundation.sticky.js',
// paths.foundationJS + 'foundation.tabs.js',
// paths.foundationJS + 'foundation.toggler.js',
// paths.foundationJS + 'foundation.tooltip.js',
paths.foundationJS + 'foundation.util.box.js',
paths.foundationJS + 'foundation.util.keyboard.js',
paths.foundationJS + 'foundation.util.motion.js',
paths.foundationJS + 'foundation.util.nest.js',
paths.foundationJS + 'foundation.util.timerAndImageLoader.js',
paths.foundationJS + 'foundation.util.touch.js',
// paths.foundationJS + 'foundation.util.timerAndImageLoader.js',
// paths.foundationJS + 'foundation.util.touch.js',
paths.foundationJS + 'foundation.util.triggers.js',
paths.foundationJS + 'foundation.zf.responsiveAccordionTabs.js',
// paths.foundationJS + 'foundation.zf.responsiveAccordionTabs.js',

// Required theme scripts.
paths.concat_scripts
Expand Down
133 changes: 133 additions & 0 deletions acf-json/group_58ebcc07bfbd7.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
{
"key": "group_58ebcc07bfbd7",
"title": "Fields: Background Options - To Clone",
"fields": [
{
"key": "field_58ebccf18512c",
"label": "Background Type",
"name": "background_type",
"type": "select",
"instructions": "Choose a type of background.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"choices": {
"null": "None",
"color": "Color",
"image": "Image",
"video": "Video"
},
"default_value": [],
"allow_null": 0,
"multiple": 0,
"ui": 1,
"ajax": 0,
"return_format": "array",
"placeholder": ""
},
{
"key": "field_58ebcd698512e",
"label": "Background Color",
"name": "background_color",
"type": "color_picker",
"instructions": "Select a background color.",
"required": 0,
"conditional_logic": [
[
{
"field": "field_58ebccf18512c",
"operator": "==",
"value": "color"
}
]
],
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_58ebcda08512f",
"label": "Background Image",
"name": "background_image",
"type": "image",
"instructions": "Add\/Upload an image file. (1920x1080px .jpg, .png)",
"required": 0,
"conditional_logic": [
[
{
"field": "field_58ebccf18512c",
"operator": "==",
"value": "image"
}
]
],
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"return_format": "array",
"preview_size": "medium",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "jpg, png"
},
{
"key": "field_59416a7edea96",
"label": "Background Video",
"name": "background_video",
"type": "file",
"instructions": "Add\/Upload a 1920x1080 .mp4 video file. Note: background videos are only supported on hero's.",
"required": 0,
"conditional_logic": [
[
{
"field": "field_58ebccf18512c",
"operator": "==",
"value": "video"
}
]
],
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_size": "",
"max_size": "",
"mime_types": "mp4"
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "post"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 0,
"description": "",
"modified": 1497463817
}
Loading

0 comments on commit bcaa860

Please sign in to comment.