Did you know we supply great coffee and coffee machines too?
Visit Zilia to enjoy the same great Abevco service for your hot drinks.
Discover the Ice-tastic frozen carbonated
beverages from Blizzard
Sockman uses a responsive grid system based upon the Responsive UI material design guidelines. Out of the box you get 4 columns on mobile, 8 on tablet and 12 on desktop. You get to change the gutters and margins, and can set a max width for the grid. Settings for the layout are in /assets/src/sass/settings/_settings.layout.scss and /inc/class-layout.php. Both files should use the same values, so that the css and image sizes are consistent.
For the layout system, define the spans at columns instead of media queries. E.g. .o-layout__cell--span-4@c8 instead of the usual @w960.
<div class="o-wrapper">
<div class="o-layout">
<div class="o-layout__cell o-layout__cell--span-6"></div>
<div class="o-layout__cell o-layout__cell--span-4"></div>
<div class="o-layout__cell o-layout__cell--span-2 o-layout__cell--span-4@c8"></div>
</div>
</div>Responsive units that scale at breakpoints, and match the sizes of the gutters defined in the layout settings (as described above). You can use different sized units based on these responsive sizes: tiny, small, normal, large, and huge.
To use the units, use the repsonsive-properity and responsive-properties helpers:
@include responsive-property(margin-bottom, small);@include responsive-properties((
padding: small normal
), $until: w960);The responsive-properties helper is preferred as it generates less media-queries, and can accept multiple values for property shorthand syntax.
Sockman starter theme includes an extended version of TimberImage that includes functions to help with generating srcsets and sizes attributes that match the Layout System described above.
{% set img = SockmanImage(image) %}
<img
src="{{ img.src('thumbnail') }}"
alt="{{ img.alt }}"
srcset="{{ img.srcset('thumbnail') }}"
sizes="{{ img.sizes( [
[ 3, 12 ],
[ 2, 8 ],
[ 4, 4 ]
] ) }}"
class="c-imagesize c-imagesize--thumbnail" />img.srcset generates a srcset from all the defined image sizes that match the aspect ratio of the size given. img.sizes takes and array of spans to be used to generate the sizes attribute. For example, [ 3, 12 ] above will span 3 of 12 columns. This function will also create an extra size to account for the max-width at the maximum content size.
Favicons are generated from /assets/src/favicons/appicon.png and /assets/src/favicons/favicon.svg. Use the gulp task favicons to generate all the sizes. The appicon is a larger image used for homescreen icons, whereas favicon should work well at 16x16dp.
All field groups created using ACF are automatically saved in to the acf-json folder, which should be version controlled to keep all fields in sync across team members. The ACF admin is disabled on staging and production and should only be used in development.
Filters, Hooks, Image Sizes, Menus, Custom Post Types, and Taxonomies should be defined in the inc/wp-filters.php, inc/wp-hooks.php, inc/wp-image-sizes.php, inc/wp-menus.php, inc/wp-post-types.php and inc/wp-taxonomies.php files. They are included in inc/class-site.php.
Typography is set to scale at breakpoints, based on the typographic scale and scale-factors defined in _settings.typography.scss. The typography scales relative to the $sockman-font-size-base so as to not get too small.
The typography mixins defined in _tools.typography.scss can also be used to generate type that scales according to the scale-factors, for example @include sockman-scaled-font-sizes(28px, 35px, $important);.
