socialally / aqua Goto Github PK

http://kouto-swiss.io/

Currently blocks are being used for all rule declarations which allows consumers to override all styles (everything is mutable), however this is not ideal in some scenarios.

The uses cases are:

1. I want to completely change the styles for an element, component, block etc.
2. I want to modify a single declaration

Point 1) is catered for by the use of blocks, but if we also make everything a variable we can cater to use case 2).

Whilst this is quite a lot of work it does make the library as flexible as possible.

Draft styles have been implemented quickly, need to follow the everything is mutable principle.

Because developers writing CSS stylesheets need to resolve assets that are in ../ with ../../assets so that the rev/replace logic for production builds works as expected.

Consider:

• Selector best practices
• Selectors for javascript code (data-*)
• Use of variables
• Liberal use of @import

The default h element styles include @media rules which override any h*-block values specified.

The options I can see are:

• include the h*-block directives in these media query rules. The example library page has some basic responsive styles, but as soon as a library user defines vars it is the user's responsibility to define appropriate responsive media queries.
• remove any media queries from the project, leaving it up to a library user to define basic styling beyond a smaller viewport

Are there any other considerations or alternatives here?

https://github.com/socialally/aqua/blob/master/lib/browser-warning.styl

Currently does not adhere to the guidelines and is far more styling then we should be including by default, developers should test and change this warning to match a project's styles.

Include design philosophy and information on overriding default styles etc.

Elements:

• vars
• placeholders
• mixins
• blocks
• rules

Basic imports:

• libs
• vars

Style imports:

• norm
• elem
• etc etc