getchopchop / chopchop Goto Github PK

We would like to integrate code previews and docs into ChopChop. This is part of the redesigned #1 interface but I have separated it because I suspect it will need larger structural changed behind the scenes.

I see that by integrating docs we now need a new file per pattern. I propose the following structure for each pattern:

pattern-name
pattern-name/pattern.php
pattern-name/docs.md

For example:

// this is default or base
card
card/pattern.php
card/docs.md

// variations live in nested folders
card/bordered
card/bordered/pattern.php
card/bordered/docs.md

I have attached a basic screenshot of the proposed layout.

Whenever I come to use enquire or element queries it is a mess around to grab the right snippets. Might be nice to show some basic examples but comment them out. Won't compile then but super useful for out the box.

Thoughts @gazjoy?

Inspired by https://walmartlabs.github.io/web-style-guide/

Features to include in new version:

• consider naming conventions
• integrate docs
• integrate code previews
• expand all menus in burger by default
• improve usability of interface
• create chopchop styles that are unique and separate to the site

Investigate integrating https://github.com/addyosmani/critical

Consider some scope classes for text colours. As defined by Harry Roberts:

s-: Signify that a class creates a new styling context or Scope. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if not used wisely.

They can be dangerous and should be used sparingly but they are useful. Especially when inverting a section of a website. With headers often applying their own styling and content being managed it can become difficult adding the colour utility classes everywhere. A wholesale change might be good.

Implications to consider:

• Button styles will get overridden using this. Should buttons be excluded from scope classes?
• Link styles may be effected.

Worth a discussion @gazjoy. Found them very useful on latest project.

The homepage toggles that live on /html don't work on mobile. Tested in iOS only right now.

Add the following the grid items to zero the margin on the last item. This will ensure the spacing between the grid items is correct and the margin of elements inside each column doesn't increase it.

.grid > * *:last-child {
margin-bottom:0;
}

This will keep the margin by default on patterns so they space correctly when not used inside a grid.

Currently all svgs are combined into one file. It would be good if they were outputted as separate files – one per folder. This will stop the files being so large. The cards are especially big and most the time they're not used.

At the moment box-sizing is set using a utility sass file, ideally we should have it as its own atom.

The grid page has some incorrect titles and it seems like the grid-center mixin isn't working, one to check.

The http://realfavicongenerator.net/ website now has a new version of the favicons which much fewer assets. We should update to match.

We need to swap out the premium icons with the free versions.

Swaps
arrow-down - circle-down
arrow-up - circle-up
arrow-left - circle-left
arrow-right - circle-right
basket - cart
grid - table2

Renames
star - star-full

Different Icons same name
zoom-in
zoom-out
image
search
lock
phone

Since the change in gulp version I am not sure it is recognising new files. Tried Sass and Scss files and neither seem to be noticed. Might be me!

Let me know if you want a demo @jakecobley.

We have styles.php which is included in the head and scripts.php which is included in the footer.

Maybe they should be renamed so they refer to their location rather than their contents.

For example, Element queries require scripts to be loaded in the head.

The borders on tables seem a little messed up. We have thick borders below the heading and below the footer. They should be above the footer though.

There are lots of references to gitlab in various files and wiki pages. We should go through and remove these since moving to github.

We can probably remove cc-box now as we have u-block in the core interface. We can also look at tidying the colours. I know we go in circles but on brand shades of grey would be nice I think.

What do you think @gazjoy ?

This pattern keeps cropping up. It's where two divs need to stretch to be the full height. Common case is inside grid columns.

I suggest a .u-full-height utility that sets flex onto internal items to stretch them correctly. This is the css I have been using:

.u-full-height {
        display: flex;
        flex-flow: wrap;

        > * {
            width: 100%;
        }
}

A very high level and fluffy idea, but a working idea nonetheless. The idea of being able to include ChopChop templates into WordPress using this function:

function iweb_get_chopchop_template( $file, $template_args = array() ) {
extract( $template_args );
include( locate_template( $file ) );
}

It's worth investigating the idea that only high level patterns exist once integrated and that maybe templates and organisms should disappear once integrated into platform of choice. This means we can remove the issues of double updating.

Grab bx responsive from the iweb-jquery repo and make it work with enquire.js

@jakecobley mentioned that vertical spacing on gutters might not be working in Edge. We should browser check this and everything else probably ;)

atom/form range output doesn't update in IE11.

We're missing file upload from the form atoms. Not used often but should be in the base.

This variable inside the mixin should reference $gap. Always uses global value else.

A getLink function might be nice so we can make the templates feel more like a website. We would be able to link news items to news detail, product items to product detail etc.

What do you think @gazjoy ?

Add a page showing the scaling of all fonts, not just headings. Similar to this http://type-scale.com/

Can we make printPattern etc extend Section class. This is so we don't need to do Section::printPattern() inside the template files.

Thanks.

The ability to pass through multiple targets inside data-cc-target so we're able to activate multiple things with one click. Example usecase:

<a href="#" data-cc-target="item-1,item-2" data-cc-action="activate">Hello, world</a>

<div id="item-1"></div>
<div id="item-2"></div>

Change the default font to:

-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif

Add custom select pattern.

The functions.php needs an overhaul, its just a dumping ground for everything at the minute and is hard to understand.

Also as part of this we'd like to move these files/directories into the root

html/index.php
html/.htaccess
html/inc

and rename the html directory to pattern.

Ultimately the structure should look like this:

pattern
src
inc
index.php

At the moment cards are very open to interpretation. We need to make encourage them to be styled in a certain way. Any significant deviations from them become there own patterns then.

Use css contains selector to apply base container classes then append with -* e.g. u-container-sm to reflect container values.

Idea of using a json or yaml file in the repository.

The problem with that approach is that it is not very dynamic and would be hard for a client to update.
An alternative approach is to pull the data in from somewhere and let it be editable, this would involve having a simple service to store and send the data and some javascript in chopchop. The cool part will be that we could store other data to - like annotations.

These aren't used by default so should be removed. Trying to keep codebase lean.

Can we make templates special so instead of them anchoring to a different sections of the page, they go to their own page. This is how it previously worked. See http://supreme.dredfern.dyn.iweb.co.uk/html/.

Then the heading "Template" is either not a link, or links to first page (such as template/homepage).

Thanks!

Title explains it. Full width grid with gutter causes horizontal scrolling. Need to figure how we're doing gutters to stop this.

I am generally noticing they seem to sit a little low when using default fonts. Might be something to investigate. Very noticeable when adding an SVG icon.

html/global/variable

Add a section utility to ensure the spacing between blocks on a website are consistent. It might be nice to try using vw or vh as a measure so it is responsive.

We will need to experiment in Codepen to make sure we get this right. Ideally we want them margins so they overlap correctly.

Show the menu to the left without overlaying any other content. Then add an overlay to other content so when you click it automatically closes. Lovely.

@insom do the thing we discussed, splitting on dashes like . u-fill-grey, u-fill-social, u-fill-brand etc.

Currently we don't scale headings, we leave it per site. It's hard to get them right so a base to tinker from would be useful.

Add block spacing, similar to Bootstrap. Basically like section with with left and right padding. Also allows us to have -sm and -lg.

Example:

.block {
padding: 1em;
}
.block-sm {
padding:0.5em;
.block-lg {
padding: 2em;
}

I don't know if this is a thing. I know we've discussed it before and we struggled to come up with a decent solution but maybe a collection of animation mixins would be useful. To make sure all fades on a site are consistent. Maybe we could extract some useful bits from here https://daneden.github.io/animate.css/.

Not a urgent feature but something that would be nice to have.

Right drawer want deactivating the overlay.

Don't think there isn't anything we need to remove but we have quite a few vendor scripts now. Probably worth checking if we need everything.

Remove the need to add a base value for headings when using type scales. We can multiple it down and assume a h5 is always 1em. See example: http://codepen.io/daveredfern/pen/QEVovK?editors=1100 here.

We have section classes that are applied to top and bottom. It would be useful to have top and bottom only ones also.

Convert variables to arrays so they're easier to automate the creation of utility classes.