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):
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()
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."""
b.h1(fontweight=C.BOLD, color='#888', fontsize=Em(1.6), lineheight=Em(1.1))
# Headling made by BlurbAdapter
b._h1()
b.h2(fontstyle=C.ITALIC, color='#444', fontsize=Em(1.4), lineheight=Em(1.2),
margintop=Em(1), marginbottom=Em(0.5))
# Headling made by BlurbAdapter
b._h2()
b.img(margintop=Em(0.5), marginbottom=Em(0.5))
b.p(textindent=Em(1))
# Main paragraphs have an indent.
b._p()
b.p(class_='start', textindent=0)
# The start paragraph (the element before was not a <p>) has no indent.
b._p()
b.p(class_='end', fontweight=C.BOLD, marginbottom=Em(1),
margintop=Em(0.5), textindent=0)
# 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()
b.blockquote(padding=Margin(Em(0.5), Em(1)), fontsize=Em(1.2), lineheight=Em(1.3),
margintop=Em(0.5), marginbottom=Em(0.5), #border=Border('solid', 2, Color('E1E2E2')),
fontstyle=C.ITALIC, backgroundcolor='#DDD', color=C.BLACK)
# Italic blockquotes with an indent and backgroundcolor.
b._blockquote()
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."""
b.div(class_='column', color='yellow', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300, backgroundcolor='#222',
padding=Em(0.5), fontfamily='Georgia', fontsize=Em(4), textalign=C.CENTER,
lineheight=Em(1.4))
b.text('Hello world.')
b._div()
b.div(class_='caption', color='#888', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300,
paddingleft=Em(0.5), fontfamily='Georgia', fontsize=Em(0.8), textalign=C.CENTER,
lineheight=Em(1.4), fontstyle=C.ITALIC)
b.text('Generated by Xierpa3.')
b._div()
def buildBlockRow(self, b):
s = self.style
b.div(class_=C.CLASS_ROW,
width=s.rowWidth or C.C100,
minwidth=s.rowMinWidth or 755,
maxwidth=s.rowMaxWidth or 1140,
margin=s.rowMargin or Margin(0, C.AUTO),
overflow=s.rowOverflow or C.HIDDEN,
media=Media(max=C.M_MOBILE,
display=s.mobileRowDisplay or C.BLOCK,
minwidth=0,
width=C.C100,
paddingleft=0,
paddingright=0,
margin=0))
self.buildContainerBlock(b)
b._div(comment=C.CLASS_ROW)
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 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."""
b.div(class_='column', color='#222', margin=Margin(0, C.AUTO, 0, C.AUTO),
width='50%', maxwidth=700, minwidth=300, backgroundcolor='#EEE',
padding=Em(2), fontfamily='Georgia', fontsize=Em(1),
lineheight=Em(1.4),
media=Media(max=C.M_MOBILE, margin=0))
# 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.
if b.isType(C.TYPE_CSS):
self.buildCssColumnTemplate(b)
else:
for data in self.adapter.getFeaturedArticles(self):
# Build the headline without style attribute, as these are already defined
# in the self.buildCssColumnTemplate call.
b.h1()
b.text(data.headline)
b._h1()
if data.image:
# 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.image, class_=C.CLASS_AUTOWIDTH)
# Output the rest of the featured article.
b.text(data.item)
# Add some more volume to the blurb article.
data = self.adapter.getArticle(self)
b.h2()
b.text(data.headline)
b._h2()
for item in data.items:
b.text(item)
b._div()
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()
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()
def buildArticleStyle(self, b):
s = self.style
# SVG demo
b.div(class_=self.C.CLASS_CHAPTER, color=s.chapterColor)
# TODO: Should move from here. Make sure that svgExamples get SCSS builder calls.
#b.div(class_='svgDemo', margintop=Em(0.5), marginbottom=Em(0.5))
#b._div()
# h1
b.h1(
fontsize=s.h1Size,
lineheight=s.h1LineHeight,
fontweight=s.h1FontSize,
fontstyle=s.h1FontStyle,
fontfamily=s.h1FontFamily,
color=s.h1Color,
paddingtop=s.h1PaddingTop,
paddingbottom=s.h1PaddingBottom,
)
b._h1()
# <h2>
b.h2(
fontsize=s.h2Size,
lineheight=s.h2LineHeight,
fontweight=s.h2FontSize,
fontstyle=s.h2FontStyle,
fontfamily=s.h2FontFamily,
color=s.h2Color,
paddingtop=s.h2PaddingTop,
paddingbottom=s.h2PaddingBottom,
)
b._h2()
# <h3>
b.h3(
fontsize=s.h3Size,
lineheight=s.h3LineHeight,
fontweight=s.h3FontSize,
fontstyle=s.h3FontStyle,
fontfamily=s.h3FontFamily,
color=s.h3Color,
paddingtop=s.h3PaddingTop,
paddingbottom=s.h3PaddingBottom,
)
b._h3()
# <h4>
b.h4(
fontsize=s.h4Size,
lineheight=s.h4LineHeight,
fontweight=s.h4FontSize,
fontstyle=s.h4FontStyle,
fontfamily=s.h4FontFamily,
color=s.h4Color,
paddingtop=s.h4PaddingTop,
paddingbottom=s.h4PaddingBottom,
)
b._h4()
# <p>
b.p(fontsize=s.articleSize,
lineheight=s.articleLineHeight,
textindent=s.articleIndent)
self._buildPStyle(b)
b._p()
# <p> <p>
b.p(selectorPath='p + p', textindent=s.articlePPIndent)
b._p()
# <p class="... first">
#b.p(class_=self.C.CLASS_FIRST, textindent=s.articleIndent)
#b._p()
# <p class="... last">
b.p(class_=self.C.CLASS_LAST)
b._p()
# <lead>
b.p(class_=self.C.CLASS_LEAD,
fontsize=s.leadSize,
lineheight=s.leadLineHeight,
fontweight=s.leadWeight,
fontstyle=s.leadStyle,
color=s.leadColor,
marginbottom=s.leadMarginBottom,
margintop=s.leadMarginTop,
textindent=s.articleIndent)
self._buildPStyle(b)
b._p()
# **
b.b(fontweight=self.C.BOLD)
b._b()
# <blockquote>
b.blockquote(borderleft=s.blockQuoteBorderLeft
or Border('solid', '4px', '#CCC'),
margin=s.blockQuoteMargin or Margin(Em(1.5), 10),
lineheight=s.blockQuoteLineHeight or Em(1.4),
fontstyle=s.blockQuoteStyle or self.C.ITALIC,
padding=s.blockQuotePadding or Padding(Em(0.5), 10),
color=s.blockQuoteColor or Color('#828487'))
b._blockquote()
# <em>
b.em(fontstyle=s.emFontStyle,
fontweight=s.emFontWeight,
color=s.emColor,
fontfamily=s.emFontFamily)
b._em()
# <pre>
b.pre(
fontstyle=s.preFontStyle,
fontweight=s.preFontWeight,
fontsize=s.preFontSize,
color=s.preColor,
fontfamily=s.preFontFamily,
paddingtop=s.preMarginTop,
paddingbottom=s.prePaddingBottom,
paddingleft=s.prePaddingLeft,
paddingright=s.prePaddingRight,
backgroundcolor=s.preBackgroundColor,
margintop=s.preMarginTop,
marginbottom=s.preMarginBottom,
)
b._pre()
# <div class="imgBlock"><img/><div class="caption">...</div></div>
b.div(
class_=self.C.CLASS_IMAGEBLOCK,
backgroundcolor=s.imgBackgroundColor,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom,
paddingtop=s.imgPaddingTop,
paddingbottom=s.imgPaddingBottom,
paddingleft=s.imgPaddingLeft,
paddingright=s.imgPaddingRight,
)
b.img()
b.div(class_=self.C.CLASS_CAPTION,
fontfamily=s.captionFontFamily,
fontsize=s.captionFontSize,
color=s.captionColor,
fontstyle=s.captionFontStyle,
margintop=s.captionMarginTop)
b._div() # .caption
b._div() # .imageBlock
# <img> Plain Textile img tag, generated by !(autoWidth)--url--!
b.img(class_=self.C.CLASS_AUTOWIDTH,
marginleft=s.imgAutoWidthMarginLeft,
marginright=s.imgAutoWidthMarginRight,
margintop=s.imgMarginTop,
marginbottom=s.imgMarginBottom,
textindent=s.imgAutoWidthTextIndent,
display=s.imgAutoWidthDisplay)
# <ul><li>...</li></ul>
b.ul(liststyletype=s.bulletType,
liststyleimage=s.bulletImage,
lineheight=s.bulletLineHeight,
liststyleposition=s.bulletPosition,
paddingleft=s.bulletPaddingLeft,
marginbottom=s.bulletMarginBottom,
margintop=s.bulletMarginTop)
self._buildLiStyle(b)
b._ul()
# <ol><li>...</li></ol>
b.ol(liststyletype=s.numberedListType,
liststyleposition=s.numberedListPosition,
paddingleft=s.numberedListPaddingLeft,
lineheight=s.numberedListLineHeight,
marginbottom=s.numberedListMarginBottom,
margintop=s.numberedListMarginTop)
self._buildLiStyle(b)
b._ol()
b._div() # Article chapter
class HelloWorldBluePrintText(Column):
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Theme.C
# The BluePrint defined the parameters for the component. They can be adjusted by parent
# components who implement this component on a page, or by inheriting classes that
# only want to redefine part of the parameters. The actual self.style is created during
# compilation of the start (not during run-time) as cascading result of all parent BLUEPRINT
# dictionaries.
# Furthermore the documentation builder is using the BluePrint instance to visualize
# the interface of each component available.
#
BLUEPRINT = BluePrint(
# Attribute, documentation about the attribute.
# Main div block
bodyFamily=BODYFAMILY,
doc_bodyFamily=
u'Body font family of this example. For now, in this example we only use system fonts.',
fontSize=Em(4),
doc_fontSize=
u'Font size of the body text, relative to the body font size.',
lineHeight=Em(1.2),
doc_lineHeight=u'Line height (leading) of body text.',
textAlign=C.CENTER,
doc_textAlign=u'Horizontal alignment of text.',
color=Color('yellow'),
doc_color=u'Color of the main column.',
colorTablet=Color('orange'),
doc_colorTablet=u'Text color of the main column for tablet.',
colorMobile=Color('red'),
doc_colorMobile=u'Text color of the main column for mobile.',
backgroundColor=Color('red'),
doc_backgroundColor=u'Background color of the main column',
backgroundColorTablet=Color('green'),
doc_backgroundColorTablet=
u'Background color of the main column for tablet.',
backgroundColorMobile=Color('#BBB'),
doc_backgroundColorMobile=
u'Background color of the main column for mobile.',
paddingTop=Em(0.5),
doc_paddingTop=u'Padding on top of the page',
paddingBottom=Em(0.5),
doc_paddingBottom=u'Padding at bottom of the page.',
margin=Margin(0, C.AUTO),
doc_margin=
u'Page margin of the column. In this case, horizontally centered on the page.',
width=Perc(80),
doc_width=u'Width of the main column. Default is 80% os the page with.',
maxWidth=700,
doc_maxWidth=u'Maximal width of the column.',
minWidth=300,
doc_minWidth=u'Minimal width of the column.',
# Caption
captionFont=CAPTIONFAMILY,
doc_captionFont=
u'Caption font family for this example. For now, in this example we only use system fonts.',
captionColor=Color('#888'),
doc_captionColor=u'Color of the caption.',
captionPaddingTop=Em(0.2),
doc_captionPaddingTop=u'Padding top of the caption.',
)
def buildBlock(self, b):
u"""Build the column, using the parameters from the class BluePrint instance.
This dictionary is builds the <b>self.style()</b> by cascading all BlurPrint instances
of the parent classes. The result is a complete specification of all the parameters
the direction the style and behavior of this component."""
s = self.style
b.div(
class_=self.getClassName(),
color=s.color,
margin=s.margin,
width=s.width,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
fontfamily=s.bodyFamily,
fontsize=s.fontSize,
textalign=s.textAlign,
lineheight=s.lineHeight,
# 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=s.backgroundColorTablet,
color=s.colorTablet,
fontsize=Em(3),
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=s.backgroundColorMobile,
color=s.colorMobile,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello parametric 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.
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.7),
color=Color(self.C.WHITE),
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=s.captionColor,
margin=Margin(0, self.C.AUTO),
width=Perc(100),
maxwidth=700,
minwidth=300,
paddingtop=s.captionPaddingTop,
fontfamily=s.captionFont,
fontsize=Em(0.9),
textalign=s.textAlign,
fontstyle=self.C.ITALIC,
# Change background color of the line to indicate the illustrate the difference for mobile size.
#media=Media(max=self.M_MOBILE_MAX, backgroundcolor='yellow', color='#222', fontsize=Em(1),
# margin=0, width=Perc(100),
)
b.text(
'Responsive page, generated by Xierpa3. Using BluePrint parameters.'
)
b._div()
def _buildFeaturedArticle(self, b, article):
u"""Build the featured article."""
s = self.style
if s.label:
b.h2(fontsize=s.labelSize,
color=s.labelColor,
margintop=s.labelMarginTop,
marginbottom=s.labelMarginBottom,
lineheight=s.labelLineHeight,
media=(Media(min=self.C.M_TABLET_MIN,
max=self.C.M_TABLET_MAX,
fontsize=s.tabletLabelSize,
color='red'),
Media(max=self.C.M_MOBILE_MAX, color='blue')))
b.text(s.label)
b._h2()
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id),
color=s.linkColor,
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(article.name)
b._h2()
b._a()
if s.showPoster and article.poster:
b.a(href='/%s-%s' % (self.C.PARAM_ARTICLE, article.id),
class_=self.C.CLASS_NAME)
b.img(width=Perc(100),
src=article.poster,
float=s.posterAlign,
padding=0,
margin=Margin(Em(0.5), Em(0.5), 0, 0),
media=Media(max=self.C.M_MOBILE_MAX, display=self.C.NONE))
b._a()
if s.showLevel and (article.level or s.genericLevel):
b.h5(class_=self.C.CLASS_LEVEL,
color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop,
lineheight=s.levelLineHeight)
b.text(article.level or s.genericLevel)
b.text(' level')
b._h5()
if s.showAuthor and article.author:
b.a(href='/%s-%s' % (self.C.PARAM_AUTHOR, article.author),
class_=self.C.CLASS_AUTHOR)
b.h5(fontsize=s.authorSize,
fontweight=s.authorWeight,
color=s.authorColor,
lineheight=s.authorLineHeight,
display=s.authorDisplay)
b.text('By %s' % article.author)
b._h5()
b._a()
if s.showCategory and article.category:
for category in article.category:
b.a(href='/%s-%s' % (self.C.PARAM_CATEGORY, category),
class_=self.C.CLASS_CATEGORY)
b.h5(fontsize=s.categorySize,
fontweight=s.categoryWeight,
lineheight=s.categoryLineHeight,
color=s.categoryColor,
margintop=Em(1),
display=self.C.BLOCK)
b.text(category)
b._h5()
b._a()
if s.showSummary and article.summary is not None: # Test on element. Summary elements tag must be defined by generic style.
b.div(class_='featuredSummary',
clear=self.C.BOTH,
float=self.C.LEFT,
width=Perc(100),
color=s.summaryColor,
fontsize=s.summarySize,
lineheight=s.summaryLineHeight,
margintop=s.summaryMarginTop,
marginbottom=s.summaryMarginBottom)
if isinstance(article.summary, basestring):
b.text(article.summary)
else:
self.buildElement(b, article.summary)
b._div()
if b.e.form[self.C.PARAM_DEBUG]:
b.text( ` article `)
class Container(Component):
u"""The *Container* is the generic component that holds most other components on a page.
Containers are always two-layered: a container @div@ to position on a page with a row @div@ inside
that handles the responsive behavior of the content."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Component.C
BLUEPRINT = BluePrint(
# Page/Column
paddingLeft=10,
doc_paddingLeft=u'Padding left of main container.',
paddingRight=10,
doc_paddingRight=u'Padding right of main container.',
# Style
backgroundColor=('#fff'),
doc_backgroundColor=u'Background color of the container.',
# Row
rowWidth=Perc(100),
doc_rowWidth=u'Default width of a row inside a container.',
rowMargin=Margin(0, C.AUTO),
doc_margin=
u'Row margin. This makes the main container (page) center on maxwidth.',
rowMinWidth=C.M_MOBILE_MAX,
doc_rowMinWidth=
u'Minimum width of the row inside a container. Default is %d.' %
C.M_MOBILE_MAX,
rowMinWidthMobile=0,
doc_rowMinWidthMobile=
u'Minimum width of the row inside a container for mobile.',
rowMaxWidth=C.MAXWIDTH,
doc_rowMaxWidth=
u'Maximum width of the row inside a container. Default is %d.' %
C.MAXWIDTH,
rowMaxWidthMobile=Perc(100),
doc_rowMaxWidthMobile=
u'Maximum width of the row inside a container for mobile.',
rowOverflow=C.HIDDEN,
doc_rowOverflow=
u'Default overflow hidden inside a row inside a container.',
rowFloat=C.NONE,
doc_rowFloat=u'Default float none inside a row inside a container.',
)
def buildBlock(self, b):
u"""Build the container-div with a row-div inside."""
s = self.style
b.div(class_=self.getClassName(),
paddingleft=s.paddingLeft,
paddingright=s.paddingRight,
backgroundcolor=s.backgroundColor,
media=Media(max=self.C.M_MOBILE_MAX,
paddingleft=0,
paddingright=0))
b.div(
class_=self.C.CLASS_ROW,
width=s.rowWidth,
margin=s.rowMargin,
float=s.rowFloat,
overflow=s.rowOverflow,
maxwidth=s.rowMaxWidth,
minwidth=s.rowMinWidth,
media= # Container row has width 100% in media!
Media(max=self.C.M_MOBILE_MAX,
width=Perc(100),
minwidth=s.rowMinWidthMobile,
maxwidth=s.rowMaxWidthMobile,
float=s.rowFloat),
)
for component in self.components:
component.build(b)
b._div(comment='.' + self.C.CLASS_ROW) # Comment class at end of row
b._div(comment='.' +
self.getClassName()) # Comment the class at end of container
class SimpleResponsiveText(Column):
u"""The <b>SimpleResponsiveText</b> shows a simple heading and lorum ipsum text on
a colored background, where the styling depends on the screen size through @media selection."""
# Sample string, we don't use data adapaters yet in this example.
LORUMIPSUM = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel metus ullamcorper,
porttitor ligula id, sollicitudin ante. Sed molestie cursus tortor, ut blandit felis tincidunt at. Suspendisse
scelerisque malesuada massa, eu rhoncus nulla interdum ut. Morbi ullamcorper, leo pulvinar pharetra tincidunt,
dolor quam ullamcorper lectus, in dignissim magna odio ut eros. Nulla vel enim a leo hendrerit auctor luctus
nec urna. Donec ligula nunc, consequat ut aliquet in, auctor id nisl. Pellentesque malesuada tincidunt tortor,
varius sollicitudin lorem dictum vitae. Duis vel neque non leo commodo faucibus. In dictum in mauris eget
fermentum. Nunc feugiat vitae dolor mollis interdum. Suspendisse potenti. In hac habitasse platea dictumst.
Donec ac massa vel velit cursus posuere in a urna. Vestibulum porttitor lacus neque, eu scelerisque enim
scelerisque vitae."""
# Get Constants->Config as class variable, so inheriting classes can redefine values.
C = Column.C
BLUEPRINT = BluePrint(
margin=Margin(0, C.AUTO),
doc_margin=u"Margin of the column",
width=Perc(90),
doc_width=u"Width of the main column.",
padding=Padding(Em(0.5), Em(0.5), Em(0.5), Em(0.5)),
doc_padding=u"Padding of column.",
# Show @media transition by background color
backgroundColor=Color('#BBB'),
doc_backgroundColor=u'Column background color.',
backgroundColorTablet=Color('#CCC'),
doc_backgroundColorTablet=u'Column background color for tablet.',
backgroundColorMobile=Color('#EEE'),
doc_backgroundColorMobile=u'Column background color for mobile.',
# Text
fontSize=Em(2),
doc_fontSize=u'Column font size, relative to body font size.',
fontSizeTablet=Em(1.8),
doc_fontSizeTablet=
u'Text font size for tablet, relative to body font size.',
fontSizeMobile=Em(2.5),
doc_fontSizeMobile=
u'Text font size for mobile, relative to body font size.',
color=Color('#000'),
doc_color=u'Column text color.',
colorTablet=Color('#111'),
doc_colorTablet=u'Column text color for tablet.',
colorMobile='red',
doc_colorMobile=u'Column text color for mobile.',
# h1
h1Size=Em(2),
doc_h1Size=u'h1 font size',
)
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."""
s = self.style
b.div(
class_=self.getClassName(),
color=s.color,
margin=s.margin,
width=s.width,
backgroundcolor=s.backgroundColor,
fontsize=s.fontSize,
padding=s.padding,
textalign=self.C.LEFT,
# 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,
width=self.C.AUTO,
backgroundcolor=s.backgroundColorTablet,
margin=0,
float=self.C.NONE,
color=s.colorTablet,
fontsize=s.fontSizeTablet),
# For mobile, even more lighter background, change color of text and smaller size.
Media(max=self.C.M_MOBILE_MAX,
margin=0,
width=self.C.AUTO,
float=self.C.NONE,
backgroundcolor=s.backgroundColorMobile,
color=s.colorMobile,
fontsize=s.fontSizeMobile),
))
b.h1(fontsize=s.h1Size)
b.text('Headline')
b._h1()
b.p()
b.text(self.LORUMIPSUM)
b._p()
b._div()
def buildBlock(self, b):
u"""Build the column, using the parameters from the class BluePrint instance.
This dictionary is builds the <b>self.style()</b> by cascading all BlurPrint instances
of the parent classes. The result is a complete specification of all the parameters
the direction the style and behavior of this component."""
s = self.style
b.div(
class_=self.getClassName(),
color=s.color,
margin=s.margin,
width=s.width,
maxwidth=s.maxWidth,
minwidth=s.minWidth,
backgroundcolor=s.backgroundColor,
paddingtop=s.paddingTop,
paddingbottom=s.paddingBottom,
fontfamily=s.bodyFamily,
fontsize=s.fontSize,
textalign=s.textAlign,
lineheight=s.lineHeight,
# 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=s.backgroundColorTablet,
color=s.colorTablet,
fontsize=Em(3),
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=s.backgroundColorMobile,
color=s.colorMobile,
fontsize=Em(2),
width=self.C.AUTO,
float=self.C.NONE)))
b.text('Hello parametric 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.
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.7),
color=Color(self.C.WHITE),
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=s.captionColor,
margin=Margin(0, self.C.AUTO),
width=Perc(100),
maxwidth=700,
minwidth=300,
paddingtop=s.captionPaddingTop,
fontfamily=s.captionFont,
fontsize=Em(0.9),
textalign=s.textAlign,
fontstyle=self.C.ITALIC,
# Change background color of the line to indicate the illustrate the difference for mobile size.
#media=Media(max=self.M_MOBILE_MAX, backgroundcolor='yellow', color='#222', fontsize=Em(1),
# margin=0, width=Perc(100),
)
b.text(
'Responsive page, generated by Xierpa3. Using BluePrint parameters.'
)
b._div()
def buildFeatured(self, b, data):
u"""Build the featured item. If <b>self.style.itemRandom</b> is <b>True</b>, then select a random item from the list.
If there is no <b>data.item</b> available, then ignore this method."""
if not data.items:
return
s = self.style
if s.itemRandom:
item = choice(data.items)
else:
item = data.items[0]
if s.label:
b.h2(fontsize=s.labelSize,
color=s.labelColor,
margintop=s.labelMarginTop,
marginbottom=s.labelMarginBottom,
lineheight=s.labelLineHeight,
media=(Media(max=C.M_TABLET,
fontsize=s.tabletLabelSize,
color='red'), Media(max=C.M_MOBILE,
color='blue')))
b.text(s.label)
b._h2()
b.a(href='/%s-%s' % (C.PARAM_ARTICLE, item.id), class_=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 s.showPoster:
b.a(href='/%s-%s' % (C.PARAM_ARTICLE, item.id),
class_=C.CLASS_NAME)
b.img(width=s.posterWidth,
src=item.poster,
float=C.LEFT,
padding=0,
margin=Margin(Em(0.5), Em(0.5), 0, 0),
media=Media(max=C.M_MOBILE, display=C.NONE))
b._a()
if s.showLevel:
b.h5(class_=C.CLASS_LEVEL,
color=s.levelColor,
fontsize=s.levelSize,
fontweight=s.levelWeight,
margintop=s.levelMarginTop,
lineheight=s.levelLineHeight)
b.text(item.level or s.genericLevel)
b.text(' level')
b._h5()
if item.author: # Test on text
b.a(href='/%s-%s' % (C.PARAM_AUTHOR, item.author),
class_=C.CLASS_AUTHOR)
b.h5(fontsize=s.authorSize,
fontweight=s.authorWeight,
color=s.authorColor,
lineheight=s.authorLineHeight,
display=s.authorDisplay)
b.text('By %s' % item.author)
b._h5()
b._a()
if s.showCategory and item.category: # Text on text
b.a(href='/%s-%s' % (C.PARAM_CATEGORY, item.category),
class_=C.CLASS_CATEGORY)
b.h5(fontsize=s.categorySize,
fontweight=s.categoryWeight,
lineheight=s.categoryLineHeight,
color=s.categoryColor,
margintop=Em(1),
display=C.BLOCK)
b.text(item.category)
b._h5()
b._a()
if item.summary is not None: # Test on element. Summary elements tag must be defined by generic style.
b.div(class_='featuredSummary',
clear=C.BOTH,
float=C.LEFT,
width=C.C100,
color=s.summaryColor,
fontsize=s.summarySize,
lineheight=s.summaryLineHeight,
margintop=s.summaryMarginTop,
marginbottom=s.summaryMarginBottom)
self.buildElement(b, item.summary)
b._div()
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()
def buildBlock(self, b):
s = self.style
data = self.getAdapterData(C.ADAPTER_MENU, id='home')
b.block(self) # div.mobileNavigation
b.div(class_=(C.CLASS_CONTAINER, self.className),
display=s.containerDisplay,
backgroundcolor=s.containerBackgroundColor,
marginleft=s.containerMarginLeft,
marginright=s.containerMarginRight,
paddingleft=s.containerPaddingLeft,
paddingright=s.comtainerPaddingRight,
media=Media(max=C.M_MOBILE, display=s.mobileContainerDisplay))
b.snippet(self, 'navigation-mobile'
) # Allow PHP to create a snippet file from this block.
b.div(class_=C.CLASS_ROW,
minwidth=0,
paddingleft=0,
paddingright=0,
overflow=C.HIDDEN,
margin=Margin(0, C.AUTO))
colClass = self.getColClass(s.colWidth)
#b.text(data.loop) # In case there is PHP looping code. Skip for CSS
b.div(class_=colClass,
width=C.AUTO,
float=C.NONE,
marginleft=Em(0.5),
marginright=Em(0.5),
paddingleft=Em(0.5),
paddingright=Em(0.5))
b.nav(id=C.ID_MOBILENAVWRAP,
width=s.navWidth,
display=s.navDisplay,
zindex=s.navZIndex)
b.div(id=C.ID_MENUICON,
class_=C.CLASS_MENU,
color=C.WHITE,
height=26,
width=56,
paddingtop=0.6,
cursor='pointer',
display=C.INLINEBLOCK,
marginright=0,
top=0,
left=0,
fontsize=13)
b.img(src=s.menuIconUrl,
padding=0,
margin=0,
verticalalign=C.MIDDLE,
maxwidth='50%',
height=C.AUTO)
b._div(comment='#' + C.ID_MENUICON) # #menu-icon
if data.menuItems is None:
b.error('No items in the adapter')
else:
b.ul(id=C.ID_NAV,
backgroundcolor=s.menuListBackgroundColor,
display=C.NONE,
clear=C.BOTH,
position=C.ABSOLUTE,
top=s.menuHeight - 5,
width=C.C100,
zindex=Z(2000),
padding=0,
margin=0,
liststyletype=C.NONE,
left=0,
textalign=C.CENTER)
for menu in data.menuItems:
url = menu.url
if url is None:
url = '/%s-%s' % (C.PARAM_ARTICLE, menu.id)
b.a(href=url, color='#E8E8E8')
b.li(fontsize=s.listFontSize,
paddingtop=Em(1.2),
width=C.C100,
liststyletype=C.NONE,
borderbottom=Border('1 solid white'),
height=36,
backgroundcolor='#4890BC')
b.text(
menu.name
) # Show full name, otherwise use b.text(menu.tag or menu.name)
b._li()
b._a()
b._ul()
b._nav()
b.a(href='/home', color='#E8E8E8')
b.text('Doing by Design')
b._a()
b._div(comment=C.CLASS_12COL)
#b.text(data._loop) # In case there is PHP looping code. Skip for CSS
b._div(comment=C.CLASS_ROW)
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