added component

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

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

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
 

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