Skip to content

Commit 41fda4c

Browse files
author
Sharique Farooqui
committed
Adding new layout without foundation.
1 parent 32d7f54 commit 41fda4c

File tree

8 files changed

+1415
-2195
lines changed

8 files changed

+1415
-2195
lines changed

‎assets/styles/app.scss

Lines changed: 9 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,12 @@
11
@import 'variables.scss';
2-
@import '~foundation-sites/scss/foundation';
3-
4-
/// include all modules of foundation
5-
// @include foundation-everything(true);
6-
7-
/// or use just particular modules
8-
// Global styles
9-
@include foundation-global-styles;
10-
@include foundation-forms;
11-
@include foundation-typography;
12-
13-
// Grids (choose one)
14-
@include foundation-xy-grid-classes;
15-
// @include foundation-grid;
16-
// @include foundation-flex-grid;
17-
18-
// Generic components
19-
@include foundation-button;
20-
@include foundation-button-group;
21-
@include foundation-close-button;
22-
@include foundation-label;
23-
@include foundation-progress-bar;
24-
@include foundation-slider;
25-
@include foundation-switch;
26-
@include foundation-table;
27-
// Basic components
28-
@include foundation-badge;
29-
@include foundation-breadcrumbs;
30-
@include foundation-callout;
31-
@include foundation-card;
32-
@include foundation-dropdown;
33-
@include foundation-pagination;
34-
@include foundation-tooltip;
35-
36-
// Containers
37-
// @include foundation-accordion;
38-
// @include foundation-media-object;
39-
// @include foundation-orbit;
40-
// @include foundation-responsive-embed;
41-
// @include foundation-tabs;
42-
// @include foundation-thumbnail;
43-
44-
// Menu-based containers
45-
@include foundation-menu;
46-
@include foundation-menu-icon;
47-
@include foundation-accordion-menu;
48-
@include foundation-drilldown-menu;
49-
@include foundation-dropdown-menu;
50-
51-
// Layout components
52-
@include foundation-off-canvas;
53-
@include foundation-reveal;
54-
@include foundation-sticky;
55-
@include foundation-title-bar;
56-
@include foundation-top-bar;
2+
@import 'layout.scss';
3+
@import './custom.scss';
574

58-
// Helpers
59-
@include foundation-float-classes;
60-
// @include foundation-flex-classes;
61-
@include foundation-visibility-classes;
62-
// @include foundation-prototype-classes;
5+
// Navigation
636

64-
@import './custom.scss';
7+
nav {
8+
ul {
9+
display: flex;
10+
list-style: none;
11+
}
12+
}

‎assets/styles/custom.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
h1, h2, h3 {
1+
h1,
2+
h2,
3+
h3 {
24
font-weight: bold;
35
}
46

@@ -18,6 +20,6 @@ main {
1820
padding: $global-padding;
1921
}
2022

21-
.menu{
23+
.menu {
2224
font-weight: 500;
23-
}
25+
}

‎assets/styles/foundation.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import '~foundation-sites/scss/foundation';
2+
3+
/// include all modules of foundation
4+
// @include foundation-everything(true);
5+
6+
/// or use just particular modules
7+
// Global styles
8+
@include foundation-global-styles;
9+
@include foundation-forms;
10+
@include foundation-typography;
11+
12+
// Grids (choose one)
13+
@include foundation-xy-grid-classes;
14+
// @include foundation-grid;
15+
// @include foundation-flex-grid;
16+
17+
// Generic components
18+
@include foundation-button;
19+
@include foundation-button-group;
20+
@include foundation-close-button;
21+
@include foundation-label;
22+
@include foundation-progress-bar;
23+
@include foundation-slider;
24+
@include foundation-switch;
25+
@include foundation-table;
26+
// Basic components
27+
@include foundation-badge;
28+
@include foundation-breadcrumbs;
29+
@include foundation-callout;
30+
@include foundation-card;
31+
@include foundation-dropdown;
32+
@include foundation-pagination;
33+
@include foundation-tooltip;
34+
35+
// Containers
36+
// @include foundation-accordion;
37+
// @include foundation-media-object;
38+
// @include foundation-orbit;
39+
// @include foundation-responsive-embed;
40+
// @include foundation-tabs;
41+
// @include foundation-thumbnail;
42+
43+
// Menu-based containers
44+
@include foundation-menu;
45+
@include foundation-menu-icon;
46+
@include foundation-accordion-menu;
47+
@include foundation-drilldown-menu;
48+
@include foundation-dropdown-menu;
49+
50+
// Layout components
51+
@include foundation-off-canvas;
52+
@include foundation-reveal;
53+
@include foundation-sticky;
54+
@include foundation-title-bar;
55+
@include foundation-top-bar;
56+
57+
// Helpers
58+
@include foundation-float-classes;
59+
// @include foundation-flex-classes;
60+
@include foundation-visibility-classes;
61+
// @include foundation-prototype-classes;

‎assets/styles/layout.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@media screen and (min-width: 640px){
2+
.container {
3+
display: flex;
4+
}
5+
}
6+
7+
.content {
8+
flex: 4;
9+
}
10+
.sidebar {
11+
flex: 1;
12+
}
13+
14+
.wrapper {
15+
margin: auto;
16+
max-width: 75rem;
17+
}

‎assets/styles/variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ $fifth:#E0D8DE;
99
$topbar-background:$fifth;
1010

1111
$body-font-family: 'Source Sans Pro', 'Noto Sans', Roboto, Arial, sans-serif !default;
12+
13+
$global-padding: 5px;

0 commit comments

Comments
 (0)