Styling - Revision history

Ablewhite: /* Example */

2021-11-09T22:54:16Z

Example

← Older revision		Revision as of 22:54, 9 November 2021
Line 73:		Line 73:
	This could be defined with the following markup:		This could be defined with the following markup:

	<~~pre~~>		<syntaxhighlight lang="html" line="1">
	<nav className="foobar">		<nav className="foobar">
	<ul className="menu">		<ul className="menu">
Line 102:		Line 102:
	</ul>		</ul>
	</nav>		</nav>
	</~~pre~~>		</syntaxhighlight>


	Corresponding styles could then be defined as:		Corresponding styles could then be defined as:

	<~~pre~~>		<syntaxhighlight lang="scss" line="1">
	$menu_background: #000;		$menu_background: #000;
	$menu_foreground: #fff;		$menu_foreground: #fff;
Line 154:		Line 155:
	}		}
	}		}
	</~~pre~~>		</syntaxhighlight>

	* Defining variables for values which are used in multiple instances (or which are likely to change) allows for easier editing		* Defining variables for values which are used in multiple instances (or which are likely to change) allows for easier editing

Ablewhite at 22:53, 9 November 2021

2021-11-09T22:53:30Z

← Older revision		Revision as of 22:53, 9 November 2021
Line 23:		Line 23:
	All styling within SocialStack should aim to be responsive and mobile-first (i.e., start with mobile-specific styling and layer other device / resolution overrides on top as necessary). As SocialStack uses the Bootstrap framework by default (https://getbootstrap.com/docs), we can utilise Bootstrap SASS mixins to target specific breakpoints. For instance, the following example will cause the component to show a green background for mobile devices, switching to red when viewed on anything 768px wide or above (defined by the Bootstrap medium or <code>md</code> breakpoint):		All styling within SocialStack should aim to be responsive and mobile-first (i.e., start with mobile-specific styling and layer other device / resolution overrides on top as necessary). As SocialStack uses the Bootstrap framework by default (https://getbootstrap.com/docs), we can utilise Bootstrap SASS mixins to target specific breakpoints. For instance, the following example will cause the component to show a green background for mobile devices, switching to red when viewed on anything 768px wide or above (defined by the Bootstrap medium or <code>md</code> breakpoint):

	<~~pre~~>		<syntaxhighlight lang="scss" line="1">
	.foobar {		.foobar {
	background: green;		background: green;
Line 33:		Line 33:
	}		}
	}		}
	</~~pre~~>		</syntaxhighlight>

	This resolves to:		This resolves to:

	<~~pre~~>		<syntaxhighlight lang="css" line="1">
	.foobar {		.foobar {
	background: green;		background: green;
Line 47:		Line 47:
	}		}
	}		}
	</~~pre~~>		</syntaxhighlight>

	Please refer to https://getbootstrap.com/docs/5.1/layout/breakpoints/ for details on which other breakpoints are available.		Please refer to https://getbootstrap.com/docs/5.1/layout/breakpoints/ for details on which other breakpoints are available.

Ablewhite: Introduction to styling in SocialStack

2021-11-09T22:26:42Z

Introduction to styling in SocialStack

Show changes

Ablewhite: Created page with "Introduction All styling within SocialStack uses SASS (https://sass-lang.com/guide). As this is a superset of CSS, any valid CSS can be used, but it's worth taking the time t..."

2021-11-09T21:45:15Z

Created page with "Introduction All styling within SocialStack uses SASS (https://sass-lang.com/guide). As this is a superset of CSS, any valid CSS can be used, but it's worth taking the time t..."

New page

Introduction

All styling within SocialStack uses SASS (https://sass-lang.com/guide). As this is a superset of CSS, any valid CSS can be used, but it's worth taking the time to get to grips with SASS syntax and the built-in functions it provides, as these can both save time and improve the readability of your styles. Please note, SocialStack uses SCSS syntax rather than the old SASS indented syntax (see https://sass-lang.com/documentation/syntax).

Filename conventions

All SASS stylesheets within a SocialStack project are combined and included within the resulting site. Changing the order in which these files are combined (and thus potentially affecting the cascade, causing overlapping rules to be overridden or not) can be done by adding a value from 1-100 within the filename itself, e.g. foobar.50.scss (SCSS files without a value default to a level of 100).

Styles which include definitions which should be available to the entire project (e.g. SASS variables, mixins, etc) should be prefixed with "global.", e.g. global.variables.scss.

There's no need to minify your styling as this is handled by the compiler.

Theme styling

[TODO] Styles can be defined at both the theme and component level - theme styles are global and available throughout the SocialStack site.

Component styling

Each SocialStack component includes optional styling - for instance, running socialstack generate UI/FooBar in a SocialStack project folder will create both UI/FooBar/FooBar.js for the component itself, along with UI/FooBar/FooBar.scss - this can then be used to define component-specific styling.