-
Notifications
You must be signed in to change notification settings - Fork 0
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
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 */ | ||
``` |
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) | ||
|
||
#### 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: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Huh? @ "screenshots of the building blocks individual building blocks" There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
There was a problem hiding this comment.
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?