Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Building Blocks Proposal #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions proposals/building-blocks-blockfile-example.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
title: Building Block Example
date: 05/07/2016
author: @colin-marshall
description: A cool thing you can build with Foundation for Sites.
framework: sites
version: 6.2.1
components: menu, sticky, dropdown-menu, responsive-navigation, top-bar, title-bar
tags: navigation
---

```html
<!-- HTML here -->
```

```scss
/* SCSS here */
```

```css
/* CSS here */
```

```js
/* JavaScript here */
```
71 changes: 71 additions & 0 deletions proposals/building-blocks-proposal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Building Blocks Proposal

## Problems
The Yetinauts have identified the following problems with the current state of Building Blocks:

* There is not a well defined, streamlined submission process in place for the community to share building blocks with each other.
* Individual building blocks are no longer tied in with the docs like they were in Foundation 5.
* There are no building blocks for Foundation for Apps or Emails.
* There is no filtering of blocks by version 5/6.
* When resizing the window starting from smallest to largest, the left sidebar goes away which causes block's preview frame to jump breakpoints. They go in this order: `small -> medium -> small -> medium -> large`. This looks weird when trying to see how a building block looks at different breakpoints.
* There are no copy buttons for source code, and double clicking in the source code does not select all. This forces the user to start selecting at the top of the code and scroll all the way to the bottom which can be tedious/annonying with large blocks of code.


## Proposal for the future of Building Blocks
### Public Repo
The Yetinauts propose to move the Building Blocks to a public repo on GitHub (github.com/zurb/building-blocks)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets draw a distinction between the building block content and the building blocks site... does this proposal just include moving the content, or also a putting the entire site into this repo?


#### Submissions
* Building blocks are submitted via PR, or by opening an issue on the repo with a link to a CodePen of the submission.
* Submissions are voted on by the Yetinauts with a thumbs up/down reaction on GitHub
* After X number of Yetinauts have voted, the building block is included or abandoned based on majority vote.
* ZURB has final say in what makes the cut.

#### Repo structure

```sh
├── building-blocks
│   ├── apps
│   │   └── rad-block-for-apps
│   │   └── blockfile.md
│   │   └── screenshot.png
│   ├── emails
│   │   └── cool-email-block
│   │   └── blockfile.md
│   │   └── screenshot.png
│   └── sites
│   ├── awesome-block
│   │   └── blockfile.md
│   │   └── screenshot.png
│   └── neato-thing-for-sites
│   └── blockfile.md
│   └── screenshot.png
├── gulpfile.js
└── package.json
```

* Each framework (Sites, Apps, Emails) has its own directory
* Each building block is in a subdirectory of its framework
* Each building block directory contains:
Copy link
Contributor

@kball kball May 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will we ever need more than blockfile and screenshot? For example, might want some images...

* `blockfile.md`
* `screenshot.png`
* Blockfile contains (see `building-blocks-blockfile-example.md`):
* Building block title
* Description
* Author's GitHub username
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link to author's foundation forum profile - As we improve the foundation forum into more of a hub for all things foundation, being able to link a user to the building blocks they've created/submitted will be good.

* Framework used
* Version of framework used to create the original building block
* List of framework components used in building block (used for linking building blocks in the docs for a component)
* Tags (higher level than the components used, e.g. navigation, video, social media, etc.)

#### Build System
* The build system will parse the code blocks and information from `blockfile.md` and create a static html page for each block.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth highlighting the things this will need to take into consideration (importing proper version of framework is the one that immediately comes to mind, but there may be more)

* The building blocks repo will integrate with each framework's build system to add links with screenshots of the building blocks individual building blocks in the corresponding component's page in the framework's docs.
Copy link

@andycochran andycochran May 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh? @ "screenshots of the building blocks individual building blocks"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andycochran I guess I just couldn't stop talking about building blocks! Thanks for proofreading.


### Building Blocks Public Site Improvements
* Copy button for source code
* Double clicking source code block selects all text in the block
* Button to launch the building block in a new Pen using the CodePen API

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will it be possible to launch every building block in CodePen? It would be nice for building blocks to be able to change variables & use mixins/functions—which you can't do in CodePen.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of them don't require changing of variables or use of framework mixins. Those that do would have to use the compiled CSS when launching in a new Pen, which makes it less useful in those situations.

I agree a "playground" for Foundation where you could change the settings variables and use the mixins would be amazing and I think that should be looked into after building blocks are improved.

* Clear directions on how to contribute to building blocks or provide feedback on existing ones
* Allow users to favorite building blocks using the same account they use for the forum
* Ability to order blocks by popularity
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Social media share links
  • Ability to download source as a zipped set of files? (html, scss, css, js) Would that be useful?