stadgent / fractal_styleguide_gent-base-archive Goto Github PK

It should probably be content-box

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

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

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

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.

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!

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

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

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.

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.

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

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/

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

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

Is it possible to add a typeahead functionality to the library

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

Migration from Grunt to Gulp.