base

bootstrap   

Copy
Edit
<!-- components/base/bootstrap.php -->
Copy
Copy
Edit
/* scss/base/_bootstrap.scss */ // Required include @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; // Optional include //@import "node_modules/bootstrap/scss/reboot"; //@import "node_modules/bootstrap/scss/type"; //@import "node_modules/bootstrap/scss/images"; //@import "node_modules/bootstrap/scss/code"; @import "node_modules/bootstrap/scss/grid"; //@import "node_modules/bootstrap/scss/root"; //@import "node_modules/bootstrap/scss/tables"; //@import "node_modules/bootstrap/scss/forms"; //@import "node_modules/bootstrap/scss/buttons"; @import "node_modules/bootstrap/scss/transitions"; //@import "node_modules/bootstrap/scss/dropdown"; //@import "node_modules/bootstrap/scss/button-group"; //@import "node_modules/bootstrap/scss/input-group"; @import "node_modules/bootstrap/scss/custom-forms"; @import "node_modules/bootstrap/scss/nav"; //@import "node_modules/bootstrap/scss/navbar"; //@import "node_modules/bootstrap/scss/card"; //@import "node_modules/bootstrap/scss/breadcrumb"; //@import "node_modules/bootstrap/scss/pagination"; //@import "node_modules/bootstrap/scss/badge"; //@import "node_modules/bootstrap/scss/jumbotron"; //@import "node_modules/bootstrap/scss/alert"; //@import "node_modules/bootstrap/scss/progress"; //@import "node_modules/bootstrap/scss/media"; //@import "node_modules/bootstrap/scss/list-group"; //@import "node_modules/bootstrap/scss/close"; //@import "node_modules/bootstrap/scss/toasts"; //@import "node_modules/bootstrap/scss/modal"; @import "node_modules/bootstrap/scss/tooltip"; //@import "node_modules/bootstrap/scss/popover"; //@import "node_modules/bootstrap/scss/carousel"; @import "node_modules/bootstrap/scss/spinners"; @import "node_modules/bootstrap/scss/utilities"; @import "node_modules/bootstrap/scss/print"; /* responsive xs: <576px sm: ≥576px md: ≥768px lg: ≥992px xl: ≥1200px Max width: @include media-breakpoint-down(sm) Min width: @include media-breakpoint-up(sm) Min and max width: @include media-breakpoint-between(sm, md) */ .big-gutter { margin-left: -2rem; margin-right: -2rem; @include media-breakpoint-down(md) { margin-left: -15px; margin-right: -15px; } & > [class*="col-"], & > .col { padding-left: 2rem; padding-right: 2rem; @include media-breakpoint-down(md) { padding-left: 15px; padding-right: 15px; } } } /* document offset viewport */ $doc-offset: 25px; .container { @include media-breakpoint-down(xs) { $doc-offset: 20px; padding-left: $doc-offset; padding-right: $doc-offset; } }

fonts   

Heading font (Montserat Bold)

Paragraph font (Muli Regular)

Paragraph font bold (Muli Bold)

Copy
Edit
<!-- components/base/fonts.php --> <p class="text-headings text-bold">Heading font (Montserat Bold)</p> <p class="text-default">Paragraph font (Muli Regular)</p> <p class="text-default text-bold">Paragraph font bold (Muli Bold)</p>
Copy
Copy
Edit
/* scss/base/_fonts.scss */ $font-family-default: 'Muli', sans-serif; $font-family-headings: 'Montserrat', sans-serif;; $font-size-default: 16px; $font-weight-default: 400; $line-height-default: 1.625; /* text utilities */ .text-heading { font-family: $font-family-headings !important; } .text-default { font-family: $font-family-default !important; } .nowrap { white-space: nowrap; }

colors   

Default color (#575750)

Primary color (#ffaf40)

Secondary color (#212116)

Success color (#15CD72)

Warning color (#ffba00)

Danger color (#e0455e)

Info color (#4bb1cf)

Grey color 100 (#f0f0e6)

Grey color 200 (#e0dbd1)

Grey color 300 (#808076)

Grey color 400 (#575750)

Grey color 500 (#212116)

White color (#fff)

Black color (#000)

Copy
Edit
<!-- components/base/colors.php --> <p class="text-default">Default color (#575750)</p> <p class="text-primary">Primary color (#ffaf40)</p> <p class="text-secondary">Secondary color (#212116)</p> <p class="text-success">Success color (#15CD72)</p> <p class="text-warning">Warning color (#ffba00)</p> <p class="text-danger">Danger color (#e0455e)</p> <p class="text-info">Info color (#4bb1cf)</p> <p class="text-grey-100">Grey color 100 (#f0f0e6)</p> <p class="text-grey-200">Grey color 200 (#e0dbd1)</p> <p class="text-grey-300">Grey color 300 (#808076)</p> <p class="text-grey-400">Grey color 400 (#575750)</p> <p class="text-grey-500">Grey color 500 (#212116)</p> <p class="text-white">White color (#fff)</p> <p class="text-black">Black color (#000)</p>
Copy
Copy
Edit
/* scss/base/_colors.scss */ $grey-100-color: #f4f4f4; $grey-200-color: #e0e0e0; $grey-300-color: #a5a6a8; $grey-400-color: #808080; $grey-500-color: #202020; $white-color: #fff; $black-color: #000; //$primary-color: #e3a83a; $primary-color: #ffaf40; $secondary-color: #1f2125; $default-color: $secondary-color; $success-color: #155724; $success-color-light: #d4edda; $warning-color: #856404; $warning-color-light: #ffeeba; $danger-color: #721c24; $danger-color-light: #f8d7da; $info-color: #2f7c93; $info-color-light: #d3eef5; $green-color: #15CD72; $red-color: #d22121; $yellow-color: #cdad15; $body-background-color: $white-color; /* colors utilities */ .text-default { color: $default-color !important; } .text-primary { color: $primary-color !important; } .text-secondary { color: $secondary-color !important; } .text-success { color: $success-color !important; } .text-warning { color: $warning-color !important; } .text-danger { color: $danger-color !important; } .text-info { color: $info-color !important; } .text-grey-100 { color: $grey-100-color !important; } .text-grey-200 { color: $grey-200-color !important; } .text-grey-300 { color: $grey-300-color !important; } .text-grey-400 { color: $grey-400-color !important; } .text-grey-500 { color: $grey-500-color !important; } .text-white { color: $white-color !important; } .text-black { color: $black-color !important; } .text-red { color: $red-color !important; } .text-green { color: $green-color !important; } .text-yellow { color: $yellow-color !important; } .text-muted { color: $grey-400-color !important; }

normalize   

Copy
Edit
<!-- components/base/normalize.php -->
Copy
Copy
Edit
/* scss/base/_normalize.scss */ *, *::before, *::after { box-sizing: border-box; } /* document */ html { font-family: $font-family-default; font-size: $font-size-default; line-height: $line-height-default; @include media-breakpoint-down(md) { font-size: 15px; } } body { margin: 0; padding: 0; font-family: $font-family-default; font-size: 1rem; font-weight: $font-weight-default; line-height: $line-height-default; color: $default-color; text-align: left; background-color: $body-background-color; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } /* typography */ h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin: 0; padding: 0; } ol ol, ul ul, ol ul, ul ol { margin-top: 1.5rem; margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: 700; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1rem; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; } hr { box-sizing: content-box; height: 0; overflow: visible; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } label { display: inline-block; } button { border-radius: 0; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none } [hidden] { display: none !important; }

section   

Copy
Edit
<!-- components/base/section.php -->
Copy
Copy
Edit
/* scss/base/_section.scss */ .section { position: relative; margin: 5rem 0; @include media-breakpoint-down(md) { margin: 4rem 0; } @include media-breakpoint-down(xs) { margin: 3rem 0; } &.section--event { @include media-breakpoint-down(md) { margin-bottom: 5rem; } @include media-breakpoint-down(sm) { margin-bottom: 4rem; } } &.section--reservation { padding: 2.25rem 0; overflow: hidden; } &.section--reservation-frm { padding: 0 0 2.25rem; } &.section--medallion { padding: 3rem 0; overflow: hidden; @include media-breakpoint-down(sm) { padding: 1.875rem 0; } } &.section--map { background: url("../img/sections/map-pin.png") repeat-x center top; margin-bottom: 0; padding: 6.125rem 0; position: relative; @include media-breakpoint-down(md) { padding: 5rem 0; background-position: center top -60px; } @include media-breakpoint-down(sm) { background: url("../img/sections/map.jpg") repeat-x center top; } &::after { content: ""; background: linear-gradient(0deg, rgba(255,255,255,1) 24%, rgba(243,243,244,0) 100%); display: block; height: 220px; bottom: -1px; left: 0; right: 0; position: absolute; z-index: 0; } } &.section--detail { @include media-breakpoint-down(md) { margin-top: -3rem; } @include media-breakpoint-down(xs) { margin-top: -1rem; } } &.section--cart { background-color: $grey-100-color; margin: 0 $doc-offset $doc-offset $doc-offset; padding: 5.5rem $doc-offset; @include media-breakpoint-down(md) { padding: 4rem $doc-offset; } @include media-breakpoint-down(xs) { $doc-offset: 20px; margin: 0 $doc-offset $doc-offset $doc-offset; padding: 2.5rem 5px; } } } .section__sideicon > svg { color: $grey-100-color; fill: $grey-100-color; width: 40vw; height: 40vw; left: -20vw; top: 450px; position: absolute; z-index: -1; @include media-breakpoint-down(lg) { top: 400px; } @include media-breakpoint-down(md) { top: 200px; } } /* reset container width */ @media (min-width: 1300px) { .container { /* max-width: 1140px; */ max-width: 1230px; } } @media (min-width: 991px) { .container--narrow { max-width: 980px; } }