From c547b13465e4a53a58d62c63ada8e15fd7b21321 Mon Sep 17 00:00:00 2001 From: meenu Date: Tue, 28 Mar 2023 20:27:17 +0530 Subject: [PATCH] added component --- colors.ftd | 276 +++++++++++++++++++++++++++++++++ component-lib/lib2.ftd | 2 +- component-lib/lib4.ftd | 2 + pages-done.ftd | 4 +- static/color/card.svg | 21 +++ static/color/card1.svg | 11 ++ static/templates/back-temp.svg | 40 +++++ template-learn.ftd | 151 ++++++++++++++++++ 8 files changed, 504 insertions(+), 3 deletions(-) create mode 100644 colors.ftd create mode 100644 static/color/card.svg create mode 100644 static/color/card1.svg create mode 100644 static/templates/back-temp.svg create mode 100644 template-learn.ftd diff --git a/colors.ftd b/colors.ftd new file mode 100644 index 0000000..4e829db --- /dev/null +++ b/colors.ftd @@ -0,0 +1,276 @@ +-- import: fifthtry.github.io/fastn-ui/lib as ft +-- import: fifthtry.github.io/fastn-ui/assets + + + + + +-- ft.page: Font Library +$show-breadcrum: true + +-- excel-promo-card-bg: + +-- right-image-component-1: + +-- title-img: Anatomy +image: $assets.files.static.color.card.svg + +-- right-image-component-105: + +-- title: CTA Primary Color + +Below are stand alone colors definitions we use. + +-- ft.stages-vertical-image: +image: $assets.files.static.color.card1.svg + +-- ft.stages-vertical-image: +image: $assets.files.static.color.card1.svg + +-- title: Stand Alone Colors + +Below are stand alone colors definitions we use. + +-- ft.stages-vertical-image: +image: $assets.files.static.color.card1.svg + +-- title: Semantic Colors + +Below are stand alone colors definitions we use. + +-- ft.stages-vertical-image: +image: $assets.files.static.color.card1.svg + +-- title: Background Colors + +Below are stand alone colors definitions we use. + +-- ft.stages-vertical-image: +image: $assets.files.static.color.card1.svg + + +-- title: Usage + +Lorem ipsum dolor sit amet consectetur. In arcu arcu tellus ac semper quam. Convallis pellentesque id urna consectetur aliquet faucibus tempor dolor mauris. Enim sed amet at mi massa turpis. Tortor tristique aliquam orci sed convallis. Volutpat arcu augue tortor feugiat. Adipiscing ornare leo quam amet morbi eleifend suscipit. + +-- right-image-component-80: + +-- ft.left-image-component: Select your theme & deploy on Github. +cta-text: Get Started +cta-link: / +cta-role: primary +image: $assets.files.static.illustration.code.svg + +Lorem ipsum dolor sit amet consectetur. In arcu arcu tellus ac semper quam. Convallis pellentesque id urna consectetur aliquet faucibus tempor dolor mauris. Enim sed amet at mi massa turpis. Tortor tristique aliquam orci sed convallis. Volutpat arcu augue tortor feugiat. Adipiscing ornare leo quam amet morbi eleifend suscipit. + +-- excel-promo-card-step1: + +-- ft.footer: + +-- end: ft.page + + + + + + + + + + + +-- component excel-promo-card-bg: +children promo-wrap: + +-- ft.excel-promo-card: Color Library +image: $assets.files.static.color.background.png +bgcolor: $inherited.colors.background.step-2 +center: true +right if {ftd.device == "mobile"} : true +promo-wrap: $excel-promo-card-bg.promo-wrap + +-- ft.excel-promo-card.info: + +At nulla tristique facilisis augue. Lectus diam dignissimerat blandit pellentesque egestas nulla. + +-- end: excel-promo-card-bg + + + + + + + + + + + + + + + + +-- component right-image-component-1: +children child: + +-- ft.right-image-component: Typography +padding-vertical: 150 +bottom: true +child: $right-image-component-1.child + +Lorem ipsum dolor sit amet consectetur. In arcu arcu tellus ac semper quam. Convallis pellentesque id urna consectetur aliquet faucibus tempor dolor mauris. Enim sed amet at mi massa turpis. Tortor tristique aliquam orci sed convallis. Volutpat arcu augue tortor feugiat. Adipiscing ornare leo quam amet morbi eleifend suscipit. + +-- end: right-image-component-1 + + + + + + + + + + + +-- component title-img: +caption title: +ftd.image-src image: + +-- ftd.column: +width: fill-container +align-content: center +padding-vertical.px: 40 +padding-horizontal.px if { ftd.device == "mobile"}: 16 + +-- ftd.column: +spacing.fixed.px: 24 + +-- ftd.text: $title-img.title +role: $inherited.types.heading-medium +color: $inherited.colors.text + +-- ftd.image: +src: $title-img.image +width: auto +width.fixed.px if {ftd.device == "mobile"}: 364 + +-- end: ftd.column + +-- end: ftd.column + +-- end: title-img + + + + + + + + + + +-- component right-image-component-105: +children child: + +-- ft.right-image-component: Color tokens +cta-text: Get Started +cta-link: / +cta-role: primary +padding-vertical: 80 +child: $right-image-component-105.child + +Lorem ipsum dolor sit amet consectetur. In arcu arcu tellus ac semper quam. Convallis pellentesque id urna consectetur aliquet faucibus tempor dolor mauris. Enim sed amet at mi massa turpis. Tortor tristique aliquam orci sed convallis. Volutpat arcu augue tortor feugiat. Adipiscing ornare leo quam amet morbi eleifend suscipit. + +-- end: right-image-component-105 + + + + + + + + + + + + + + +-- component title: +caption title: +optional body body: + +-- ftd.column: +width: fill-container +padding-vertical.px: 50 +padding-horizontal.px: 180 +padding-horizontal.px if { ftd.device == "mobile"}: 16 +spacing.fixed.px: 32 + +-- ftd.text: $title.title +role: $inherited.types.heading-large +color: $inherited.colors.text + +-- ftd.text: +text: $title.body +if: {title.body != NULL} +role: $inherited.types.copy-large +color: $inherited.colors.text-strong + +-- end: ftd.column + +-- end: title + + + + + + + + + + + + +-- component right-image-component-80: +children child: + +-- ft.right-image-component: Select your theme & deploy on Github. +image: $assets.files.static.illustration.code.svg +cta-text: Get Started +cta-link: / +cta-role: primary +padding-vertical: 80 +child: $right-image-component-80.child + +Fastn needs a place to store your content and deploy your site. Most of ours users prefer storing the content on Github and deploying on Github pages. + +-- end: right-image-component-80 + + + + + + + + + + +-- component excel-promo-card-step1: +children promo-wrap: + +-- ft.excel-promo-card: Use it for free and start creating now! +image: $assets.files.static.component.figma-icon.svg +bgcolor: $inherited.colors.background.step-1 +cta-text: Download +cta-link: / +cta-role: primary +top-img: true +left: true +promo-wrap: $excel-promo-card-step1.promo-wrap + +-- ft.excel-promo-card.info: + +Most websites only change colors of background and text when using dark mode, FastN/FTD also lets you use different images for light and dark modes for those who are obsessed with these things as much as we are. + +-- end: excel-promo-card-step1 \ No newline at end of file diff --git a/component-lib/lib2.ftd b/component-lib/lib2.ftd index 2f6be89..d6b73f5 100644 --- a/component-lib/lib2.ftd +++ b/component-lib/lib2.ftd @@ -1960,7 +1960,7 @@ max-width.fixed.px if { !hero-section-desktop.center && !hero-section-desktop.ce max-width.fixed.px if { hero-section-desktop.center-img }: 622 max-width.fixed.px: 715 margin-top.px: 15 -text-align if { hero-section-desktop.bottom || hero-section-desktop.center || hero-section-desktop.center-img}: center +text-align if { hero-section-desktop.center || hero-section-desktop.center-img}: center -- ftd.column: width: fill-container diff --git a/component-lib/lib4.ftd b/component-lib/lib4.ftd index 76c2197..e9dacfd 100644 --- a/component-lib/lib4.ftd +++ b/component-lib/lib4.ftd @@ -724,6 +724,7 @@ optional integer width: children child: -- ftd.column: +width: fill-container -- stages-vertical-image-desktop: if: { ftd.device != "mobile" } @@ -762,6 +763,7 @@ children child: -- ftd.column: width: fill-container max-width.fixed.px: $width +margin-top.px: 25 align-content: center align-self: center diff --git a/pages-done.ftd b/pages-done.ftd index d8c2fda..7dd1df7 100644 --- a/pages-done.ftd +++ b/pages-done.ftd @@ -31,8 +31,6 @@ NOT DONE :- 4. Colors - Dev 5. Component- Dev 9. Documentation Page -14. Colors -18. Template detail page 20. Buttons 21. Headers 22. Other Components @@ -90,6 +88,8 @@ DONE :- (21/03/23) 33. Design System - Learn 12. Icons & Illustration Page 13. Font List page +14. Colors +18. Template detail page -- end: ftd.column diff --git a/static/color/card.svg b/static/color/card.svg new file mode 100644 index 0000000..96be97b --- /dev/null +++ b/static/color/card.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/static/color/card1.svg b/static/color/card1.svg new file mode 100644 index 0000000..033349b --- /dev/null +++ b/static/color/card1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/templates/back-temp.svg b/static/templates/back-temp.svg new file mode 100644 index 0000000..2f26bde --- /dev/null +++ b/static/templates/back-temp.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/template-learn.ftd b/template-learn.ftd new file mode 100644 index 0000000..8c70543 --- /dev/null +++ b/template-learn.ftd @@ -0,0 +1,151 @@ +-- import: fifthtry.github.io/fastn-ui/lib as ft +-- import: fifthtry.github.io/fastn-ui/assets + + + + + +-- ft.page: Templates +$show-breadcrum: true + +-- hero-section-485: + +-- row-container-left: + +-- ft.search-bar: + +-- end: row-container-left + +-- row-container-50: + +-- ft.tabs: Landing Page +index: 1 +$active-item: true + +-- ft.tabs: API & Documentation +index: 2 + +-- ft.tabs: Microsite +index: 3 + +-- ft.tabs: Blogs +index: 4 + +-- end: row-container-50 + +-- column-wrap-1: + +-- ft.display-card: Nextra: Docs Starter Kit +image: $assets.files.static.card.card.svg + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +-- ft.display-card: Nextra: Docs Starter Kit +image: $assets.files.static.card.card.svg + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +-- ft.display-card: Nextra: Docs Starter Kit +image: $assets.files.static.card.card.svg + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +-- ft.display-card: Nextra: Docs Starter Kit +image: $assets.files.static.card.card2.svg + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +-- ft.display-card: Nextra: Docs Starter Kit +image: $assets.files.static.card.card2.svg + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +-- end: column-wrap-1 + +-- ft.footer: + +-- end: ft.page + + + + + + + + + + +-- component hero-section-485: +children childs: + +-- ft.hero-section: Making it easy for you +image: $assets.files.static.templates.back-temp.svg +height: 485 +width: 1160 +bottom: true +childs: $hero-section-485.childs + +-- ft.hero-section.info: Fastn is here to serve to your unique requirements with an easy-to-use platform. At nulla tristique facilisis augue. Lectus diam dignissim. + +-- end: hero-section-485 + + + + + + + + + + +-- component row-container-left: +children row-wrap: + +-- ft.row-container: +align-left: true +padding-vertical: 84 +row-wrap: $row-container-left.row-wrap + +-- end: row-container-left + + + + + + + + + + +-- component row-container-50: +children row-wrap: + +-- ft.row-container: +spacing: 50 +align-left: true +padding-vertical: 75 +row-wrap: $row-container-50.row-wrap + +-- end: row-container-50 + + + + + + + + + + +-- component column-wrap-1: +children wraper: + +-- ft.column-wrap: +wrap: true +height: 1308 +index: 1 +reset: $ft.current-tab +wraper: $column-wrap-1.wraper + +-- end: column-wrap-1 \ No newline at end of file