page: txp5
form: feature
StylePattern
Core styling library
Authors of new admin themes can either use core as the basis for their styling, or they can cherry-pick core partials for their own scss; from least-specific (higher in the cascade) to more-specific (lower in the cascade), or anywhere in-between.
Partials are designed to be flexible, and cope when additional html nodes are added.
SASS directories & naming
The folder structure has alphabetical sorting for consistent display in Finder, IDE s, and uses a combination of ITCSS methodology and Atomic Design principles.
/admin-themes/core/
scss
0-settings
0_debug.scss includes container-query breakpoint visualisation
s-config.scss variables
s-colours.scss named colour palette to simply development
s-mixins.scss no output
1-base
b_reset.scss normalise, turn everything into lego bricks
b_common.scss unclassed html
b_typeset.scss unclassed html within a classed container
2-atoms classed textpattern components start here
3-molecules
4-organisms
css
core.css for direct user manipulation
core-min.css optional, saves 2 or 3 kB
/admin-themes/five
layout starts
scss
0-settings
s-config.scss optional overrides to core
s-colours.scss optional overrides to core
s-mixins.scss optional overrides to core
1-base
b_reset.scss optional overrides to core
b_common.scss optional overrides to core
b_typeset.scss optional overrides to core
2-atoms
3-molecules
4-organisms
5-layout
five.css
/admin-themes/hive
4.9 should behave?
/admin-themes/phive
Hive v5
/admin-themes/jekyll
etc
/admin-themes/coatings/
skinning variants
0-settings
form: thumb_scss_styleguide
_config.scss
form: thumb_scss_styleguide
_colours.scss
form: thumb_scss_styleguide
_debug.scss
form: thumb_scss_styleguide
_mixins.scss
1-base
form: thumb_scss_styleguide
_body.scss
form: thumb_scss_styleguide
_details.scss
form: thumb_scss_styleguide
_forms.scss
form: thumb_scss_styleguide
_reset.scss
form: thumb_scss_styleguide
_tables.scss
form: thumb_scss_styleguide
_typeset.scss
2-atoms
form: thumb_scss_styleguide
_beam.scss
form: thumb_scss_styleguide
_close.scss
form: thumb_scss_styleguide
_icon.scss
form: thumb_scss_styleguide
_jqui.scss
form: thumb_scss_styleguide
_nav-tertiary.scss
form: thumb_scss_styleguide
_prev-next.scss
form: thumb_scss_styleguide
_txp-actions.scss
form: thumb_scss_styleguide
_txp-footer.scss
3-molecules
form: thumb_scss_styleguide
_com-image.scss
form: thumb_scss_styleguide
_dropdown.scss
form: thumb_scss_styleguide
_form-field.scss
form: thumb_scss_styleguide
_messagepane.scss
form: thumb_scss_styleguide
_txp-details.scss
form: thumb_scss_styleguide
_txp-details.scss
form: thumb_scss_styleguide
_txp-save-zone.scss
form: thumb_scss_styleguide
_txp-search.scss
4-organisms
form: thumb_scss_styleguide
_dialog.scss
form: thumb_scss_styleguide
_header.scss