kwaledesign / archetype Goto Github PK

skin properties using Colorkit color functions are not producing valid CSS but instead outputting the function itself.

current workflow between Archetype/Archetype-Utilities/Archetype-Compass is very broken. This must change!

after receiving feed back on irc it's clear the best way to move forward is to convert Archetype to compass directory structure and include a test directory to allow for testing and development.

Obviously, this will finally allow for the integration of Archetype-Utilities and also the Drupal specific code without disrupting development workflow so those repos will be pulled in here.

move normalize mixin includes into _settings.scss partial
add normalize variables to _settings.scss partial
remove the _reset.scss partial
remove the symlink to _reset.scss within Archetype-Compass

abstracting all css values into variables is needlessly complicated. This is a habit left over from when everything was wrapped in a mixin, but no longer necessary.

Add base/ and components/ directories to markup-patterns/. update template links to all base and component document pages.

Add contribute.md and include: 1. workflow / dependencies; 2. semantic versioning; 3. package management; 4. code standards

Consider full integration of Breakpoint

Introduce a systematic naming convention for media queries - i.e. B.E.M.-like syntax for major and minor breakpoints

Potentially a prefix for both breakpoints and tweakpoints
ex: $bp- and $tp-

Important to distinguish between major and minor breakpoints because minor bp's change more frequently and/or often have additions - this can easily disrupt a naming scheme (for example if sm/med/lg is used initially and additional sm minor bp's become necessary down the road, the naming scheme can easily grow to be un-intuitive over time)

add bower_components directory, .bowerrc to handle package management

need to account for spacing and avoid double spacing...this also needs to be explicitly documented within the docs

Reasoning: objects are closed for modification and, therefore, should not be included within the Archetype directory.

Remove units from spacer component - these should be unit-less, units should be prepended to the spacer unit when needed. This makes units more modular and avoids inline unit calculations (or at least simplifies them so they are additive)

Note: this will impact every stylesheet that uses the spacer component...they all need updating to reflect this change.

VIM plugin for autocompletion of all Archetype functions and mixins

use spacer units where aplicable.

concat and minify, include custom (local) jQuery build and decide on what to do re: jQuery CDN

https://github.com/kaelig/hidpi

support for both horizontal and vertical or implement as an extension

reconsider margin/padding and li's block/float vs. inline-block (if inline-block, include adjustment for spacing bug)

Remove unnecessary button mixins

Potentially add _typography-pallet.scss partial to base/ (similar to the _color-pallet.scss partial). The reasoning is that some type variables need to be globally available which means they must be initialized even before normalize.scss...this would eliminate redundant overrides and unneeded code.

http://compass-style.org/reference/compass/helpers/urls/

Remove all styles directly applied to an element CSS-Styleguide compliance - OR - define an exception rule

Keep in mind normalize already targets element selectors...

Add specific "markup-pattern" jinja template within base and component's markup-pattern

1. pull round button into its own partial
2. complete the module
3. test

clean up docs-update.sh script

potentially update it to also pull in changes to utilities (or create a separate script)

Anything unrelated to typography should be scoped with a class on the element itself

Document proper implementation (class-prefix syntax, class naming in rwd context, etc...)

Reconsider import order of layout stylesheets

Reconsider layout directory (separate into specific module stylesheets?)

Update Docs to reflect these

1. Currently, base/ contains entities such as table, figure, etc... these html element styles are often scoped and the only thing distinguishing them from component styles is the fact that they are applied to a specific html element and that they usually do not have an object style.
2. Currently, base/ also contains entities such as _color-pallet.scss partial and _typography.scss partial. These items are clearly "base", but also clearly different from HTML element styles. Also currently, the _settings.scss partial contains "base" style settings that are lumped together.

Proposal 1: break-up _settings.scss into separate partials and move into base/. Remove _settings.scss partial and import these new "base" partials directly into screen.scss.

Proposal 2: make everything a component. Encapsulation is the key to achieving objectives of modularity which is why all resources should be defined as components, even ones that are non-visual. Move HTML element styles into components/.

The objective here is to treat everything as a component (regardless if it extends an object style or not) and remove the ambiguous definition between base styles and component styles.

add matrix object for grid layout of images / etc...

make sure there is no bg color set on the html element (http://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/)

font size for body within _page or _settings?

cleanup markup patterns, add descriptions

remove link elements, use button instead

link to this article in docs

https://gist.github.com/joshdcomp/5436218

http://csswizardry.com/2013/04/shame-css/

styles are not complete (see docs)

change table-hover-highlight to table-hover-state (also update jinja template)

Remove media component

refactor /base/_media.scss

add H5BP code snippets

add google analytics code to footer

test entire Colorkit plugin

update docs to reflect issue 46

also remove copy scope from .md files and apply to the template instead.

Review and finalize docs on this within Coding Standards

explicitly define when to use underscores vs dashes - each conveys an extension / dependency

extend same syntax for class names to variable names

class for ui state colors for text (error, success, warning, info)

update docs to include

Import Colorkit within _color-pallet.scss partial and remove from _settings.scss

also see: issue 23

also illustrate how it's used and how it can be easily removed if un-needed.