def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
# For the showing of this example, the parameters in the column div are hard coded.
# Normally a components should allow access to many of the attributes through the
# class dictionary cls.BLUEPRINT, which is a BluePrint instance.
# See the example “HelloWorldBluePrint” for how this works.
b.div(class_=self.getClassName(), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
color=Color('orange'), # Translate HTML/CSS color to more reliable herx value.
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300, backgroundcolor=Color('#222'),
padding=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(4), textalign=self.C.CENTER,
lineheight=Em(1.4))
b.text('Hello world.')
b._div()
b.div(class_='caption', color=Color('#888'), margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70), # Width of 70%
maxwidth=700, minwidth=300,
paddingleft=Em(0.5), fontfamily=BODYFAMILY, fontsize=Em(0.8), textalign=self.C.CENTER,
lineheight=Em(1.4), fontstyle=self.C.ITALIC)
b.text('Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
def buildBlock(self, b):
b.div(class_='navigation',
paddingleft=Em(2),
paddingright=Em(2),
paddingtop=Em(2),
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(1.5),
color=Color('#478FBE'))
b.text(article.title)
b._a()
if article.summary:
b.div(class_='articleSummary',
fontsize=Em(1),
lineheight=Em(1.5),
width=Perc(90))
b.text(article.summary)
b._div()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
def baseStyle(self):
s = self.newStyle() # Answer root style without selector
s.addStyle('body',
fontfamily=self.BODYFAMILY,
fontsize=self.BODYSIZE,
color=self.BODYCOLOR,
lineheight=self.BODYLEADING)
s.addStyle('a', color=self.LINKCOLOR)
s.addStyle('h1, h2, h3, h4, h5, p.lead',
fontfamily=self.HEADFAMILY,
color=self.BODYCOLOR)
s.addStyle('h1',
fontsize=self.H1SIZE,
lineheight=self.H1LINEHEIGHT,
color=self.H1COLOR,
margintop=self.H1MARGINTOP,
marginbottom=self.H1MARGINBOTTOM)
s.addStyle('h2',
fontsize=self.H2SIZE,
lineheight=self.H2LINEHEIGHT,
color=self.H2COLOR,
margintop=self.H2MARGINTOP,
marginbottom=self.H2MARGINBOTTOM)
s.addStyle('h6', fontfamily=self.BODYFAMILY)
s.addStyle('code',
fontfamily=self.CODEFAMILY,
fontsize=Em(1.1),
color=Color('#333'),
paddingleft=Em(0.25),
paddingright=Em(0.25))
s.addStyle('pre', margintop=0, marginbottom=Em(1.5))
s.addStyle('row', color=self.ROWCOLOR)
s.addStyle('.error', color='red', backgroundcolor=Color('red'))
return s
def buildBlock(self, b):
s = self.style
data = self.adapter.getMenu(id='home') # Get data for home page from adapter.
b.block(self) # div.mobileNavigation
b.div(class_=(self.C.CLASS_CONTAINER, self.className), display=s.display,
backgroundcolor=s.backgroundColor, width=s.width,
marginleft=s.marginLeft, marginright=s.marginRight,
paddingleft=s.paddingLeft, paddingright=s.paddingRight,
media=(
Media(max=self.C.M_MOBILE_MAX, display=s.displayMobile),
)
)
b.snippet(self, 'navigation-mobile') # Allow PHP to create a snippet file from this block.
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass, width=self.C.AUTO, float=self.C.NONE, marginleft=Em(0.5),
marginright=Em(0.5), paddingleft=Em(0.5), paddingright=Em(0.5))
b.div(id=self.C.ID_MOBILENAVWRAP, width=s.navWidth, display=s.navDisplay, zindex=s.navZIndex)
b.div(id=self.C.ID_MENUICON, class_=self.C.CLASS_MENU, color=Color(self.C.WHITE),
height=26, width=56, paddingtop=Em(0.6), cursor='pointer',
display=self.C.INLINEBLOCK, marginright=0, top=0, left=0, fontsize=Px(13))
b.img(src=s.menuIconUrl,
padding=0, margin=0, verticalalign=self.C.MIDDLE, maxwidth=Perc(50), height=self.C.AUTO)
b._div(comment='#'+self.C.ID_MENUICON) # #menu-icon
if data.menuItems is None:
b.error('No items in the adapter')
else:
b.ul(id=self.C.ID_NAV, backgroundcolor=s.menuListBackgroundColor,
display=self.C.NONE, clear=self.C.BOTH, position=self.C.ABSOLUTE, top=s.menuHeight-5,
width=Perc(100), zindex=Z(2000), padding=0, margin=0, liststyletype=self.C.NONE, left=0,
textalign=self.C.CENTER)
homeArticle = self.adapter.getArticle(id='home')
for menuId in TX.commaSpaceString2WordList(homeArticle.menu):
menuArticle = self.adapter.getArticle(id=menuId)
url = menuArticle.url
if url is None:
url = '/%s-%s' % (self.C.PARAM_ARTICLE, menuId)
b.li(fontsize=s.listFontSize, paddingtop=Em(1.2), width=Perc(100), liststyletype=self.C.NONE,
borderbottom=Border('1 solid white'), height=36, backgroundcolor=Color('#4890BC'))
b.a(href=url, color=Color('#E8E8E8'))
b.text(menuArticle.name or 'Untitled') # Show full name, otherwise use b.text(menu.tag or menu.name)
b._a()
b._li()
b._ul()
b._div(comment=self.C.ID_MOBILENAVWRAP)
#b.a(href='/home', color='#E8E8E8')
#b.text('Doing by Design')
#b._a()
b._div(comment=self.C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._snippet(self) # In case PHP saved this block as snippet.
b._div() # Final comment is automatic from component.selector
b._block(self) # div.mobileNavigation
def baseComponents(self):
# Import current example site, as anchor for the article files.
from xierpa3.sites import doingbydesign
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(doingbydesign) + '/files/articles/'
adapter = DbDAdapter(
articleRoot) # Preferred adapter class for articles in this site.
logo = Logo(text='Doing by Design',
fontFamily='Impact',
color=Color('#888'),
fontSize=Em(1.8))
menu = Menu()
mobileNavigation = DbDMobileNavigation()
article = Article()
featuredByImage = FeaturedByImage(start=0,
width=Perc(65.4),
showTitle=False,
showHeadline=False,
showTopic=False)
featuredByText = FeaturedByText(start=0, width=Perc(30.75))
# Containers
top = Top(components=(logo, menu),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
featured = Featured(components=(featuredByImage, featuredByText),
backgroundColor=Color('#262c37'))
section = Section(components=(featuredByImage, ))
mainContent = MainContent(components=article)
footer = Footer(components=(menu))
homePage = Page(name=self.C.TEMPLATE_INDEX,
components=(mobileNavigation, top, featured, section,
mainContent, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
articlePage = Page(name=self.C.TEMPLATE_ARTICLE,
comoonents=(mobileNavigation, top, article, footer),
css=self.C.URL_CSS,
fonts=self.C.URL_FONTS,
js=self.URL_JAVASCRIPT,
favicon=self.C.URL_FAVICON,
adapter=adapter)
return [homePage, articlePage]
def buildBlock(self, b):
b.div(class_='navigation',
marginbottom=Em(2),
width=Perc(100),
backgroundcolor=Color('#EEE'))
for article in self.adapter.getRankedArticles():
if article.title:
b.a(href='/article-%s' % article.id,
fontsize=Em(0.8),
color=Color('#888'))
b.text(article.title)
b._a()
else:
b.text('No title for article "%s"' % article.id)
b.br()
b._div()
class Top(Container):
BLUEPRINT = BluePrint(
MobileNavigation.BLUEPRINT,
# Layout alternatives
backgroundColor=Color('#fff'),
doc_backgroundColor='Top background color.',
)
def buildBlock(self, b):
u"""Build a content base class. Inherited by specific HelloWorld... classes
that define the method <b>self.helloWorldText(b). In this example the CSS parameter
are still defined inside the block. Different from the real usage of BluePrint API parameter,
that allow modification from including components or inheriting components."""
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width='70%',
maxwidth=700,
minwidth=300,
backgroundcolor='#222',
padding=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(4),
textalign=self.C.CENTER,
lineheight=Em(1.4))
self._helloWorldText(b)
b._div()
b.div(class_=self.C.CLASS_CAPTION,
color=Color('#888'),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(70),
maxwidth=700,
minwidth=300,
paddingleft=Em(0.5),
fontfamily=BODYFAMILY,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC)
b.text(
'Intentionally non-responsive page example. Generated by Xierpa3.')
b._div()
class FeaturedByTextList(FeaturedBase):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
BLUEPRINT = BluePrint(
# Selection stuff
start=0,
count=6, # Index of first and last selected feature for this component
# Layout stuff
colWidth=4, # Default amount of columns for this component
# Category stuff in h5
categoryColor=Color('#828487'), categorySize=Em(0.9), categoryLineHeight=Em(1.2),
categoryWeight=C.NORMAL, categoryMarginTop=Em(1), categoryDisplay=C.BLOCK,
# Name stuff in h2
nameColor=Color('#4080D0'), nameSize=Em(1.4), nameWeight=C.NORMAL, nameDisplay=C.BLOCK,
nameMarginBottom=Em(0.2), nameMarginTop=Em(0.2), nameLineHeight=Em(1.2),
# Topic stuff
topicColor=Color('#202020'),
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2), mobilePaddingBottom=Em(0.5), mobilePaddingLeft=Em(0.5), mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2), mobileMarginBottom=Em(0.5), mobileMarginLeft=Em(0.5), mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
)
def buildFeatured(self, b, data):
s = self.style
for item in data.items:
if item.category:
b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, item.category), class_=self.C.CLASS_CATEGORYTHUMB)
b.h5(fontsize=s.categorySize, fontweight=s.categoryWeight, lineheight=s.categoryLineHeight,
color=s.categoryColor, margintop=s.categoryMarginTop, display=s.categoryDisplay)
b.text(item.category)
b._h5()
b._a()
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, item.id), class_=self.C.CLASS_NAME)
b.h2(fontsize=s.nameSize, fontweight=s.nameWeight, lineheight=s.nameLineHeight,
color=s.nameColor, marginbottom=s.nameMarginBottom, display=s.nameDisplay,
margintop=s.nameMarginTop)
b.text(item.name)
b._h2()
b._a()
if isinstance(item.topic, basestring):
b.text(item.topic)
elif item.topic is not None: # Test on element. Topic elements need to be defined in global style.
self.buildElement(b, item.topic)
def demoSvgDrawing2(self, b):
# Draw a responsive image in SVG
#b.div(class_='svgDemo', display=C.NONE, margintop=Em(0.5), marginbottom=Em(0.5),
# media=Media(max=C.M_MOBILE_MAX, display=C.BLOCK))
s = self.style
b.svg(width=s.width, height=s.height)
b.rect(width=Perc(100), height=100, fill=Color('cyan'))
b.rect(y=100, width=Perc(100), height=150, fill=Color('green'))
# Polygons don't work in %, so they cannot be positioned responsive to the container width
b.rect(x=Perc(5),
y=20,
width=Perc(8),
height=200,
fill=Color('yellow'),
fillopacity=0.5)
b.filter('blur', blur=4)
b.rect(x=Perc(20),
y=20,
width=Perc(5),
height=200,
fill=Color('yellow'))
b._filter()
# Neon
b.filter('neon')
b.rect(x=Perc(35),
y=20,
rx=12,
ry=12,
width=32,
height=200,
fill=self.C.NONE,
stroke='red',
strokewidth=6)
b._filter()
b.filter('neon')
b.rect(x=Perc(50),
y=20,
rx=16,
ry=16,
width=32,
height=200,
fill=self.C.NONE,
fillopacity=0.5,
stroke=Color('blue'),
strokewidth=20)
b._filter()
b.filter('frozenLiquid'
) # @@@ Should not change the overall color of the image.
b.rect(x='68%',
y=20,
rx=16,
ry=16,
width=32,
height=200,
fill=Color('#D0D0D0'),
fillopacity=0.5,
stroke=Color('blue'),
strokewidth=20)
b._filter()
b._svg()
def _helloWorldText(self, b):
b.div(
color=Color('#00FF00')
) # Show the text on this page in another color, to visualize the difference.
# TODO: Needs to clean up. JSON example goes to separate example site.
b.a(href='/ajax/font-MyFont')
b.text('Hello, world on another page using MyFont')
b._a()
b._div()
def baseStyle(self):
u"""Answer the single basis style that will be defined as overall CSS, before
specific block definitions start."""
root = self.newStyle() # Create root style
root.addStyle(
'body',
backgroundcolor=Color(self.C.WHITE),
# TODO: GLOBAL MEDIA SETTING DOES NOT WORK YET: media=Media(max=self.M_MOBILE_MAX, backgroundcolor='orange')
)
return root
def buildColumn(self, b):
u"""Build the article column. The article data is derived from the adapter by matching with the hard coded url pattern
(@$url@ field in the article source) or with the @b.getCurrentArticleId()@, which is @/article-[articleId]@ in the
url of the page."""
s = self.style
article = self.adapter.getArticle(id=b.getCurrentArticleId(),
url=b.e.path)
b.div(
class_=self.getClassName(),
width=s.width,
float=self.C.LEFT,
paddingRight=s.
gutter, #marginright=s.gutter, # Gutter between main column and article side bar.
paddingleft=Em(2),
paddingtop=Em(2),
paddingright=Em(2),
backgroundcolor=Color('#fff'),
marginright=0,
media=Media(max=self.C.M_MOBILE_MAX,
width=self.C.AUTO,
float=self.C.NONE,
paddingleft=Em(1),
paddingright=Em(1),
paddingtop=Em(1),
marginright=0),
)
if article is None:
# If not article defined, then this must be a call for building the CSS.
# Make the switch to run as style builder.
self.buildArticleStyle(b)
else:
self.buildArticleData(b, article)
# Build blog response form, if required.
if s.blogResponse and article is not None and article.blogresponse == 'True':
b.div(class_=self.C.CLASS_BLOGRESPONSE,
width=Perc(100),
backgroundcolor=Color('#888'))
# TODO: Add blog response form here.
b.text('[Develop Blog Response here] ' * 20)
b._div(comment=self.C.CLASS_BLOGRESPONSE)
b._div()
def buildBlock(self, b):
b.div(class_=self.getClassName(),
margin=Margin(0, self.C.AUTO, 0, self.C.AUTO),
width=Perc(40),
maxwidth=700,
minwidth=300,
backgroundcolor=Color('#DDD'),
padding=Em(0.5),
fontfamily=BODYFAMILY,
textalign=self.C.CENTER)
# Still doing content and page identifiers directly, without adapter, in this example.
b.text(' | ')
for pageId in HelloWorldPages.PAGES:
# Making a reference to the page class is enough to build the url.
b.a(href='/' + pageId, fontsize=Em(1), color=Color('#444'))
b.text(pageId.capitalize()
) # Make simple label in the menu from page id..
b._a()
b.text(' | ')
b._div()
def buildPosterStyle(self, b):
s = self.style
b.div(
class_=self.getClassName(),
width=s.width,
backgroundcolor=s.backgroundColor,
display=s.display,
float=s.float,
padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX,
width=s.widthMobile,
display=s.displayMobile,
float=s.floatMobile),
)
b.div(
class_=self.C.CLASS_FEATUREDITEM,
display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor,
padding=Em(1.6),
#style='background-repeat:no-repeat;background-size:cover;',
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
margintop=s.itemMarginTop,
media=Media(max=self.C.M_MOBILE_MAX,
#style='background-size:auto'
),
)
b.h1(color=Color('white'),
fontfamily='Georgia',
fontsize=Em(4),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h1()
if s.showSubtitle:
b.h2(color=Color('yellow'),
fontsize=Em(2),
fontweight=self.C.BOLD,
textshadow=Shadow())
b._h2()
b._div(comment=self.C.CLASS_FEATUREDITEM)
b._div()
def demoSvgDrawing1(self, b):
# Draw a responsive image in SVG, only in
#b.div(class_='svgDemo', display=C.BLOCK, margintop=Em(0.5), marginbottom=Em(0.5),
# media=Media(max=C.M_MOBILE_MAX, display=C.NONE))
s = self.style
b.svg(width=s.width, height=s.height)
b.rect(width=Perc(100),
height=50,
fill=LinearGradient('left', '#000', 0, '#FFF', 100))
b.rect(y=50, width=Perc(100), height=200, fill='green')
# Perspective line
b.line(x1=30,
y1=Perc(100),
x2=Perc(50),
y2=50,
stroke='yellow',
strokewidth=3)
b.line(x1=Perc(70),
y1=Perc(100),
x2=Perc(50),
y2=50,
stroke=Color('yellow'),
strokewidth=3,
display=self.C.NONE)
b.ellipse(x=80, y=150, rx=40, ry=10, fill='black', fillopacity=0.2)
b.filter('frozenLiquid')
b.circle(x=80,
y=80,
r=40,
strokewidth=3,
stroke='black',
fill='red',
fillopacity=0.5)
b.circle(x=80, y=80, r=20, fill=Color('green'), fillopacity=0.5)
b._filter()
b.circle(x=65, y=65, r=10, fill=Color('white'), fillopacity=0.2)
b.ellipse(x=Perc(50),
y=Perc(50),
rx=40,
ry=10,
fill='black',
fillopacity=0.5)
b.circle(x=Perc(50),
y=50,
r=40,
strokewidth=3,
stroke='black',
fill=Color('red'),
fillopacity=0.5)
b.circle(x=Perc(50), y=50, r=20, fill=Color('green'), fillopacity=0.5)
b.circle(x=Perc(48), y=35, r=10, fill=Color('white'), fillopacity=0.6)
#b.text('Xierpa3', fill='#FFF', fontsize=45, fontfamily='Verdana', x=100, y=100)
b._svg()
def baseStyle(self):
u"""Answer the single basis style that will be defined as overall CSS, before
specific block definitions start."""
s = Article.BLUEPRINT
root = self.newStyle() # Create root style
root.addStyle('body',
fontfamily=BODYFAMILY,
fontsize=s.fontSize,
backgroundcolor=s.pageBackgroundColor,
lineheight=s.lineHeight)
s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=HEADFAMILY)
s.addStyle('h6', fontfamily=BODYFAMILY)
s.addStyle('b', fontweight=self.C.BOLD)
s.addStyle('a', color=Color('#CECECE'))
return root
def baseComponents(self):
u"""Create the component instances"""
# Import current example site, as anchor for the article files.
from xierpa3.sites.examples import textilearticles
# Root path where to find the article Simples wiki file for this example page.
articleRoot = TX.module2Path(textilearticles) + '/files/articles/'
adapter = ArticleAdapter(
articleRoot) # Preferred adapter class for articles in this site.
# Create navigation instance, to choose between the available articles.
menu = Menu(adapter=adapter)
menuContainer = Container(components=menu)
# Create the article component to contain articles answered by the adapter.
#article = SimplexArticle(adapter=adapter)
article = Article(width=Perc(70),
adapter=adapter,
showPoster=True,
splitChapters=False)
articleSideBar = ArticleSideBar(width=Perc(22), adapter=adapter)
featuredArticles = FeaturedByImage(
width=Perc(22),
adapter=adapter,
# Example to overwrite the default BluePrint parameter titleColor
titleColor=Color('red'))
#featuredByImage = FeaturedByText(widht=Perc(22), adapter=adapter)
# Make main page container for the article column
container = Container(components=(
article,
articleSideBar,
featuredArticles,
#featuredByImage
))
# The class is also the page name in the url.
homePage = Page(class_=self.C.TEMPLATE_INDEX,
name=self.C.TEMPLATE_INDEX,
fonts=self.URL_FONTS,
title=self.TITLE,
css=self.C.URL_CSS,
components=(menuContainer, container))
return [homePage]
class FeaturedByImage(FeaturedBase):
u"""The @FeaturedByImage@ feature component, shows a featured article by its poster image
on full width of the component.
If there is no poster image defined in the article meta data, then the first image in the article
is used here. The image is a link to the article page.
Respectively the binary flags @BluePrint@ *showLevel*, *showTitle* and *showTopic*
will enable the level of the article (as defined in the article source @$level@),
the article title (@$title@) and topic (@$topic), of set to @True@."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
BLUEPRINT = BluePrint(FeaturedBase.BLUEPRINT,
# Selection stuff
start=0, doc_start=u'Index of first selected item to feature.',
count=3, doc_count=u'Number of selected items to feature.',
# Container component layout stuff
width=Perc(30), doc_width=u'Overall width of the component.',
widthMobile=Perc(100), doc_widthMobile=u'Overall width of the component for mobile.',
backgroundColor=None, doc_backgroundColor=u'Background color of the component.',
display=C.BLOCK, doc_display=u'Display status of the component',
displayMobile=C.BLOCK, doc_displayMobile=u'Display status of the component for mobile.',
float=C.LEFT, doc_float=u'Float status of the component.',
floatMobile=C.LEFT, doc_floatMobile=u'Float status of the component for mobile.',
padding=0, doc_padding=u'Padding of the component content.',
# Item/article stuff
itemDisplay=C.BLOCK, doc_itemDisplay=u'Display type of the item/article image cell.',
itemBackgroundColor=Color('#E0E0E0'), doc_itemBackgroundColor=u'Background color of the item/article image cell.',
itemClear=C.NONE, doc_itemClear=u'Floating clear of item/article image cell.',
itemMarginBottom=Em(0.5), doc_itemMarginBottom=u'Margin bottom of item/article image cell.',
itemWidth=Perc(100), doc_itemWidth=u'Width of item/article image cell.',
itemPadding=Padding(Em(0.35)), doc_itemPadding=u'Padding of the item/article image cell.',
# Level
showLevel=False, doc_showLevel=u'Boolean flag to show the level field of the article.',
levelFormat='%s level', doc_levelFormat=u'Python string pattern as level indicator. Takes level string as parameter.',
genericLevel=None, doc_genericLevel=u'Generic level flag, overruling the article level field.',
levelColor=Color('#222'), doc_levelColor=u'Color of the level indicator.',
levelSize=Em(0.8), doc_levelSize=u'Font size of the level indicator.',
levelWeight=C.BOLD, doc_levelWeight=u'Font weight of the level indicator.',
levelMarginTop=Em(0.2), doc_levelMarginTop=u'Margin top of the level indicator.',
levelMarginBottom=Em(0.2), doc_levelMarginBottom=u'Margin bottom of the level indicator.',
# Title
showTitle=True, doc_showTitle=u'Boolean flag to show the title of the article.',
titleColor=('#444'), doc_titleColor=u'Color of the article title.',
titleSize=Em(1.1), doc_titleSize=u'Font size of the article title.',
titleWeight=C.NORMAL, doc_titleWeight=u'Font weight of the article title.',
titleLineHeight=Em(1.2), doc_titleLineHeight=u'Line height of the article title.',
# Topic
showTopic=True, doc_showTopic=u'Boolean flag to show the topic of the article.',
topicColor=Color('#444'), doc_topicColor=u'Color of the article topic.',
topicSize=Em(0.8), doc_topicSize=u'Font size of the article topic.',
topicWeight=C.NORMAL, doc_topicWeight=u'Font weight of the article topic.',
topicLineHeight=Em(1.2), doc_topicLineHeight=u'Line height of the article topic.',
)
# Col stuff ??? NOT USED
'''
colWidth=8, doc_colWidth=u'Default amount of columns for this component.',
colMarginRight=Perc(1.8), doc_colMarginRight=u'Div.col margin right.',
colMarginLeft=0, doc_colMarginLeft=u'Div.col margin left.',
colFloat=C.LEFT, doc_colFloat=u'Div.col float',
colMinHeight=1, doc_colMinHeight=u'Div.col minimal height.',
colDisplay=C.BLOCK, doc_colDisplay=u'Div.col display type.',
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
'''
def buildFeatured(self, b, articles):
s = self.style
b.div(class_=self.getClassName(), width=s.width, backgroundcolor=s.backgroundColor,
display=s.display, float=s.float, padding=s.padding,
media=Media(max=self.C.M_MOBILE_MAX, width=s.widthMobile,
display=s.displayMobile, float=s.floatMobile),
)
for article in articles.items:
if article.poster:
self.buildFeaturedImage(b, article)
b._div()
def buildFeaturedImage(self, b, article):
s = self.style
b.div(class_=self.C.CLASS_FEATUREDITEM, display=s.itemDisplay,
backgroundcolor=s.itemBackgroundColor, padding=s.itemPadding,
clear=s.itemClear, marginbottom=s.itemMarginBottom, margintop=s.itemMarginTop,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
b.img(class_=(self.C.CLASS_AUTOWIDTH, 'featuredImage'), src=article.poster)
if s.showLevel or s.genericLevel:
b.h5(class_=self.C.CLASS_LEVEL, color=s.levelColor, fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop, marginbottom=s.levelMarginBottom)
# Format the level indicator
b.text(s.levelFormat % (article.level or s.genericLevel))
b._h5()
if s.showTitle:
b.h4(class_=self.C.CLASS_TITLE, color=s.titleColor, fontsize=s.titleSize,
fontweight=s.titleWeight, lineheight=s.titleLineHeight)
b.text(article.title)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.h5(class_=self.C.CLASS_TOPIC, color=s.topicColor, fontsize=s.topicSize,
fontweight=s.topicWeight, lineheight=s.topicLineHeight)
if isinstance(article.topic, basestring):
b.text(article.topic)
else:
self.buildElement(b, article.topic)
b._h5()
b._a()
b._div(comment=self.C.CLASS_FEATUREDITEM)
#
# -----------------------------------------------------------------------------
#
# featured.py
#
from random import choice
from xierpa3.components.column import Column
from xierpa3.components.container import Container
from xierpa3.descriptors.media import Media
from xierpa3.attributes import Em, Margin, Perc, Color, Padding
from xierpa3.descriptors.blueprint import BluePrint
LEVELSIZE = Em(0.9)
AUTHORSIZE = Em(1.2)
CATEGORYSIZE = Em(1.4)
AUTHORCOLOR = Color('#828487')
CATEGORYCOLOR = AUTHORCOLOR
LABELCOLOR = AUTHORCOLOR
NAMECOLOR= Color('#66696C')
SUMMARYCOLOR= Color('#202020')
class Featured(Container):
pass
class FeaturedBase(Column):
u"""Abstract class that combines functionality for inheriting Featured classes."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
CLASS_FEATURED_ITEM = 'featuredItem'
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with **b** as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements.
Building the styled 2 text blocks, written out with duplicated values,
as example how this works. See other examples for approaches with more
cascading styled hierarchy."""
b.div(
class_=self.getClassName(),
margin=Margin(0, self.C.AUTO),
color=Color('yellow'), # Translate color name to hex
width=Perc(90),
maxwidth=900,
minwidth=300,
backgroundcolor=Color('#222'),
paddingtop=Em(0.5),
paddingbottom=Em(0.5),
fontfamily=self.CSS_BODYFONT,
fontsize=Em(3),
textalign=self.C.CENTER,
lineheight=Em(1.2),
# Now define the @media parameters, where they belong: inside the definition of the element.
# The media parameters are collected and sorted for output at the end of the CSS document.
media=(
# Example for table, show lighter background, change color of text and smaller size.
Media(
min=self.C.M_TABLET_MIN,
max=self.C.M_TABLET_MAX,
backgroundcolor=Color('#444'),
color=Color('orange'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE),
# For mobile, even more lighter background, change color of text and smaller size.
Media(
max=self.C.M_MOBILE_MAX,
backgroundcolor=Color('#AAA'),
color=Color('red'), # Translate color name to hex.
margin=0,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello, world!')
# One of the advantages of using a real programming language to generate
# HTML/CSS code, is that repetitions can be written as a loop. Not necessary
# fewer lines, but more expandable and less redundant distribution of
# knowledge in the code.
# This generates the same result as:
# b.div(class_='c1', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_DESKTOP_MIN, display=self.BLOCK))
# b.text('Responsive desktop mode.')
# b._div()
# b.div(class_='c2', display=self.NONE, fontsize=Em(0.5), color=self.WHITE,
# media=Media(min=self.M_TABLET_MIN, max=self.M_TABLET_MAX, display=self.BLOCK))
# b.text('Responsive tablet mode.')
# b._div()
# b.div(class_='c3', display=self.NONE, fontsize=Em(0.5), color=self.BLACK,
# media=Media(max=self.M_MOBILE_MAX, display=self.BLOCK))
# b.text('Responsive mobile mode.')
# b._div()
#
data = (
# class, minWidth, maxWidth, text
('c1', self.C.M_DESKTOP_MIN, None, 'Responsive desktop mode.'),
('c2', self.C.M_TABLET_MIN, self.C.M_TABLET_MAX,
'Responsive tablet mode.'),
('c3', None, self.C.M_MOBILE_MAX, 'Responsive mobile mode..'),
)
for class_, minWidth, maxWidth, text in data:
b.div(class_=class_,
display=self.C.NONE,
fontsize=Em(0.5),
color=Color(self.C.WHITE),
background=self.C.NONE,
media=Media(min=minWidth, max=maxWidth,
display=self.C.BLOCK))
b.text(text)
b._div()
b._div()
b.div(
class_=self.C.CLASS_CAPTION,
color=Color('#888'),
width=Perc(100),
maxwidth=700,
minwidth=300,
margin=Margin(0, self.C.AUTO),
paddingtop=Em(0.5),
fontfamily=self.CSS_CAPTIONFONT,
fontsize=Em(0.8),
textalign=self.C.CENTER,
lineheight=Em(1.4),
fontstyle=self.C.ITALIC,
)
b.text('Responsive page generated by Xierpa3.')
b._div()
class FeaturedByDiapText(FeaturedByText):
u"""As FeaturedByText, but default on a dark background."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedByText.C
LEVELSIZE = Em(0.9)
AUTHORSIZE = Em(1.2)
CATEGORYSIZE = Em(1.4)
AUTHORCOLOR = Color('#828487')
CATEGORYCOLOR = AUTHORCOLOR
LABELCOLOR = AUTHORCOLOR
NAMECOLOR= Color('#66696C')
SUMMARYCOLOR= Color('#E0E0E0')
BACKGROUNDCOLOR = Color('#202020')
LEVELCOLOR = Color('#6294D0')
NAMECOLOR = Color('#E1E1E1')
AUTHORCOLOR = Color('#B2B4B7')
# Inherit from the super class blueprint, and then change some of the parameters.
BLUEPRINT = BluePrint(FeaturedByText.BLUEPRINT,
# Layout alternatives
showPoster=True, doc_showPoster=u'Boolean flag to indicate if the poster of the article should be shown.',
showCategory=True, doc_showCategory=u'Boolean flag to indicate if the category of this article should be shown.',
# Selection stuff
# Index of first and amount of selected features for this component
start=0, doc_start=u'Index of first selected item to feature.',
count=10, doc_count=u'Number of selected items to feature.',
itemRandom=True, doc_itemRandom=u'Choose random from the selected items.',
# Label stuff
label=None, doc_label=u'Label string.',
labelSize=Em(2.2), doc_labelSize=u'Label size.',
labelColor=Color('#828487'), doc_labelColor=u'Label color.',
labelMarginBottom=Em(0.5),
labelMarginTop=Em(0.3),
# Poster
posterWidth='40%', doc_posterWidth=u'Width of the poster image, to allow text to flow around.',
# Layout stuff
colWidth=8, # Default amount of columns for this component
backgroundColor=Color(BACKGROUNDCOLOR), doc_backgroundColor=u'Background color of the component. Default is a dark gray.',
# Level stuff, handle local fontsize and lineheight here, related to the item size
showLevel=True, genericLevel='Generic', # Show generic level if level is omitted in data.
levelColor=Color(LEVELCOLOR), doc_levelColor=u'Color of the level indicator.',
levelSize=LEVELSIZE,
levelWeight=C.BOLD,
levelMarginTop=Em(0.5),
# Category stuff in h5
categoryColor=CATEGORYCOLOR,
categorySize=Em(1.8),
categoryLineHeight=Em(1.2),
categoryWeight=C.BOLD,
# Name stuff in h2
nameSize=Em(1.8),
nameLineHeight=Em(1.1),
nameWeight=None, # Default inheriting from the main weight.
nameColor=Color(NAMECOLOR),
nameMarginBottom=Em(0.2),
nameMarginTop=0,
nameDisplay=C.BLOCK,
# Author stuff in h6
authorSize=AUTHORSIZE,
authorWeight=C.NORMAL,
authorColor=Color(AUTHORCOLOR), # Inheriting from the main color as default
authorDisplay=C.BLOCK,
authorLineHeight=Em(1.4),
# Summary stuff
summaryColor=C.WHITE,
summaryMarginTop=Em(0.4),
summaryMarginBottom=Em(0.5),
# Tablet stuff
tabletLabelSize=Em(1.5),
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
)
class SimpleWebSite(Theme):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Theme.C
# This title will be combined with the title of the article of a specific page.
TITLE = u'Simple Website'
BODYFAMILY = '"BentonSansRE", Verdana, sans'
HEADFAMILY = '"Bureau Grot Cond", Impact, Verdana, sans'
BODYSIZE = Px(12)
BODYLEADING = Em(1.4)
FOOTERBGCOLOR = Color('#202020')
URL_FONTS = [
# Note that this package contains the a set of latest featured font, and may be changed in the future.
# If using the font in this package, safest is to refer to the functional constant names below,
# instead of making a direct reference to the family name.
# Of course, taking your own account at //www.webtype.com is even better :)
C.
XIERPA3_DEMOFONTS, # Webtype @fontface fonts, to be used for localhost demo purposes.
]
def baseStyle(self):
s = self.newStyle() # Answer root style without selector
s.addStyle('body',
fontfamily=self.BODYFAMILY,
fontsize=self.BODYSIZE,
lineheight=self.BODYLEADING)
s.addStyle('h1, h2, h3, h4, h5, p.lead', fontfamily=self.HEADFAMILY)
s.addStyle('h6', fontfamily=self.BODYFAMILY)
return s
def baseComponents(self):
# Create the article adapter
# Import articles from the doingbydesign site, sharing the article files.
from xierpa3.sites import doingbydesign
# Root path where to find the article Simplex wiki file for this example page.
articleRoot = TX.module2Path(doingbydesign) + '/files/articles/'
adapter = SimpleSiteAdapter(articleRoot)
# Header
logo = Logo()
menu = Menu()
header = Header(
components=(logo, menu),
mobileContainerDisplay=self.C.NONE,
doc_mobileContainerDisplay=u'Header is not visible for mobile')
mobileNavigation = MobileNavigation(
) # Is container by itself. Change??
# Create the component instances
article = Article(width=Perc(68))
featuredByImage = FeaturedByImage(count=1, width=Perc(30))
featuredByText = FeaturedByText(start=1, count=3, width=Perc(30))
# Create the single page instance, containing the number of components
mainHome = Container(components=(article, featuredByImage,
featuredByText))
# Footer
footer = Footer(components=(menu, ),
containerBackgroundColor=self.FOOTERBGCOLOR)
# The class is also the page name in the url.
homePage = Page(
class_=self.C.TEMPLATE_INDEX,
name=self.C.TEMPLATE_INDEX,
adapter=adapter,
#components=(mobileNavigation, header, mainHome, footer),
#components=(header, mainHome, footer),
components=Container(header),
fonts=self.URL_FONTS,
title=self.TITLE,
css=self.C.URL_CSS)
return [homePage]
def make(self, root=None):
u"""The instance of this class builds CSS and HTML files at the optional path <b>root</b>.
If not defined, then the default ~/Desktop/Xierpa3Examples/[component.name] is used as export path,
as set by Builder.DEFAULT_ROOTPATH"""
cssBuilder = CssBuilder()
self.build(cssBuilder)
cssBuilder.save(self, root)
htmlBuilder = HtmlBuilder()
self.build(htmlBuilder)
return htmlBuilder.save(self, root)
class FeaturedByDiapText(FeaturedByText):
u"""As FeaturedByText, but default on a dark background."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedByText.C
BLUEPRINT = BluePrint(FeaturedBase.BLUEPRINT,
# Selection stuff
# Index of first and amount of selected features for this component
start=0,
count=10,
itemRandom=True, doc_itemRandom=u'Choose random from the selected items.',
# Label stuff
label=None, doc_label=u'Label string.',
labelSize=Em(2.2), doc_labelSize=u'Label size.',
labelColor=Color('#828487'), doc_labelColor=u'Label color.',
labelMarginBottom=Em(0.5),
labelMarginTop=Em(0.3),
# Poster
showPoster=True, posterWidth='40%',
# Layout stuff
colWidth=8, # Default amount of columns for this component
# Level stuff, handle local fontsize and lineheight here, related to the item size
showLevel=True, genericLevel='Generic', # Show generic level if level is omitted in data.
levelColor=Color('#6294D0'),
levelSize=LEVELSIZE,
levelWeight=C.BOLD,
levelMarginTop=Em(0.5),
# Category stuff in h5
showCategory=False,
categoryColor=CATEGORYCOLOR,
categorySize=Em(1.8),
categoryLineHeight=Em(1.2),
categoryWeight=C.BOLD,
# Name stuff in h2
nameSize=Em(1.8),
nameLineHeight=Em(1.1),
nameWeight=None, # Default inheriting from the main weight.
nameColor=Color('#E1E1E1'),
nameMarginBottom=Em(0.2),
nameMarginTop=0,
nameDisplay=C.BLOCK,
# Author stuff in h6
authorSize=AUTHORSIZE,
authorWeight=C.NORMAL,
authorColor=Color('#B2B4B7'), # Inheriting from the main color as default
authorDisplay=C.BLOCK,
authorLineHeight=Em(1.4),
# Summary stuff
summaryColor=C.WHITE,
summaryMarginTop=Em(0.4),
summaryMarginBottom=Em(0.5),
# Tablet stuff
tabletLabelSize=Em(1.5),
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5), mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5), mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
)
def _helloWorldText(self, b):
b.div(color=Color('yellow')
) # Color name will be translate to more reliable hex code.
b.text('Hello, world!')
b._div()
class FeaturedByImageList(FeaturedBase):
u"""The *FeaturedByImageList* feature component builds a vertical list if thumbnails,
level and optional names of the selected article chapters."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = FeaturedBase.C
LEVELSIZE = Em(0.9)
LEVELCOLOR = Color('#6294D0')
NAMECOLOR = Color('#A32C2D')
BLUEPRINT = BluePrint(
FeaturedBase.BLUEPRINT,
showLevel=False,
doc_showLevel=u'Boolean flag to show the level field of the article.',
showName=False,
doc_showName=u'Boolean flag to show the name field of the article.',
showTopic=True,
doc_showTopic=u'Boolean flag to show the topic of the article.',
# Selection stuff
start=0,
doc_start=u'Index of first selected item to feature.',
count=3,
doc_count=u'Number of selected items to feature.',
# Col block stuff
colDisplay=C.BLOCK,
doc_colDisplay=u'Column display type.',
colClear=C.BOTH,
doc_colClear='Column float clear.',
colMarginBottom=Em(0.5),
doc_colMarginBottom='Column margin bottom.',
colColor=None,
doc_colColor=u'Column color',
colMarginRight=Perc(1.8),
doc_colMarginLeft=u'Column margin left.',
colMarginLeft=0,
colFloat=C.LEFT,
colMinHeight=1,
# Layout stuff
colWidth=4,
doc_colWidth=u'Default amount of columns for this component.',
# Item stuff
itemClear=C.NONE,
itemDisplay=C.LEFT,
itemWidth=Perc(55),
# Thumbnail image stuff
thumbDisplay=C.BLOCK,
# Level stuff, handle local fontsize and lineheight here, related to the item size
genericLevel='Generic',
doc_genericLevel=
u'Show this generic level name if level attitbute is undefined in adapter data.',
levelColor=Color(LEVELCOLOR),
doc_levelColor=u'Level color.',
levelSize=LEVELSIZE,
doc_levelSize=u'Level font size.',
levelWeight=C.BOLD,
doc_levelWeight=u'Level font weight.',
levelMarginTop=Em(0.5),
doc_levelMarginTop=u'Level margin top.',
# Optional name stuff, handle local fontsize and lineheight here, related to the item sizes
nameColor=Color(NAMECOLOR),
nameSize=Em(0.9),
nameLineHeight=Em(1.2),
nameWeight=C.BOLD,
# Mobile stuff
mobileDisplay=C.NONE,
mobilePaddingTop=Em(2),
mobilePaddingBottom=Em(0.5),
mobilePaddingLeft=Em(0.5),
mobilePaddingRight=Em(0.5),
mobileMarginTop=Em(2),
mobileMarginBottom=Em(0.5),
mobileMarginLeft=Em(0.5),
mobileMarginRight=Em(0.5),
mobileFloat=C.NONE,
mobileWidth=C.AUTO,
)
def buildFeatured(self, b, articles):
s = self.style
for article in articles:
if not article.poster:
continue # Only show articles that have some kind of poster image.
b.div(
class_=self.CLASS_FEATURED_ITEM,
display=s.itemDisplay,
clear=s.itemClear,
marginbottom=s.itemMarginBottom,
width=s.itemWidth,
)
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id))
if s.showLevel:
b.h5(color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop)
b.text(article.level or s.genericLevel)
b.text(' level')
b._h5()
b.img(class_=self.C.CLASS_AUTOWIDTH,
width=Perc(60),
src=article.poster)
if s.showName:
b.h4(color=s.nameColor,
fontsize=s.nameSize,
fontweight=s.nameWeight,
lineheight=s.nameLineHeight)
b.text(article.name)
b._h4()
if s.showTopic and article.topic is not None: # Elements must be defined in global style
b.text(article.topic)
b._a()
if b.e.form[self.C.PARAM_DEBUG]:
b.text( ` article `)
b._div(comment=self.CLASS_FEATURED_ITEM)
class ExampleColumn(Column):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
BLUEPRINT = BluePrint(
# Page stuff
pageBackgroundColor=Color('#EEE'),
doc_pageBackgroundColor=u'Page background color.',
# Responsive stuff
minWidth=300,
doc_minWidth='Column minimal width.',
minWidthMobile=0,
doc_minWidthMobile=u'Column minimal width for mobile.',
maxWidth=700,
doc_maxWidth='Column maximal width.',
maxWidthMobile=C.AUTO,
doc_maxWidthMobile='Column maximal width for mobile',
# Column stuff
fontFamlily=BODYFAMILY,
doc_fontFamily=u'Column body font family.',
fontSize=Em(1),
doc_fontSize=u'Column body font size.',
fontSizeMobile=Em(1.2),
doc_fontSizeMobile=u'Column body font size for mobile.',
lineHeight=Em(1.4),
doc_lineHeight=u'Column body leading.',
margin=Margin(0, C.AUTO, 0, C.AUTO),
doc_margin=u'Column margin.',
marginMobile=0,
doc_marginMobile=u'Column margin mobile',
color=Color('#222'),
doc_color='Column text color.',
backgroundColor=Color('#FFF'),
doc_backgroundColor='Column background color.',
width=Perc(50),
doc_width=u'Column width.',
widthMobile=C.AUTO,
doc_widthMobile=
u'Column width for mobile, shoud always be “auto” with the row construction.',
padding=Em(2),
doc_padding=u'Column margin in the page.',
paddingMobile=Em(1.4),
doc_paddingMobile=u'Column margin in the page for mobile.',
# h1
h1FontFamily=HEADFAMILY,
doc_h1FontFamily=u'Column h1 font family.',
h1FontSize=Em(1.6),
doc_h1FontSize=u'Column h1 font size',
h1LineHeight=Em(1.1),
doc_h1LineHeight=u'Column h1 leading',
h1Color=Color('#666'),
doc_h1Color=u'Column h1 color.',
h1MarginBottom=Em(0.5),
doc_h1MarginBottom=u'Column h1 margin bottom',
# h2
h2FontFamily=HEADFAMILY,
doc_h2FontFamily=u'Column h2 font family.',
h2FontSize=Em(1.4),
doc_h2FontSize=u'Column h2 font size',
h2LineHeight=Em(1.2),
doc_h2LineHeight=u'Column h2 leading',
h2Color=Color('#888'),
doc_h2Color=u'Column h2 color.',
h2Style=C.ITALIC,
doc_h2Style=u'Column h2 style',
h2MarginTop=Em(1),
doc_h2MarginTop=u'Column h2 margin top',
h2MarginBottom=Em(0.5),
doc_h2MarginBottom=u'Column h2 margin bottom',
# p
textIndent=Em(1),
doc_textIndent=u'Indent of first line of paragraph.',
textFirstIndent=0,
doc_textFirstIndent=u'Indent of first paragraph after another element.',
# p.end
textLastIndent=0,
doc_textLastIndent=u'Indent of last paragraph before another element',
textEndMarginTop=Em(0.5),
doc_textEndMarginTop=
u'Margin top of last paragraph before another element.',
textEndMarginBottom=Em(0.5),
doc_textEndMarginBottom=
u'Margin bottom of last paragraph before another element.',
# img
imgMarginTop=Em(0.5),
doc_imgMarginTop=u'Image margin top',
imgMarginBottom=Em(0.5),
doc_imgMarginBottom=u'Image margin bottom',
# blockquote.pullQuote
pullQuoteFontFamily=BODYFAMILY,
doc_pullQuoteFontFamily=u'Pull quote font family.',
pullQuotePadding=Margin(Em(0.5), Em(1)),
doc_pullQuotePadding=u'Pull quote padding.',
pullQuoteSize=Em(1.2),
doc_pullQuoteSize=u'Pull quote font size.',
pullQuoteLineHeight=Em(1.3),
doc_pullQuoteLineHeight=u'Pull quote line height.',
pullQuoteMarginTop=Em(0.5),
doc_pullQuoteMarginTop=u'Pull quote margin top.',
pullQuoteMarginBottom=Em(0.5),
doc_pullQuoteMarginBottom=u'Pull quote margin bottom',
pullQuoteStyle=C.ITALIC,
doc_pullQuoteStyle=u'Pull quote style',
pullQuoteBackgroundColor=Color('#EEE'),
doc_pullQuoteBackgroundColor=u'Pull quote background color.',
pullQuoteColor=Color('#333'),
doc_pullQuoteColor=u'Pull quote color.',
pullQuoteBorder=None,
doc_pullQuoteBorderu=
'Pull quote border.', #Border('solid', 2, Color('#E1E2E2')),
)
def buildBlock(self, b):
u"""Build the column. Note that although the "div" suggest that it is just
HTML building there, the method get called both with <b>b</b> as CssBuilder
and as HtmlBuilder. Each builder will filter out the appropriate attributes and
translates it into its own syntax. The HTML tags generated by the article
are set in CSS by the empty statements."""
s = self.style # Get compile style from cascading blue prints of inheriting classes.
b.div(
class_=s.classColumn,
color=s.color,
margin=s.margin,
width=s.columnWidth,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
fontfamily=s.fontFamily,
fontsize=s.fontSize,
lineheight=s.lineHeight,
padding=s.padding,
# Remove margins on mobile, showing the column on full screen width.
media=Media(max=self.C.M_MOBILE_MAX,
margin=s.marginMobile,
float=self.C.NONE,
fontsize=s.fontSizeMobile,
lineheight=s.lineHeight,
padding=s.paddingMobile,
width=s.widthMobile,
maxwidth=s.maxWidthMobile,
minwidth=s.minWidthMobile),
)
# Since the self.adapter.getArticle answers an article that already
# includes XHTML tags, we cannot do the styling there. In order to
# define the unique CSS styles, a blank document content is created
# for the CssBuilder to evaluate, so we have all the definitions inside
# div.column, in case they are used in the article.
# Note that this is in conflict with the purpose of components, who
# should not know about the type of builder that they are talking to.
# In future this will be solved by supplying more default style parameters
# to the component, that include the styles of tags that are not used
# in the main building.
# See also the code for components/article, which includes a _model.txt
# document for this purpose.
if b.isType(self.C.TYPE_CSS):
self.buildCssColumnTemplate(b)
else:
data = self.adapter.getArticle(index=4,
selector=self.C.SELECTOR_FEATURED)
# Build the headline without style attribute, as these are already defined
# in the self.buildCssColumnTemplate call.
b.h1(fontfamily=s.h1FontFamily,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight)
b.text(data.headline)
b._h1()
if data.poster:
# Build the image that came with the featured article, if it exists.
# Make it class autowidth to solve the width="100%" incompatibility
# between browsers.
b.img(src=data.poster,
class_=s.imgClass,
maxwidth=s.imgMaxWidth,
minwidth=s.imgMinWidth,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom)
# Output the rest of the featured article.
b.text(data.item)
# Add some more volume to the blurb article.
data = self.adapter.getArticles(count=4)
for article in data.items:
b.h2(fontfamily=s.h2FontFamily,
fontsize=s.h2FontSize,
lineheight=s.h2LineHeight)
b.text(article.headline)
b._h2()
b.text(article.text)
# Add reference about the content of this page
b.hr()
b.div(class_='colophon',
fontsize=Em(0.8),
color=s.color,
fontfamily=BODYFAMILY,
lineheight=Em(1.4))
b.text(
'The text and image selection on this page is blurb, created by Filibuster.'
)
b._div()
# Add reference to sponsored Webtype webfonts.
b.a(href='//webtype.com',
color=s.color,
fontfamily=BODYFAMILY,
fontsize=Em(0.8),
lineheight=Em(1.4),
target='external')
b.text(
'The typefaces in this example %s and %s are sponsored by <Webtype>'
% (BODYFAMILY, HEADFAMILY))
b._a()
b._div()
def buildCssColumnTemplate(self, b):
u"""Build the single CSS for all expected tags in an article that is answered
by <b>self.adapter</b>. We cannot check on that here, since the content may
vary and even is hidden by e.g. calls to a PHP adapter."""
s = self.style
b.h1(fontfamily=s.h1FontFamily,
color=s.h1Color,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight,
marginbottom=s.h1MarginBottom)
# Headling made by BlurbAdapter
b._h1()
b.h2(fontfamily=s.h2FontFamily,
fontstyle=s.h2Style,
color=s.h2Color,
fontsize=s.h2FontSize,
lineheight=s.h2LineHeight,
margintop=s.h2MarginTop,
marginbottom=s.h2MarginBottom)
# Headling made by BlurbAdapter
b._h2()
b.img(margintop=s.imageMarginTop, marginbottom=s.imageMarginBottom)
b.p(textindent=s.textIndent, fontfamily=BODYFAMILY)
# Main paragraphs have an indent.
b._p()
b.p(class_='start', textindent=s.textFirstIndent)
# The start paragraph (the element before was not a <p>) has no indent.
b._p()
b.p(class_='end',
marginbottom=s.textLastMarginBottom,
margintop=s.textLastMarginTop,
textindent=s.textLastIndent)
# Mark the end paragraph (the element after is not a <p>) in case something
# special needs to be done, e.g. change the marginbottom.
# @@@ TODO: Mark as p.end preceding <blockquote> too.
b._p()
# Italic blockquotes with an indent and backgroundcolor.
b.blockquote(class_=self.C.CLASS_PULLQUOTE,
padding=s.pullQuotePadding,
fontsize=s.pullQuoteSize,
fontfamily=s.pullQuoteFontFamily,
fontstyle=s.pullQuoteStyle,
lineheight=s.pullQuoteLineHeight,
margintop=s.pullQuoteMarginTop,
marginbottom=s.pullQuoteMarginBottom,
border=s.pullQuoteBorder,
backgroundcolor=s.pullQuoteBackgroundColor,
color=s.pullQuoteColor)
b._blockquote()
def _helloWorldText(self, b):
b.div(
color=Color('#00FFFF')
) # Show the text on this page in another color, to visualize the difference.
b.text('And yet another world on this page.')
b._div()
class Logo(Component):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Component.C
BLUEPRINT = BluePrint(
# Layout stuff
colWidth=4,
doc_colWidth=u'Default amount of columns for this component.',
maxWidth=Perc(100),
doc_maxWidth=u'Maximal width of the component',
minWidth=Perc(100),
doc_minWidth=u'Minimal width of the component',
# Logo data can be set as through text/style attribute or through the adapter.
# The optional url creates a link from the logo, e.g. to the home page.
text=None,
doc_text=u'Optional text of the logo. Otherwise query the adapter.',
src=None,
doc_src=u'Optional src for logo image. Otherwise query the adapter.',
url=None,
doc_url=u'Optional url for logo link. Otherwise query the adapter.',
# Logo stuff
width=280,
doc_logoWidth=u'Logo width',
backgroundColor=None,
doc_backgroundColor=u'Background color of the logo component.',
height=C.AUTO,
doc_height=u'Logo height',
marginTop=0,
doc_marginTop=u'Logo margin top',
marginLeft=0,
doc_marginLeft=u'Logo margin left',
marginRight=Perc(1.8),
doc_marginRight=u'Logo margin right',
marginBottom=0,
doc_marginBottom=u'Logo margin bottom',
logoFloat=C.LEFT,
doc_logoFloat=u'Logo div float',
# H2 heading, in case style.text is defined and not style.src (for an image)
fontFamily=C.LOGOFAMILY,
doc_fontFamily=u'h2 font family',
fontSize=Em(2.9),
doc_fontSize=u'h2 Logo font size',
lineHeight=Em(1.4),
doc_lineHeight=u'h2 leading',
fontWeight=C.BOLD,
doc_fontWeight=u'h2 font weight',
fontStyle=None,
doc_fontStyle=u'h2 font style',
paddingTop=Em(0.2),
doc_paddingTop=u'h2 padding top',
paddingBottom=Em(0.2),
doc_paddingBottom=u'h2 padding bottom',
color=Color('#323A47'),
doc_color=u'h2 color',
)
def buildBlock(self, b):
s = self.style
colClass = self.getColClass(s.colWidth)
b.div(class_=colClass,
float=s.logoFloat,
marginleft=s.marginLeft,
backgroundcolor=s.backgroundColor,
marginright=s.marginRight,
margintop=s.marginTop,
marginbottom=s.marginBottom)
# @text: text to show instead of the logo image.
# @url: url of href link. If None no link is made
# @src: url of the image source.
data = self.adapter.getLogo()
if s.text:
data.text = s.text
data.src = None
if s.src:
data.src = s.src
data.text = None
if s.url:
data.url = s.url
if data.url:
b.a(href=data.url)
if data.src:
b.img(src=data.src,
width=s.width,
maxwidth=s.maxWidth,
height=s.height)
else:
b.h2(
fontsize=s.fontSize,
lineheight=s.lineHeight,
fontfamily=s.fontFamily,
fontWeight=s.h2Weight,
fontStyle=s.h2Style,
color=s.color,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
)
b.text(data.text)
b._h2()
if data.url:
b._a()
b._div(comment=colClass)
class SimpleTypeSpecimenColumn(Column):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
MAXWIDTH = Px(1100)
# Load @fontface fonts for this example from www.webtype.com
SPECIMENFAMILY = '"Benton Modern RE"'
BODYFAMILY = '"Benton Sans RE", Verdana, sans'
HEADFAMILY = SPECIMENFAMILY + ', Georgia, serif'
BLUEPRINT = BluePrint(
# Column stuff
fontFamily=BODYFAMILY,
doc_fontFamily=u'Column main font family',
width=MAXWIDTH,
doc_width=u'Column width.',
widthMobile=Perc(100),
doc_widthMobile=u'Column width for mobile.',
minWidth=0,
doc_minWidth=u'Column minimal width.',
minWidthMobile=0,
doc_minWidthMobile=u'Column minimal width for mobile.',
maxWidth=MAXWIDTH,
doc_maxWidth=u'Column maximal width.',
maxWidthMobile=C.AUTO,
doc_maxWidthMobile=u'Column maximal width for mobile.',
margin=Margin(0, C.AUTO, 0, C.AUTO),
doc_margin=u'Column margin.',
marginMobile=0,
doc_marginMobile=u'Column margin for mobile.',
padding=0,
doc_padding='Column padding.',
fontSize=Em(1),
doc_fontSize=u'Column main font size.',
lineheight=Em(1.4),
doc_lineheight=u'Column main leading.',
color=Color(0),
doc_color=u'Column text color, default is black.',
backgroundColor=Color('#FFF'),
doc_backgroundColor='Column background color, default is white.',
# Row
rowPadding=Em(2),
doc_rowPadding=u'Row padding.',
# Speciment stuff
specimentSizeIndicator=13,
doc_specimenSizeIndicator=u'Size of the size indicator.',
specimentSmall=18,
doc_specimentSmall=u'Smallest font size of the specimen.',
specimenLarge=37,
doc_specimenLarge=u'Largest font size of the specimen.',
specimenWidth=Perc(100),
doc_specimenWidth=u'Specimen line width.',
specimentLineHeight=Em(1.2),
doc_specimentLineHeight=
u'Specimen line height, relative to waterfall font size.',
# Size label
sizeLabelColor=Color('#888'),
doc_sizeLabelColor='Size label color, default is mid-gray.',
# h1
h1FontFamily=HEADFAMILY,
doc_h1FontFamily=u'h1 font family.',
h1FontSize=Em(2),
doc_h1FontSize=u'h1 font size',
h1LineHeight=Em(1.4),
doc_h1LineHeight=u'h1 leading',
h1MarginBottom=Em(0.5),
doc_h1MarginBottom=u'h1 margin bottom',
)
def buildBlock(self, b):
u"""Build the specimen column"""
s = self.style # Copy from inherited BluePrints with redefined user attributes.
b.div(
class_=self.C.CLASS_COLUMN,
color=s.color,
margin=s.margin,
width=s.width,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
padding=s.padding,
fontfamily=s.fontFamily,
fontsize=s.fontSize,
lineheight=s.lineheight,
# Remove margins on mobile, showing the column on full screen width.
media=Media(max=self.C.M_MOBILE_MAX,
margin=s.marginMobile,
width=s.widthMobile,
maxwidth=s.maxWidthMobile,
minwidth=s.minWidthMobile),
)
# Add div.row to allow padding, without making the main column div
# grow outside the parent boundaries.
b.div(class_=self.C.CLASS_ROW, padding=s.rowPadding)
b.h1(fontfamily=s.h1FontFamily,
fontsize=s.h1FontSize,
lineheight=s.h1LineHeight,
marginbottom=s.h1MarginBottom)
b.text('WebType ' + self.SPECIMENFAMILY[1:-1])
b._h1()
for n in range(s.specimentSmall, s.specimenLarge):
b.div(class_='specimen%02d' % n,
width=s.specimenWidth,
fontsize=Px(n),
lineheight=s.specimentLineHeight,
fontfamily=self.HEADFAMILY)
b.span(class_='size%02d' % n,
fontsize=Px(s.specimentSizeIndicator),
color=s.sizeLabelColor,
fontfamily=self.BODYFAMILY)
b.text('%d px' % n)
b._span()
b.text(u'ABCDEFGHIJKLM abcdefghijklm €$@#123')
b._div()
# Add reference to sponsored Webtype webfonts.
b.hr()
b.a(href='//webtype.com',
color=s.color,
fontfamily=self.BODYFAMILY,
fontsize=Em(0.8),
lineheight=Em(1.4),
target='external')
b.text(
'The typefaces in this example %s and %s are sponsored by <Webtype>'
% (self.BODYFAMILY, self.HEADFAMILY))
b._a()
# Close the row
b._div(comment=self.C.CLASS_ROW)
b._div()