stadgent/fractal_styleguide_gent-base-archive

Archive for the styleguide for sites made by city of Ghent.

fractal_styleguide_gent-base-archive's Issues

Keep mixins global or add to specific components?

Should we keep the mixins in a global folder or add them to their component specific folders in Fractal?

Proposition: Using a grid system like Susy.

Just an idea:
Using a grid system like Susy allows for better semantics. It also removes a lot of divs Bootstrap needs to define a grid. No more row wrappers are needed etc...
It generally makes the HTML cleaner.

Support for Angular CLI

The main.scss file uses import globbing statements, which is, by default, not supported for use with Angular CLI. Is it possible to create a main_cli.scss file with all the necassary references without globs?

Environment

• Version used: 2.7.0
• Project: Digitale Front Office Inname Publieke ruimte

Rewrite INSTALL.md docs to clarify how to implement the Stad Gent Styleguide.

We should clarify inside the Stad Gent Styleguide repo how to implement the styleguide in your project.

NPM installation fails

The installation of the package over npm still fails due to the postinstall script.
Can you please fix this?

Restructuring of the current style guide.

I propose we change the structure of the style guide to the following:

• Global
  • Colors
  • Fonts
• Atoms
  • Headings
    • h1 (@H1)
    • h2 (@h2)
    • h3 (@h3)
    • h4 (@h4)
    • h5 (@h5)
    • h6 (@H6)
  • paragraph text (@paragraph)
    • small text paragraph text (@paragraph—small)
    • caption text (@paragraph-caption)
    • centered paragraph text (@paragraph—centered)
    • left paragraph text (@paragraph—left)
    • right paragraph text (@paragraph—right)
  • Button (@button)
    • default (@button—default)
      • sm (@button—default—sm)
      • md (default) (@button—default—md)
      • large (@button—default—lg)
    • inverse (@button—inverse)
      • sm (@button—inverse—sm)
      • md (default) (@button—inverse—md)
      • large (@button—inverse—lg)
    • highlighted (@button—highlighted)
      • sm (@button—highlighted—sm)
      • md (default) (@button—highlighted—md)
      • large (@button—highlighted—lg)
  • Image (@image)
    • default (@image)
    • no-styling (@image—no-styling)
    • circle (@image—circle)
  • Textfield (@Textfield)
  • Password (@password)
  • Date (@Date)
  • Datetime (@datetime)
  • Email (@email)
  • Url (@url)
  • File (@file)
  • Textarea (@textarea)
  • Checkbox (@checkbox)
  • Radio button (@radiobutton)
  • Select (@select)
  • Multiselect (@multiselect)
  • Icon (@ICON)
  • List (@list)
    • default (@list)
    • no-styling (@list—no-styling)
    • links (@list—link)
  • Logo (@logo)
• Molecules
  • Section (@section)
    • default (@section)
    • inverse (@section—inverse)
    • highlighted (@section—highlighted)
    • ascent (@section—ascent)
    • wrapper (@section—wrapper)
  • Island (@island)
    • Gentinfo island (@island—gentinfo)
  • Pagination (@Pagination)
  • Breadcrumbs (@breadcrumbs)
  • Disclaimer block (@disclaimer)
  • Post Address Block (@postaddress)
  • Search (@search)
  • Social media block (@socialmedia)
• Orgamisms
  • Header (@Header)
  • Footer (@footer)
• Templates
  • Index (general overview = all elements)
  • Grids overview
  • Images overview
  • Form elements
  • Icon overview
  • Islands overview
  • Blocks overview
  • Sections overview
  • Buttons overview
  • Lists overview
  • Molecules overview
  • Helper classes overview

By defining components and their variants in their own twig files we can start to reuse these components in other components with more ease, which allows us to better keep the style guide up to date and allows for better Drupal 8 integration in the future.

Some things to refactor:

• Give each component it's own handle name (defined in the component config file) for easier referencing in other components.
• Create templates to show of groups of components or entire pages as an example for people who want to integrate the style guide in their app.
• Make references to other components with the following syntax: {% include ‘@text-styles’ %}.
• Rename component subfolders and use the order key in their config files to define the Fractal navigation order.

Some references, inspiration:

• http://styleguides.io/examples.html

• http://ux.mailchimp.com/patterns/forms#buttons

• http://patterns.frostfinery.com/

Add option to extract sass library from this styleguide

What is in the scss folder and the public folder after grunt compile ATM. That should be an exportable/separate asset.

Input type 'datetime' not working

The input type 'datetime' is not working as expecting.

https://stijlgids.stad.gent/components/detail/input-datetime.html

Document globally defined mixins

box-sizing: border-content doesn't exist

It should probably be content-box

Re-enable MD033

Can be done when markdownlint/markdownlint#189 is fixed.

Consideration: Using BEM (or a custom variant) to define classes throughout the styleguide

Should be use BEM or a custom variant of it to define classes inside the styleguide or not?
A change like this will require refactoring and might break subthemes!

No Typeahead functionality available

Is it possible to add a typeahead functionality to the library

Changing the way sections define atoms and molecules.

I propose a different approach on how we should let sections define theming for atoms, molecules and organisms.

In this article there is a section called "The block mixin approach".

The idea is that they use a SASS map where they define the colors that themes should override.
They also use a mixin themify() that automatically creates the CSS that components need based on a wrapper class (e.g. the section it's contained in).

This would let us create atoms, molecules and organisms without having to manually change code in the new-sections() mixin each time, thus removing duplicate code and making it easier to maintain the style guide.

It would then be the responsibility of the developer to include the themify() mixin for all properties of a component that need different theming based on the section they are in.
But once this is implemented, the code for all theme variations for that component would be compiled automatically by SASS.

Links inside h-tags should get styling

Currently when a h-tag (h1,... h6) contains a link it will be styled as a link...
This should be part of the heading atoms imo, that when they contain a link, they should style that link the same way as the heading atom it is in.

Add an automated check that checks WCAG2AA compliance

To make sure atoms, molecules, ... are WCAG2AA compliant.

Migrate grunt to gulp

Migration from Grunt to Gulp.