zalando / dress-code Goto Github PK

#9 #11

Create a progress bar to indicate page loading

To avoid css conflicts. We need to namespace all css classes and never apply styling directly to native elements.

EXAMPLE:

/* NO */
button {
    width:100px;
    color: blue; 
}

/* YES */
.hb-btn {
   width:100px;
    color: blue; 
}

• refactor folder and files (dir layout and naming) to match BEM vocabulary
• un-nesting BEM selectors
• "modularize" everything as much as possible (avoid implicit imports, it must be possible to import just a component without importing the whole library, must be possible to use just mixins/placeholders/variables to apply style to elements)

first we need to close this #2

I think SVG icons are more or less unusable from a developer perspective.

We will never include something like this in our templates as shown in the doc section:

<svg class="i--interactive i--portal" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
      <title>
          Menu
      </title>
      <g fill="#979797" fill-rule="evenodd">
          <path d="M10.5 11H26v-1H10v1h.5zM10.5 18H26v-1H10v1h.5z" id="Shape"/>
          <path d="M10.5 25H26v-1H10v1h.5z"/>
      </g>
  </svg>

We want something like material icons by Google:
https://www.google.com/design/icons/

This issue can be related to #10

Create utility classes that allow to add horizontal or vertical dividers to containers.

https://github.com/CSSLint/csslint
https://github.com/brigade/scss-lint

Implement the spinner atom using the bsCommon version as a blue print....

We need a different and simplified README for the bower version, basically explain that this repository is just the bower version of the holy bible and a link to the source code.

How to test this thing?
we can run a travis job that check the style #9, but then how to test the visual part?

I want to be able to do like this:

<i class="dc-font-icons">add</i>

I think is related to how we export svg icons, how we build the font, how we define the dc-font-icons class.

The grid and the breakpoint toggles are broken after the renaming.

The current repo name is too generic and looks like it's a company-wide thing. I'll think about a new name and then rename it.

We need the dialog element in the dress code.

Components that must or should be implemented in 1.0.0:

• responsive grid, responsive utility classes (ex. hide-md) (moved to 1.0.0-alpha.1)
• divider
• buttons (small, medium, big, block, icon button, with icon and text... etc)
• button group
• icons (font icon)
• dropdown, dropup
• input group
• progress bar (high priority)
• spinner/loader (high priority)
• thumbnails (removed: not a use case)
• avatar (removed: not a use case)
• autocomplete (removed: not a use case)
• dialog (high priority)
• card
• tooltip
• messages/alert
• toast (high priority)
• sticky list headers (removed: not a use case)

fix markdown format in the contributing.md file

We must write down some docs file (I suggest to use markdown under a docs folder) about contributing: css style guide, git style guide, build process, issue management, releasing process...

A really nice inspiration: https://github.com/angular/material/tree/master/docs

To be able to define our first milestone 1.0.0, we have to write down all issues.

Add usage info with npm and bower, compiled and not.

We have to came up with a shiny, super-simple grid, the one that we had is too complex and not really usable (will be removed). Maybe we can use directly the flex-box model.

Shouldn't all buttons (dc-btn) have a cursor: pointer; by default?

Otherwise the property will likely need to be overridden in the projects using it

Extend search form to be able to display results containing not only text labels but a combination of those plus images

#2

then
#3

• rename repository
• updates package metadata informations
• updates docs

A basic input group exists in the price input. Let's improve it:

• Accept any size of addon
• Accept left or right addon
• Can be used with other input than text (number, password, phone, etc)

we need input type number in _forms.scss

Create/use something like this http://philipwalton.github.io/solved-by-flexbox/demos/grids/

update src/styles folder/files structure and naming to match the adopted methodology (Atomic Web Design). We use this kind of "naming" also for the documentation.

Create a button that activate a dropdown or dropup.

• Add a way to modify internal (vertical) padding
• Verify compatibility of dropdowns in tables
• Verify compatibility of checkboxes and radios in tables
• Verify compatibility of buttons (+dropdown/dropup) in tables

Will be based on the toast shown when saving a version in Brand CMS

This line in _base.scss is causing a compilation error after installing the dress code via npm:

@import "../../node_modules/normalize-css/normalize";

Steps to reproduce:

1. npm install dress code
2. run scss compilation (in central services, 'gulp styles')
3. compilation fails

The root issue is that _base.scss is assuming a particular structure of packages within node_modules, and that structure is not guaranteed.

For now, I am working around this by just using the compiled css directly, but I would prefer to use standard sass importing.

We have to rename all classes, mixins and variables with a namespace prefix:

// avoid styling native element
// no
button {}

// example
.btn {}
// to
.bs-btn {}

foobarMixin()
//to
bsFooBarMixin()

$foobarVariable
//to
$bsFoobarVariable

Provide icon font and something simple to use those icons with css classes.

Add responsive grid classes like:

row
col-sm-1
col-md-2

or something like that.

Remove "dead bodies", remove unused sass files, remove unused doc sections

I pulled the library via Bower and added the toolkit import as directed in the README. The compile failed with errors until I made the following changes:

• _import.scss: ...normalize -> ...normalize.css
• _btn.scss: @extend .dc-cf -> @extend %dc-cf
• _dropdown.scss: @extend .dc-cf -> @extend %dc-cf

Please fix these changes in the base library if they are indeed bugs or advise on how to avoid these compile issues.

@xonic have to align UX designer team about the holy bible, etc.

STEPS

• merge the remaining accepted pull request into the develop branch
• open a release branch from develop branch
• build the dist, demo and docs
• updates the package versions (bower.json and package.json)
• updates the changelog with (https://github.com/ajoslin/conventional-changelog)
• commit with -m "bump version number to 0.1.0-alpha"
• merge the release branch into the master
• add the git tag
• build the bower version
• add the git tag to the bower version
• merge master into develop

in the code block of the style guid page, please disable select all if you click into the code block textarea.